sass

变量

<style type='text/scss'>$font-size:12px;</style>

$表示就可以了

用 Sass 嵌套 CSS

Sass 允许 CSS 规则的嵌套，这在组织样式表的时候会很有用。

在 CSS 里，每个元素的样式都需要写在独立的代码块中，如下所示：

nav {  background-color: red;}
nav ul {  list-style: none;}
nav ul li {  display: inline-block;}

对于一个大型项目，CSS 规则会很复杂。 这时，引入嵌套功能（即在对应的父元素中写子元素的样式）可以有效地简化代码：

nav {  background-color: red;
  ul {    list-style: none;
    li {      display: inline-block;    }  }}

用 Mixins 创建可重用 CSS

在 Sass 中，mixin 是一组 CSS 声明，可以在整个样式表中重复使用。

CSS 的新功能需要一段时间适配后，所有浏览器后才能完全使用。 随着浏览器的不断升级，使用这些 CSS 规则时可能需要添加浏览器前缀。 考虑 box-shadow：

div {  -webkit-box-shadow: 0px 0px 4px #fff;  -moz-box-shadow: 0px 0px 4px #fff;  -ms-box-shadow: 0px 0px 4px #fff;  box-shadow: 0px 0px 4px #fff;}

对于所有具有 box-shadow 属性的元素重写此规则，或者更改每个值以测试不同的效果，需要花费大量的精力。 Mixins 就像 CSS 的函数。 以下是一个例子：

@mixin box-shadow($x, $y, $blur, $c){   -webkit-box-shadow: $x $y $blur $c;  -moz-box-shadow: $x $y $blur $c;  -ms-box-shadow: $x $y $blur $c;  box-shadow: $x $y $blur $c;}

定义以 @mixin 开头，后跟自定义名称。 参数（$x，$y，$blur，以及上例中的 $c ）是可选的。 现在在需要 box-shadow 规则的地方，只需一行 mixin 调用而无需添加所有的浏览器前缀。 mixin 可以通过 @include 指令调用。

div {  @include box-shadow(0px, 0px, 4px, #fff);}