保持sass条理性和可读性的最基本的三个方法：嵌套、导入和注释。

一般情况下，你反复声明一个变量，只有最后一处声明有效且它会覆盖前边的值。

$link-color: blue;

$link-color: red;

a {

color: $link-color;

}

最终编译成为红色

---------------------------------

& 在编译时将被替换为父选择符,如果你有一个深层嵌套的规则，父选择符也会在 & 被替换之前被完整的解析。

#main {

  color: black;

  a {

    font-weight: bold;

    &:hover { color: red; }

  }

}

---------------------------------

被编译为：

#main {

  color: black; }

  #main a {

    font-weight: bold; }

    #main a:hover {

      color: red; }

---------------------------------

声明:$width: 5em;

#main {

  width: $width;

}

---------------------------------

数据类型

SassScript 支持六种主要的数据类型：

数字（例如 1.2、4、6px）

文本字符串，无论是否有引号（例如 "bob"、'wow'、seo）

颜色（例如 blue、#000、rgba(0, 0, 0, 0.8)）

布尔值（例如 true、false）

空值（例如 null）

值列表，用空格或逗号分隔（例如 1em 2em 3rem 4em、Helvetica, Arial, sans-serif）

SassScript 还支持所有其他 CSS 属性值类型， 例如 Unicode 范围和 !important 声明。 然而，它不会对这些类型做特殊处理。 它们只会被当做不带引号的字符串看待。

---------------------------------

CSS 提供了两种类型的字符串：带引号的字符串，不带引号的字符串，使用#{}插值时，引用的字符串不加引号。这使得在mixin中使用例如选择器名称更容易

@mixin firefox-message($selector) {

  body.firefox #{$selector}:before {

    content: "Hi, Firefox users!";

  }

}

@include firefox-message(".header");

---------------------------------

被编译为：

body.firefox .header:before {

  content: "Hi, Firefox users!"; }

---------------------------------

继承:

.class1 {

　　border: 1px solid #ddd;

}

.class2 {

　　　　@extend .class1;

　　　　font-size:120%;

　　}

---------------------------------

Mixin有点像C语言的宏（macro），是可以重用的代码块

使用@include命令，调用这个mixin。

mixin的强大之处，在于可以指定参数和缺省值。

@mixin left {

　　　　float: left;

　　　　margin-left: 10px;

　　}

div {

　　　　@include left;

　　}

@mixin left($value: 10px) {

　　　　float: left;

　　　　margin-right: $value;

　　}

---------------------------------

默认变量值;

不同的是!default用于变量，含义是：如果这个变量被声明赋值了，那就用它声明的值，否则就用这个默认值。

$textbox-width: 400px !default;

.textbox {

　　width: $textbox-width;

}