什么是 Sass？

发布时间：2023-05-25 13:42:33 所属栏目：教程来源：

导读：在说 Sass 之前不得不说到 CSS，相信你在看这篇文章之时一定是了解 CSS 的，以前的前端开发中我们一般是通过 CSS 来编写样式，而在现代化的前端开发中我们大多数企业中都在使用 Sass 来编写样式。那什么是 Sass 呢？

在说 Sass 之前不得不说到 CSS，相信你在看这篇文章之时一定是了解 CSS 的，以前的前端开发中我们一般是通过 CSS 来编写样式，而在现代化的前端开发中我们大多数企业中都在使用 Sass 来编写样式。那什么是 Sass 呢？我们引用 Sass 官网的一段话：

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world. — 官网

这段话中最关键的一处 CSS extension language , 翻译过来就是 CSS 扩展语言，这段话的总体意思就是说 Sass 是一个稳定的、强大的、专业级的 CSS 扩展语言。所以说，它是基于 CSS 扩展出来的，也有另一个叫法，Sass 是一个 CSS 预处理器，所以说 Sass 是需要编译后转换为 CSS 的，它一定是在你的项目编译时去做处理，而不是在运行时，了解这一点很重要！

为什么要使用 Sass？

CSS 已经可以满足我们编写各种样式，我们为什么又要使用它的扩展语言 Sass 呢？很重要的原因就是提高开发效率和提高代码可维护性！在大型的 web 应用开发中我们一般会编写大量的样式代码，Sass 在 CSS 的基础上提供了变量、嵌套 (nesting)、混合 (mixins) 、函数、指令等功能，使得我们可以更高效地编写样式，同时你还可以像编写 JS 一样来灵活地控制你的样式代码，这给 CSS 的开发带来了极大的便利！

Sass 初体验

在此我们先体验一下 Sass 中的嵌套，首先我先用 CSS 来写一段代码：

.first {
color: red;
}
.first .two {
color: blue;
}
.first .two .three {
color:green;
}
可以看到类似上面这种的 CSS 代码应该是项目中比较常见的，我们通过父选择器一层一层的去编写子元素的样式，重复的编写父选择器，那如果是使用 Sass 可以怎样写呢？请看如下代码：

first {
color:red;
two {
color:blue;
three {
color:green;
}
}
}
这么写起来是不是很爽～你可以嵌套着去编写，而不需要每次都将父级选择器给写上，同时也比较便于维护。这仅仅是 Sass 提供的一个小扩展，这里只做一个简单的演示，后面将逐一对 Sass 提供的各种功能进行详细讲解。

几种 CSS 预处理语言的对比

CSS 的预处理语言不是只有 Sass，目前市面上有很多种，比如 less、Stylus、turbine、Swithch CSS 等等，目前比较主流的就是 Sass、less、Stylus ，那么 Sass 相较于其他的几种有什么优缺点呢？

我认为 Sass 最大的优势在于它诞生的比较早，比较成熟，同时还有 ruby 社区的良好支持以及 Compass 这个强大的工具库；还有就是它更好的支持条件语句，是我们熟知的 if else 的写法，整体来说功能比较强大，热度比较高。

而 Sass 最大的一个痛点我认为就是安装过于繁琐，Sass 的安装需要 Ruby 环境，所以在安装上步骤稍多了些，同时在国内使用 npm 安装的时候也确实是慢的可以，你可能需要将 npm 镜像源切换为淘宝源，后面会详细介绍。

总的来说，选择 Sass 作为 CSS 预处理语言的入门还是比较容易的，另外还要考虑到企业中前端技术团队对技术栈的需求，可能有的团队使用 Sass，有的团队使用其他。

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!