Sass

前端

变量

用$开头表示变量;
例子：

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;
body {
  font: 100% $font-stack;
  color: $primary-color;
}

嵌套

像HTML那样直观书写css父子结构
（那兄弟结构呢？）
例子：

//scss
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li { display: inline-block; }
  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}
//编译后的css
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

运算

css中不支持运算，这点在sass中得到改进
运算过程注意符号也参与运算
例子：

//scss
article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}
//编译后的css
article[role="main"] {
  float: left;
  width: 62.5%;
}

import

引入文件/模块化
若不想sass单独编译模块，可以在模块文件名前加入下划线让sass忽略它，如_partial.scss。
引用方式与CSS3中的@import基本相同，也可因引入文件
例子:
_reset.scss:

// _reset.scss
html,
body,
ul,
ol {
   margin: 0;
  padding: 0;
}

base.scss

// base.scss
@import 'reset';
body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

我们注意到，import reset时没有添加文件后缀，因为sass引擎能自动补全.scss
如果引入css文件则语法参见CSS3

　　@import "foo.css";

Mixin

Mixin类似于函数（但不包含逻辑，只是可重用的代码块），支持参数（参数支持默认值）
通过@mixin声明，通过@include调用
例子：

　　@mixin left($value: 10px) {
　　　　float: left;
　　　　margin-right: $value;
　　}
　　//实际使用时可修改参数
　　div {
　　　　@include left(20px);
　　}

注意，其实变量代表的是字符串，所以不仅仅是属性值可以使用变量，属性名也能使用变量。通过#{}来嵌入变量。
下面是通过mixin填圆角属性例子：

　　@mixin rounded($vert, $horz, $radius: 10px) {
　　　　border-#{$vert}-#{$horz}-radius: $radius;
　　　　-moz-border-radius-#{$vert}#{$horz}: $radius;
　　　　-webkit-border-#{$vert}-#{$horz}-radius: $radius;
　　}

调用时

　　#navbar li {
　　    @include rounded(top, left); 
　　}

颜色函数

SASS提供内置的生成颜色的函数，以生成系列颜色
例子：

　　lighten(#cc3, 10%) // #d6d65c，变亮
　　darken(#cc3, 10%) // #a3a329，变暗
　　grayscale(#cc3) // #808080，灰度化
　　complement(#cc3) // #33c，互补色

高级语法

条件语句

@if、@else
例子：

　　@if lightness($color) > 30% {
　　　　background-color: #000;
　　} @else {
　　　　background-color: #fff;
　　}

循环语句

@for、@while、@each
例子：

//for
　　@for $i from 1 to 10 {
　　　　.border-#{$i} {
　　　　　　border: #{$i}px solid blue;
　　　　}
　　}
//while
　　$i: 6;
　　@while $i > 0 {
　　　　.item-#{$i} { width: 2em * $i; }
　　　　$i: $i - 2;
　　}
//each
　　@each $member in a, b, c, d {
　　　　.#{$member} {
　　　　　　background-image: url("/image/#{$member}.jpg");
　　　　}
　　}

自定义函数

例子：

　　@function double($n) {
　　　　@return $n * 2;
　　}
　　#sidebar {
　　　　width: double(5px);
　　}