官网地址

sass-lang.com/

en.sass.hk/

工具

sass转css 在线工具： www.sassmeister.com/

数据类型

Lists

语法

(<expression>,)
or:
[<expression>]
或者：
() or []

$sizes: 40px, 50px, 80px;
$valid-sides: top, bottom, left, right;

Maps

语法

(<expression>: <expression>, <expression>: <expression>)

$font-weights: ("regular": 400, "medium": 500, "bold": 700);
$themes:(light: (color1: red, color2: green), dark: (color1: #000, color2: grey))

指令

1、@mixin and @include

语法

@mixin name(<arguments...>) { ... }
or
@mixin <name> { ... }

作用：扩展某个类的属性

使用步骤：

1. @mixin 定义
2. @include 引用

举例：

@mixin large-text {
 font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}
.page-title {
    @include large-text;
    padding: 4px;
    margin-top: 10px;
}
// 编译结果：
.page-title {
  font-family: Arial;
  font-size: 20px;
  font-weight: bold;
  color: #ff0000;
  padding: 4px;
  margin-top: 10px;
}

@mixin sexy-border($color, $width) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
p { @include sexy-border(blue, 2in); }
// 编译结果：
p {
    border-color: blue;
    border-width: 2in;
    border-style: dashed; 
}

@mixin box-shadow($shadows...) {
  -moz-box-shadow: $shadows;
  -webkit-box-shadow: $shadows;
  box-shadow: $shadows;
}
.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}
// 编译结果：
.shadows {
  -moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  -webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
}

在 @mixin中 使用 @content

@content 相当于是一个插槽, 占位符，

用于在实际使用的过程中承载实际的内容，即 @include 中的内容

举例：

@mixin apply-to-ie6-only {
  * html {
    @content;
  }
}
@include apply-to-ie6-only {
  #logo {
    background-image: url(/logo.gif);
  }
  .main {
    color: red;
  }
  .header {
    font-size: 20px;
  }
}
// 编译成：
* html #logo { // 对应的 @content
  background-image: url(/logo.gif);
}
* html .main { // 对应的 @content
  color: red;
}
* html .header { // 对应的 @content
  font-size: 20px;
}

$color: white;
@mixin colors($color: blue) {
  background-color: $color; // 这里的$color对应的是 blue
  @content; // 这里的 $color对应的是 white
  border-color: $color; // 这里的$color对应的是 blue
}
.colors {
  @include colors { color: $color; }
}
// 编译为：
.colors {
  background-color: blue;
  color: white; // 对应的 @content
  border-color: blue;
}

$style: 'solid';
$default: 'red';
@mixin fonts {
  font-family: 'Microsoft Yahei';
  border: 1px #{$style} #{$default};
  color: #ccc;
  @content;
  background: #eee;
}
.fontRed {
  @include fonts {
    padding-top: 20px;
  }
}
// 编译后：
.fontRed {
  font-family: 'Microsoft Yahei';
  border: 1px solid red;
  color: #ccc;
  padding-top: 20px; // 对应的 @content
  background: #eee;
}

2、@each

语法：

@each $var in <list or map>

作用：遍历list 或 map 数据类型

举例：

1、遍历list

@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}
// 编译后：
.puma-icon {
  background-image: url("/images/puma.png");
}
.sea-slug-icon {
  background-image: url("/images/sea-slug.png");
}
.egret-icon {
  background-image: url("/images/egret.png");
}
.salamander-icon {
  background-image: url("/images/salamander.png");
}

@each $animal, $color, $cursor in (puma, black, default),
  (sea-slug, blue, pointer), (egret, white, move)
{
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
    border: 2px solid $color;
    cursor: $cursor;
  }
}
// 编译后：
.puma-icon {
  background-image: url("/images/puma.png");
  border: 2px solid black;
  cursor: default;
}
.sea-slug-icon {
  background-image: url("/images/sea-slug.png");
  border: 2px solid blue;
  cursor: pointer;
}
.egret-icon {
  background-image: url("/images/egret.png");
  border: 2px solid white;
  cursor: move;
}

2、遍历map

$prefixes-by-browser: (
  "firefox": moz, 
  "safari": webkit, 
  "ie": ms
);
// 这里的 $browser对应的是map的每一项，
// "firefox": moz, 
// "safari": webkit, 
// "ie": ms 
@each $browser in $prefixes-by-browser {
  .#{$browser} {
    color: red;
  }
}
// 编译后的结果：
.firefox moz {
  color: red;
}
.safari webkit {
  color: red;
}
.ie ms {
  color: red;
}

$prefixes-by-browser: (
  "firefox": red, 
  "safari": green, 
  "ie": dark
);
// 这里的 $browser 对应的是map的每一项的key，
// 这里的 $name 对应的是map的每一项的value，
@each $browser, $name in $prefixes-by-browser {
  .#{$browser} {
    color:  $name;
  }
}
// 编译后的结果：
.firefox {
  color: red;
}
.safari {
  color: green;
}
.ie {
  color: dark;
}