Sass

一、属性嵌套

CSS属性名以中划线分割，前半部分相同的，可以进行公用属性提取。

1、公用属性提取

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

2、命名空间也可以包含自己的属性值：

.funky {
  font: 20px/24px {
    family: fantasy;
    weight: bold;
  }
}
## 编译为:
.funky {
  font: 20px/24px;
  font-family: fantasy;
  font-weight: bold; 
}

二、父选择器 '&'

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; 
}

三、变量定义 '$'

1、定义全局变量：

$width: 5em;
#main {
  width: $width;
}
编译为：
#main {
  width: 5em;
}

2、作用域提升!global

#main {
  $width: 5em !global;    //将 $width作用域提升为全局变量
  width: $width;
}
#sidebar {
  width: $width;
}
编译为：
#main {
  width: 5em;
}
#sidebar {
  width: 5em;
}

四、数据类型

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

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

五、运算

1、数字运算

• 数字类型：支持 (+， -， *， /， %，<， >， <=， >= )，如果必要会在不同单位间转换值
• 所有类型：==, !=

2、颜色值运算

运算规则：红、绿、蓝分别相加。

p {
  color: #010203 + #040506;
}
p{
  color: #050709
}

3、字符串运算

1）、运算值是否有引号，取决于+号前面的字符是否有引号。

p:before {
  content: "Foo " + Bar;
  font-family: sans- + "serif";
}
编译为：
p:before {
  content: "Foo Bar";
  font-family: sans-serif;
}

2、运算表达式与其他值连用时，用空格做连接符：

p {
  margin: 3px + 4px auto;
}
编译wei：
p {
  margin: 7px auto;
}