4.1 SASS vs. SCSS

发布于 2025-02-26 23:07:09 字数 2613 浏览 0 评论 0 收藏 0

用到的名词：
pre-process 预处理器
programmable 可编程的
semi-colons 分号
brace 花括号
function 函数
mixins 混合式
CSS-like synax 类 CSS 语法

什么是 Sass?

根据 Sass 文档 http://sass-lang.com/documentation/ :

Sass is an extension of CSS that adds power and elegance to the basic language. It allows you to use variables, nested rules, mixins, inline imports, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well organized, and get small stylesheets up and running quickly. Sass 是一个 CSS 的扩展，给 CSS 这门基本语言添加了力量与优雅。他允许你使用变量，嵌入规则，混入，内联导入等等，所有这些特性都是完全兼容 CSS 语法的。Sass 帮助良好的组织大型的样式表，对于小型表单使它结构简单，运行加速。

简单来说，Sass 使得 SCSS 可编程。你也许会问为什么我们这章讲的是 SCSS，而这里却在讲 Sass。是这样的 Sass 和 SCSS 一样是一个 CSS 预处理器，CSS 预处理器可以用他自己的方法来编写 pre-CSS 语法。

Sass 是作为另一个名为 HAML 的预处理器的一部分由一群 Ruby 开发者开发出来的。因此，他从 Ruby 那里继承了大量的语法样式，例如躲进，没有花括号，没有分号等等。
以下是一个 Sass 文件的范例：

// app.sass
brand-primary= blue
.container
  color= !brand-primary
  margin= 0px auto
  padding= 20px

=border-radius(!radius)
  -webkit-border-radius= !radius
  -moz-border-radius= !radius
  border-radius= !radius
*
  +border-radius(0px)

当通过一个 Sass 编译器运行以上 Sass 代码的时候，他返回了一个老式的良好的 CSS。生成的 CSS 大概是这样的：

.container {
  color: blue;
  margin: 0px auto;
  padding: 20px;
}
* {
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
}

但是你有没有注意到在 Sass 代码中有一个 brand-primary 作为一个变量，在 container 中替换了他的值的，或者 border-radius 作为一个函数（也可以叫如混合式）当使用参数调用的时候生成 CSS 规则？这些在 CSS 都不见了。
哪些使用 bracket-based 编程语言的人们这么些代码有点费劲。于是，SCSS 就出现了。
Sass 是 Syntactically Aswsome Style Sheet（语法牛逼的样式表）的简写， SCSS 是 Sassy CSS（时髦的 CSS）的简写。 SCSS 和 Sass 非常像，除了类 CSS 语法。如果使用 SCSS 写入上 Sass 代码的话，是这样子的：

// app.scss
$brand-primary: blue;
.container{
  color: !brand-primary;
  margin: 0px auto;
  padding: 20px;
}
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}
* {
  @include border-radius(5px);
}

这个看起来离 CSS 靠近了些，对吧？这个令人印象深刻。Ionic 使用 SCSS 给他的组件样式化。