Sass 入门 - Githubissues

前言

我终于开始正式学这个老早就出来的东西了。

来，介绍下自己

Sass (Syntactically Awesome StyleSheets) 是一个可以被编译成 CSS 的脚本语言，即 SassScript。Sass 有两种语法，最早的语法是“缩进语法”，使用缩进去分离代码块和新行的字符以区分不同的规则。新语法就是“SCSS”，使用和 CSS 一样的块语法，即用花括号去表示一个代码块，用分号去分隔不同的行。两种语法的文件的扩展名分别是 .sass 和 .scss。

使用 Sass

先按照安装说明安装 Sass。然后写个 demo1.scss，用 sass 编译了下：

$ sass scss/demo1.scss ../dist/css/demo1.css

除 CSS 文件还生成了了 demo1.css.map 文件，这是个 sourcemap 文件，便于浏览器用调试工具调试代码。

变量 (variables)

变量用于存储值，增强代码的复用性，使用 $ 来表示变量。变量类型可以是：数字、字符串、颜色、布尔型、null、数组（list，用空格或逗号分隔的一系列的值）、maps（相当于 JavaScript 的 object，写为 (key1: value1, key2: value2)）。

$width: 5em;

#main {
  width: $width;
}

嵌套 (nested rules)

Sass 允许将一个 CSS 样式嵌套进另一个样式中，内层的样式将它外层的选择器作为父选择器。

.parent {
  color: blue;
  .child {
    font-size: 12px;
  }
}

有时要直接使用嵌套外层的父选择器，这时可使用 & 代表嵌套外层的父选择器。

a {
  font-weight: bold;
  text-decoration: none;
  &:hover {
    text-decoration: underline;
  }
  body.firefox & {
    font-weight: normal;
  }
}

嵌套不仅只用于子选择器上，还可以使用在同一个命名空间中的属性上。

.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}
// 会被转译为：
// .funky {
//   font-family: fantasy;
//   font-size: 30em;
//   font-weight: bold; 
// }

混入 (mixins)

我们可以借助 @mixin 指令定义可重复使用的样式片段，当要使用该片段时，用 @include 指令指定片段名即可。

@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}
.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}

运算 (Operations)

Sass 支持 +、 -、 *、 /、 %、 <、 >、 <=、 >=、 ==、 != 运算符。

对于 /，需要注意只有以下三种情况才会视为是除法运算符：

如果值，或值的一部分，是变量或者函数的返回值
如果值被圆括号包裹
如果值是算数表达式的一部分

p {
  font: 10px/8px;             // 原生 CSS，不作为除法
  $width: 1000px;
  width: $width/2;            // 使用了变量，作为除法
  width: round(1.5)/2;        // 使用了函数，作为除法
  height: (500px/2);          // 用圆括号包裹，作为除法
  margin-left: 5px + 8px/2px; // 使用了 +，作为除法
}

引用 (import)

当一个 scss 文件只是用于导入到其他 scss 文件而不需要编译为 css 文件时，只需要在这个文件名前添加下划线即可，但是导入语句则不需要添加下划线。

可以使用 @import 引入其他的 scss 或 sass 文件。另外，被导入的文件中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用。

@import 'foo'; // 这会导入 `foo.scss` 或 `foo.sass`

在以下情况下，@import 仅作为普通的 CSS 语句，不会导入任何 Sass 文件。

文件拓展名是 .css
文件名以 http:// 开头
文件名是 url()
@import 包含 media queries

选择器继承 (selector inheritance)

我们可以使用 @extend 实现将一个选择器下的所有样式继承给另一个选择器。

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

这个特性是可以帮助我们解决在针对一个元素应用普通样式和特殊样式时要写两个 class 的问题，现在只需要写 seriousError 的类名就可以了。

咦？@extend 和 @mixin 怎么感觉用起来的效果一样。其实不然，

@mixin 定义的代码段不会编译到最终的 css 文件中，@extend 中被继承的代码片段则会
@extend 会聪明地对选择器进行合并，节省代码量，@mixin 相当于把一段代码复制粘贴到别处
@mixin 还可以传入参数，还有默认值，跟函数一样一样的

工具

结合 webpack 用就好了，compass 就不要用了，已经被作者抛弃好久了==！

结尾

其实 Sass 写起来的感觉跟 JavaScript 蛮像的。另外，这里介绍的只是很少的但是很常用的特性，如果在写的过程中感觉有不合理的或者不爽的地方，不妨看看 Sass 官方文档，说不定就找到高级的写法了:)。

yangkean / blog

Sass 入门 #6

前言