一、注释

Sass 支持标准的 CSS 多行注释 /* */，以及单行注释 //，前者会被完整输出到编译后的 CSS 文件中，而后者则不会。

二、CSS 功能拓展

1. 嵌套规则

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

#main {
  width: 97%;
  p, div {
    font-size: 2em;
    a { font-weight: bold; }
  }
  pre { font-size: 3em; }
}

// --- 编译后 ---
#main {
  width: 97%;
}
#main p, #main div {
  font-size: 2em;
}
#main p a, #main div a {
  font-weight: bold;
}
#main pre {
  font-size: 3em;
}

嵌套功能避免了重复输入父选择器，而且令复杂的 CSS 结构更易于管理。

2. 父选择器 &

在嵌套 CSS 规则时，有时也需要直接使用嵌套外层的父选择器，例如，当给某个元素设定 hover 样式时，或者当 body 元素有某个 classname 时，可以用 & 代表嵌套规则外层的父选择器。

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

// --- 编译后 ---
a {
  font-weight: bold;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
body.firefox a {
  font-weight: normal;
}

编译后的 CSS 文件中 & 将被替换成嵌套外层的父选择器，如果含有多层嵌套，最外层的父选择器会一层一层向下传递。

3. 属性嵌套

有些 CSS 属性遵循相同的命名空间，比如 font-family, font-size, font-weight 都以 font 作为属性的命名空间。为了便于管理这样的属性，同时也为了避免了重复输入，Sass 允许将属性嵌套在命名空间中，例如：

.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

// --- 编译后 ---
.funky {
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold;
}

4. 占位符选择器

Sass 额外提供了一种特殊类型的选择器：占位符选择器。与常用的 id 与 class 选择器写法相似，只是 # 或 . 替换成了 %。必须通过 @extend 指令调用。

三、变量

1. 变量声明与引用

sass 使用 $ 符号来标识变量：

$highlight-color: #F90;
.selected {
  border: 1px solid $highlight-color;
}

// --- 编译后 ---
.selected {
  border: 1px solid #F90;
}

变量支持块级作用域，嵌套规则内定义的变量只能在嵌套规则内使用（局部变量），不在嵌套规则内定义的变量则可在任何地方使用（全局变量）。将局部变量转换为全局变量可以添加 !global 声明：

#main {
  $width: 5em !global;
  width: $width;
}
#sidebar {
  width: $width;
}

// --- 编译后 ---
#main {
  width: 5em;
}
#sidebar {
  width: 5em;
}

2. 插值语句

通过 #{} 插值语句可以在选择器或属性名中使用变量：

$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}
  
// --- 编译后 ---
p.foo {
  border-color: blue; 
}

3. 变量默认值

可以在变量的结尾添加 !default 给一个未通过 !default 声明赋值的变量赋值，此时，如果变量已经被赋值，不会再被重新赋值，但是如果变量还没有被赋值，则会被赋予新的值。

$content: "First content";
$content: "Second content?" !default;
$new_content: "First time reference" !default;
#main {
  content: $content;
  new-content: $new_content;
}

// --- 编译后 ---
#main {
  content: "First content";
  new-content: "First time reference";
}

四、变量类型

SassScript 支持 6 种主要的数据类型：

数字：1, 2, 13, 10px
字符串：有引号字符串与无引号字符串，"foo", 'bar', baz
颜色：blue, #04a3f9, rgba(255,0,0,0.5)
布尔型：true, false
空值：null
数组 (list)：用空格或逗号作分隔符，如 1.5em 1em 2em 与 Helvetica, Arial
maps：相当于 JavaScript 的 object，如 (key1: value1, key2: value2)

1. 算术运算

算术运算，如果必要会在不同单位间转换值：

p {
  width: 1in + 8pt;
}
// --- 编译后 ---
p {
  width: 1.111in; 
}

颜色运算：颜色值的运算是分段计算进行的，也就是分别计算 R、G、B 的值：

p {
  color: #010203 + #040506;
}
// --- 编译后 ---
p {
  color: #050709; 
}

在 CSS 中 “/” 通常起到分隔数字的用途，SassScript 同时也赋予了 “/” 除法运算的功能。以下三种情况 “/” 将被视为除法运算符号：

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

p {
  font: 10px/8px;             // 分隔符不做除法运算
  $width: 1000px;
  width: $width/2;            // 使用变量，进行除法运算
  width: round(1.5)/2;        // 使用函数，进行除法运算
  height: (500px/2);          // 使用小括号包裹，进行除法运算
  margin-left: 5px + 8px/2px; // 有其他算数表达式，进行除法运算
}

// --- 编译后 ---
p {
  font: 10px/8px;
  width: 500px;
  width: 1;
  height: 250px;
  margin-left: 9px;
}

如果需要使用变量，同时又要确保 / 不做除法运算而是完整地编译到 CSS 文件中，只需要用 #{} 插值语句将变量包裹。

2. 字符串与字符串运算

SassScript 支持 CSS 的两种字符串类型：有引号字符串与无引号字符串，在编译 CSS 文件时不会改变其类型。只有一种情况例外，使用 #{}时，有引号字符串将被编译为无引号字符串：

$selector: ".header";
#{$selector}:before {
  content: "Hi, Firefox users!";
}

// --- 编译后 ---
.header:before {
  content: "Hi, Firefox users!";
}

字符串运算：

// 字符串连接
p {
  cursor: e + -resize;
}
// --- 编译后 ---
p {
  cursor: e-resize; 
}

// 有引号字符串与无引号字符串链接，
// 以 + 前的字符串确定是否有引号
p:before {
  content: "Foo " + Bar;
  font-family: sans- + "serif";
}
// --- 编译后 ---
p:before {
  content: "Foo Bar";
  font-family: sans-serif; 
}

// 运算表达式与其他值连用时，用空格做连接符：
p {
  margin: 3px + 4px auto;
}
// --- 编译后 ---
p {
  margin: 7px auto; 
}

// 在有引号的文本字符串中使用 #{} 插值语句可以添加动态的值
p:before {
  content: "I ate #{5 + 10} pies!";
}
// --- 编译后 ---
p:before {
  content: "I ate 15 pies!"; 
}

四时宝库

程序员的知识宝库

HTML/CSS 备忘录 - 17. Sass 基本语法

一、注释

二、CSS 功能拓展

三、变量

四、变量类型