SASS

---

• SASS – 简介
• SASS – 环境搭建
• SASS – 使用Sass程序
• SASS – 语法
• SASS – 变量
• SASS- 局部文件(Partial)
• SASS – 混合(Mixin)
• SASS – @extend（继承）指令
• SASS – 操作符
• SASS – 函数
• SASS – 输出格式

---

变量可以让整个网站保持一致性。你可以定义一个变量，然后在其他地方引用它，而不必再重复相同的值。要改这些值，只需在定义变量的那一个地方修改。

下面的Sass代码包含两个变量：$primary-color，$secondary-color

$primary-color: orange;
$secondary-color: gold;

body {
  color: $primary-color;
  background: $secondary-color;
}

变量就像存储值的容器。在本例中，我们将值orange、gold存储在变量中。

每次需要使用orange颜色时，可以使用变量名来代替orange颜色。如果需要改一个颜色，只需在定义变量的那一个地方修改。

变量定义

• 变量以美元符号($)开头，后面跟变量名。
• 变量名和赋值之间用冒号(:)分隔。

注意：缩进语法、SCSS语法中，变量定义都是一样的。

连字符和下划线

变量名中连字符和下划线等效，$primary_color 与 $primary-color是同一个变量。

下面的代码可以正常工作:

$primary_color: orange;
$secondary_color: gold;

body {
    color: $primary-color;
    background: $secondary-color;
}

局部变量

选择器中定义的变量是局部变量，作用范围是该选择器

示例：

header {
    $header-color: orange;
    color: $header-color;
}

不能在选择器外面使用局部变量，下面的做法是错误的:

header {
    $header-color: orange;
    color: $header-color;
}
article {
    color: $header-color;
}

如果编译该代码，会报错: error: Undefined variable: "$header-color"。

!global 标志定义全局变量

可以在选择器中使用 !global 标志定义全局变量。

示例：

header {
    $header-color: orange !global;
    color: $header-color;
}
article {
    color: $header-color;
}

$header-color使用了全局变量标志，被定义为全局变量，外部就可以使用该变量。这段代码会编译成以下CSS:

header {
    color: orange; }

article {
    color: orange; }

变量值

变量值除了前面举例的颜色外，可以是任何css值，如字体族、字体权重、边框宽度、背景图像等

多种值类型示例：

$primary-color: orange;
$secondary-color: gold;
$font-stack: 'Open Sans', Helvetica, Sans-Serif;
$border-thick: 10px;
$border-bright: orange;
$border-style: solid;
$article- 60%;
$article-padding: 20px;
$article-margin: auto;

body {
    color: $primary-color;
    background: $secondary-color;
    font-family: $font-stack;
}
article {
    border: $border-thick $border-style $border-bright;
     $article-width;
    padding: $article-padding;
    margin: $article-margin;
}

上面的代码编译输出的CSS:

body {
  color: orange;
  background: gold;
  font-family: "Open Sans", Helvetica, Sans-Serif; }

article {
  border: 10px solid orange;
   60%;
  padding: 20px;
  margin: auto; }

/*# sourceMappingURL=styles.css.map */

默认值

变量可以设置默认值。当变量没有赋值时会使用默认值。

默认值使用!default标志设置。

示例：

$primary-color: orange;
$primary-color: gold !default;

body {
  color: $primary-color;
}

编译输出的CSS如下:

body {
  color: orange; }

本例中没有使用默认值，因为该变量有赋值：$primary-color: orange;。

如果去掉赋值，就会使用默认值。如下所示：

$primary-color: gold !default;

body {
  color: $primary-color;
}

编译后的CSS如下所示:

body {
  color: gold; }

变量数据类型

SASS有七种主要数据类型:

• Numbers (e.g. 15, 3.5, 50px)
• Strings 可带可不带引号 (e.g. "foo", 'foo', foo)
• Colors (e.g. orange, #ffcc00, rgba(105, 255, 0, 0.7))
• Booleans (e.g. true, false)
• Nulls (e.g. null)
• Lists 空格或逗号分隔 (e.g. 2.5px 10px 0 7px, Helvetica, Arial, sans-serif)
• Maps (e.g. (key1: value1, key2: value2))