Sass功能

Sass 预处理技术

Sass是一款强化CSS 的辅助工具，它在CS 语法的基础上增加了变量(variables)、嵌套(nested rules) 、混合(mixins)、导入(inline imports)等高级功能，这些拓展令 CSS 更加强大与优。使用 Sass 以及 Sass 的样式库有助于更好地组织管理样式文件，以及更高效地开发项目

特色功能

完全兼容 CSS3
在CSS 基础上增加变量、嵌套 (nesting)、混合 (mixins)等功能。
通过函数 (hsla、max、floor 等) 进行颜色值与属性值的运算。
提供控制指令(if、for、each 等)等高级功能。
自定义输出格式

语法格式

Sass 有两种语法格式:scss和 sass

Sass 有两种语法格式。首先是 SCSS (Sassy CSS) —— 也是本文示例所使用的格式 —— 这种格式仅在 CSS3 语法的基础上进行拓展，所有 CSS3 语法在 SCSS 中都是通用的，同时加入 Sass 的特色功能。此外，SCSS 也支持大多数 CSS hacks 写法以及浏览器前缀写法 (vendor-specific syntax)，以及早期的 IE 滤镜写法。这种格式以 .scss 作为拓展名。

另一种也是最早的 Sass 语法格式，被称为缩进格式 (Indented Sass) 通常简称 “Sass”，是一种简化格式。它使用 “缩进” 代替 “花括号” 表示属性属于某个选择器，用 “换行” 代替 “分号” 分隔属性，很多人认为这样做比 SCSS 更容易阅读，书写也更快速。缩进格式也可以使用 Sass 的全部功能，只是与 SCSS 相比个别地方采取了不同的表达方式，具体请查看 the indented syntax reference。这种格式以 .sass 作为拓展名。

配置扩展

{
    "easysass.compileAfterSave": true,//是否保存后自动编译 sass/scss 文件
    "easysass.excludeRegex": "^_", //排除以"_"开头的文件
    "easysass.targetDir": "",//自定义css输入文件路径，为当前目录下
    "easysass.formats": [

        {
            "format": "expanded",
            "extension": ".css"
        },
        {
            "format": "compressed",
            "extension": ".min.css"
        }
    ]
}

变量

sass让人们受益的一个重要特性就是它为 css引入了变量。你可以把反复使用的css属性值定义成变量，然后通过变量名来引用它们，而无需重复书写这一属性值。或者，对于仅使用过一次的属性值，你可以赋予其一个易懂的变量名，让人一眼就知道这个属性值的用途。

sass 使用 $符号来标识变量，比如 $highlight-color 和 $sidebar-width。为什么选择$符号呢?因为它好认、更具美感，在CSS 中并无他用，不会导致与现存或未来的 css 语法冲突。

变量声明

sass变量的声明语法和css 属性的声明很像:

$highlight-color: #f90;

与css属性不同，变量可以在css 规则块定义之外声明。当变量定义在 css 规则块内，那么该变量只能在此规则块内使用。如果它们出现在任何形式的 {...}中(如 @media 或者 @font-face 块)，情况也是如此

变量引用

凡是 CSS 属性的标准值(比如说 px 或者 bold) 可存在的地方，变量就可以使用。CSS 生成时，变量会被它们的值所替代。之后，如果你需要一个不同的值，只需要改变这个变量的值，则所有引用此变量的地方生成的值都会随之改变。

中划线还是下划线

sass的变量名可以与 css 中的属性名和选择器名称相同，包括中划线和下划线。

这完全取决于个人的喜好，有些人喜欢使用中划线来分隔变量中的多个词 ($light-color)，而有些人喜欢使用下划线($light_color)。使用中划线的方式更为普遍，这也是compass 和本文都使用的方式。

不过，sass 并不相强迫任何人一定使用中划线或下划线，所以这两种用法相互兼容。用中划线声明的变量可以使用下划线的方式引用，反之亦然。这意味着即使compass 用中划线的命名方式，这并不影响你在使用 compass 的样式中用下划线的命名方式进行引用

嵌套规则 (Nested Rules)

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

#main p {
  color: #00ff00;
  width: 97%;

  .redbox {
    background-color: #ff0000;
    color: #000000;
  }
}

编译为

#main p {
  color: #00ff00;
  width: 97%; }
  #main p .redbox {
    background-color: #ff0000;
    color: #000000; }

嵌套功能避免了重复输入父选择器，而且令复杂的 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 中重复写选择器是非常恼人的。如果要写一大串指向页面中同一块的样式时，往往需要一遍又一遍地写同一个ID

#content article hl { color: #333;}
#content article p { margin-bottom: 1.4em; }
#content aside { background-color: #eee; }

像这种情况，sass 可以让你只写一遍，且使样式可读性更高。在 sass 中，你可以像俄罗斯套娃那样在规则块中嵌套规则块。sass 在输出css 时会帮你把这些嵌套规则处理好，避免你的重复书写。

//scss
#content {
	article {
        hl {color: #333;}
		p { margin-bottom: 1.4em; }
    }
    aside {background-color: #eee; }
}
//css
#content article h1 {
color: #333;
}
#content article p {
margin-bottom: 1.4em;
}
#content aside {
background-color: #eee;
}

父选择器 `&`

在嵌套 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 文件中 & 将被替换成嵌套外层的父选择器，如果含有多层嵌套，最外层的父选择器会一层一层向下传递：

#main {
  color: black;
  a {
    font-weight: bold;
    &:hover { color: red; }
  }
}

编译为

#main {
  color: black; }
  #main a {
    font-weight: bold; }
    #main a:hover {
      color: red; }

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

#main {
  color: black;
  &-sidebar { border: 1px solid; }
}

编译为

#main {
  color: black; }
  #main-sidebar {
    border: 1px solid; }

当父选择器含有不合适的后缀时，Sass 将会报错。

属性嵌套

有些 CSS 属性遵循相同的命名空间 (namespace)，比如 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; }

命名空间也可以包含自己的属性值，例如：

.funky {
  font: 20px/24px {
    family: fantasy;
    weight: bold;
  }
}

编译为

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