sass语法

数据

变量名以$符号开头

$key: value;

数据类型

• 数字（例如 1.2、13、10px）
• 文本字符串，无论是否有引号（例如 “foo”、’bar’、baz）
• 颜色（例如 blue、#04a3f9、rgba(255, 0, 0, 0.5)）
• 布尔值（例如 true、false）
• 空值（例如 null）
• 值列表，用空格或逗号分隔（例如 1.5em 1em 0 2em、Helvetica, Arial, sans-serif）

#{}强制以字符串形式输出，不进行运算

$number: 1;

.gird-#{number}: {
    width: 100%;
}

编译为

.gird-1: {
    width: 100%;
}

运算

所有数据类型都支持等式运算 (== and !=)。 另外，每种数据类型也有其支持的特殊运算符。

数字运算

SassScript 支持数字的标准运算（加 +、减 -、乘 *、除 /和取模 %），并且，如果需要的话，也可以在不同单位间做转换：

p {
  width: 1in + 8pt;
}

被编译为：

p {
  width: 1.111in; 
}

数字也支持关系运算（<、>、<=、>=）， 等式运算（==、!=）被所有数据类型支持。

除法运算和 /

CSS 允许 / 出现在属性值里，作为分隔数字的一种方法。 既然 SassScript 是 CSS 属性语法的扩展， 他就必须支持这种语法，同时也允许 / 用在除法运算上。 也就是说，默认情况下，在 SassScript 里用 / 分隔的两个数字， 都会在 CSS 中原封不动的输出。

然而，在以下三种情况中，/ 会被解释为除法运算。 这就覆盖了绝大多数真正使用除法运算的情况。 这些情况是：

1. 如果数值或它的任意部分是存储在一个变量中或是函数的返回值。
2. 如果数值被圆括号包围。
3. 如果数值是另一个数学表达式的一部分。

例如：

p {
  font: 10px/8px;             // 纯 CSS，不是除法运算
  $width: 1000px;
  width: $width/2;            // 使用了变量，是除法运算
  width: round(1.5)/2;        // 使用了函数，是除法运算
  height: (500px/2);          // 使用了圆括号，是除法运算
  margin-left: 5px + 8px/2px; // 使用了加（+）号，是除法运算
}

被编译为：

p {
  font: 10px/8px;
  width: 500px;
  height: 250px;
  margin-left: 9px; }

如果你希望在纯 CSS 中使用变量和 /， 你可以用 #{} 包住变量。 例如：

p {
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height};
}

被编译为：

p {
  font: 12px/30px; }

@ 规则和指令

Sass 支持所有 CSS3 的 @ 规则， 以及一些 Sass 专属的规则，也被称为“指令（directives）”。 这些规则在 Sass 中具有不同的功效，详细解释如下。 也可参考 控制指令（control directives） 和 mixin 指令（mixin directives）。

@import

Sass 扩展了 CSS 的 @import 规则，让它能够引入 SCSS 和 Sass 文件。 所有引入的 SCSS 和 Sass 文件都会被合并并输出一个单一的 CSS 文件。 另外，被导入的文件中所定义的变量或 mixins 都可以在主文件中使用。

Sass 会在当前目录下寻找其他 Sass 文件， 如果是 Rack、Rails 或 Merb 环境中则是 Sass 文件目录。 也可以通过 :load_paths 选项 或者在命令行中使用 –load-path 选项来指定额外的搜索目录。

@import 根据文件名引入。 默认情况下，它会寻找 Sass 文件并直接引入， 但是，在少数几种情况下，它会被编译成 CSS 的 @import 规则：

• 如果文件的扩展名是 .css。
• I如果文件名以 http:// 开头。
• 如果文件名是 url()。
• 如果 @import 包含了任何媒体查询（media queries）。

如果上述情况都没有出现，并且扩展名是 .scss 或 .sass， 该名称的 Sass 或 SCSS 文件就会被引入。 如果没有扩展名， Sass 将试着找出具有 .scss 或 .sass 扩展名的同名文件并将其引入。

@extend 继承

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error; //继承error类的样式
  border-width: 3px;
}

@if

$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

@for

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

@each

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

@while

$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}

@mixin定义一个混淆

@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}

@mixin clearfix {
  display: inline-block;
  &:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }
  * html & { height: 1px }
}

@include调用一个混淆

.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}

@mixin silly-links {
  a {
    color: blue;
    background-color: red;
  }
}

@include silly-links;

Arguments带参数的混淆

@mixin sexy-border($color, $width) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}

p { @include sexy-border(blue, 1in); }

@mixin参数设置默认值

@mixin sexy-border($color, $width: 1in) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
p { @include sexy-border(blue); }
h1 { @include sexy-border(blue, 2in); }

@include参数带关键字

p { @include sexy-border($color: blue); }
h1 { @include sexy-border($color: blue, $width: 2in); }

@content

@mixin apply-to-ie6-only {
  * html {
    @content;
  }
}
@include apply-to-ie6-only {
  #logo {
    background-image: url(/logo.gif);
  }
}

编译为

* html #logo {
  background-image: url(/logo.gif);
}

Function

$grid-width: 40px;
$gutter-width: 10px;

@function grid-width($n) {
  @return $n * $grid-width + ($n - 1) * $gutter-width;
}

#sidebar { width: grid-width(5); }

编译为

#sidebar {
  width: 240px; }