scss

Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增长了变量 (variables)、嵌套 (nested rules)、
混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更增强大与优雅。复制代码

特点功能：

• 彻底兼容css3
• 在css的基础上增长变量、嵌套、混合等功能
• 经过函数进行颜色值与属性值的运算
• 提供控制指令（control directives）等高级功能
• 自定义输出格式

sass有两种语法格式，首先是 SCSS（Sassy CSS），这种格式仅在css3的语法上进行拓展，同时加入了Sass的特点功能。以 .scss 做为扩展名。    

另外一种是Sass语法格式，（又称：缩进格式），是一种简化格式，用“缩进”代替“花括号”表示属性属于某个选择器，用 “换行” 代替 “分号” 分隔属性。以 .sass 做为扩展名

Sass 容许将一套 CSS 样式嵌套进另外一套样式中，内层的样式将它外层的选择器做为父选择器。嵌套功能避免了重复输入父选择器，并且令复杂的 CSS 结构更易于管理：

.solidPart {               > svg {                position: relative;                top: 2px;                .name {                  color: #ff7219; } } }复制代码

父选择器&

&符号表明父选择器

a {  font-weight: bold;  text-decoration: none;  &:hover {    text-decoration: underline;  }  body.firefox & {    font-weight: normal;  }}   
// 以上&表明a选择器复制代码

& 必须做为选择器的第一个字符，其后能够跟随后缀生成复合的选择器，例如

#main {
  color: black;
  &-sidebar { border: 1px solid; }
}复制代码

.suj {  >p {    font: {      family: fantasy;      size: 1em;      weight: bold;    }    color: red;  }}复制代码

变量 $ (Variables: $)

变量以$开头，赋值方法与css属性方法的写法同样（变量支持做用域）

$r: red;
.suj {  >p {    font: {      family: fantasy;      size: 1em;      weight: bold;    }    color: $r;  }}复制代码

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

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

SassScript 也支持其余 CSS 属性值，好比 Unicode 字符集，或 !important 声明。然而Sass 不会特殊对待这些属性值，一概视为无引号字符串。

 数字运算 (Number Operations)

SassScript 支持数字的加减乘除、取整等运算 (+, -, *, /, %)，若是必要会在不一样单位间转换值。

字符串运算 (String Operations)

+ 可用于链接字符串

在有引号的文本字符串中使用 #{} 插值语句能够添加动态的值：

p:before {
  content: "I ate #{5 + 10} pies!";
}复制代码

 @import

Sass 拓展了 @import 的功能，容许其导入 SCSS 或 Sass 文件。

@import "foo.scss";
复制代码

或

@import "foo";
@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);复制代码

嵌套 @import

.example {
  color: red;
}
复制代码

而后导入到 #main 样式内

#main {
  @import "example";
}复制代码

将会被编译为

#main .example {
  color: red;
}复制代码