SCSS 基础语法

Tip

参考：

Sass: Sass Basics
Sass基础教程 Sass快速入门 Sass中文手册 | Sass中文网

注释

在 Sass 中使用符号 // annotation 添加注释，而不需要像 CSS 中使用 /* annotation */ 麻烦地将注释包裹起来。

变量

sass 让人们受益的一个重要特性支持变量，通过变量存储常用的 CSS 属性值，如颜色、字体样式，然后通过变量名来引用它们，而无需重复书写且方便后续的维护。

使用符号 $ 声明变量，类似于 CSS 语法通过冒号来绑定值，如 $highlight-color: #F90;，支持绑定多个属性值并以空格分隔，如 $basic-border: 1px solid black;

Tip

与 CSS 属性不同，变量一般定义在规则集之外（当变量定义在 CSS 规则块内，或任何 {...} 形式的块中，那么该变量只能在此规则块内使用），而且常用单独的 variables.scss 文档保存，并通过导入文件的方式使用预设的变量。

只需要通过 $variable-name 即可引用变量，编译后在生成的 CSS 文档中变量会被替换为相应的值。

scss

$highlight-color: #F90;
.selected {
  border: 1px solid $highlight-color;
}

🔨 编译结果

css

.selected {
  border: 1px solid #F90;
}

Tip

变量可以复用，而需要修改样式时只对变量值进行修改，则所有引用该变量的元素样式值都会在编译后自动更新，十分便于维护

为变量命名一个合适的名称十分便于理解和使用

在声明变量时，变量值也可以引用其他变量

插值

使用 #{$varName} 形式将变量值插入到其他数据之中，以组合为新的数据，

scss

@mixin corner-icon($name) {
    .icon-#{$name} {
        background-image: url("/icons/#{$name}.svg")
    }
}
@include corner-icon("mail")

🔨 编译结果

css

.icon-mail {
  background-image: url("/icons/mail.svg");
}

嵌套 CSS 规则

由于 CSS 不允许嵌套规则集，而 HTML 元素却是嵌套式树结构的，因此针对页面一个区域进行样式设置时，往往需要同时为容器元素及其子元素编写特定样式，则需要分别使用不同的选择器一条条列出规则集。

SCSS 则支持像俄罗斯套娃那样在规则块中嵌套规则块为子元素设置样式，这种能力可避免重复书写选择器并提高了可读性（编译器则自动把这些嵌套规则分离，并填补父类选择器，构建为一条条 CSS 规则集）。

scss

#content {
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4em }
  }
  aside { background-color: #EEE }
}

🔨 编译结果

css

#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }

一般情况下 Sass 编译器在解开一个嵌套规则时就会把父选择器，如 #content，通过一个空格连接到子选择器的前边，如 article和 aside 形成 #content article 和 #content aside

Warning

虽然 Sass 支持规则集嵌套，但是应该避免滥用该特性，最多只应该使用二层嵌套，否则过多的深层嵌套会使代码难以维护。

父类选择器标识符

当嵌套的样式是为了结合伪类选择器为当前元素添（而非为嵌套的子元素）加特定状态的样式时，则需要使用 Sass 特有的父类选择器 &

scss

article a {
  color: blue;
  &:hover { color: red }
}

🔨 编译结果

css

#content aside {
    article a { color: blue }
    article a:hover { color: red }
}

组合选择器

在设置嵌套样式时，默认使用后代选择器，当也支持使用组合选择器匹配其他层级的对象：

使用符号 > 创建子类选择器：匹配一个直接子元素
使用符号 + 或 ~ 创建同级选择器：匹配下一个相邻的同级元素或以下所有同级元素

scss

article {
  ~ article { border-top: 1px dashed #ccc }
  > section { background: #eee }
  dl > {
    dt { color: #333 }
    dd { color: #555 }
  }
  nav + & { margin-top: 0 }
}

🔨 编译结果

css

article ~ article { border-top: 1px dashed #ccc }
article > footer { background: #eee }
article dl > dt { color: #333 }
article dl > dd { color: #555 }
nav + article { margin-top: 0 }

Mixin 混合器

除了使用变量来复用一个数据值，Sass 支持复用样式集合，使用 @mixin 标识符并定义自定义 snippets 代码片段，也称为混合器，并在其后添加一个名称，代码片段则包含在 {} 内。

可以在你的样式表中通过关键字 @include 并结合相应的名称来引用这个混合器。

Tip

Mixin 看上去很像其他的 CSS @ 标识符，如 @media 或者 @font-face，也是定义有特殊功能的一个代码片段

Mixin 中可以不编写任何代码，🎦 通过 @content 标识符进行占位，在使用时再进行样式设置（视频示例中结合媒体查询使用）

一般将 Mixin 代码片段单独存储在一个 mixin.scss 文档中，并通过导入的方式引用到其他样式表中

Warning

大量的重用可能会导致生成的样式表过大，导致加载缓慢。应该合理地构造成优良的混合器，一条经验法则就是能否为这个混合器想出一个好的名字，而且使用语义化的名称亦可以避免重复使用混合器。

给混合器传参

混合器并不一定总得生成相同的样式。可以在定义 @mixin name($parameter) 添加形参，并在调用时 @include name(argument) 传递实参以实现更精确的样式，这个功能和 JS 的函数类似。

scss

// 定义混合器
@mixin link-colors($normal, $hover, $visited) {
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}
// 调用
a {
  @include link-colors(blue, red, green);
}

🔨 编译结果

css

a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }

类似于 CSS 的 @import 规则，SCSS 也允许使用 @import 规则将其他样式表或 .scss 文档引入当当前文档中，但不同的是 CSS 文件中导入的其他 CSS 文件只有执行到 @import 时浏览器才会去下载导入相应的文件，这导致页面加载起来特别慢；而 SCSS 在编译生成 .css 文件时就把相关文件导入，即所有相关的样式代码被归纳复制到了同一个 .css 文件中，而无需发起额外的下载请求。

scss

// 导入名为 mixins 后缀为 .scss 文档里的代码到当前文件中
@import "mixins"

Tip

使用 @import "file-name" 规则导入文件时并不需要指明后缀，编译器会自动寻找匹配后缀合适的文档

数值运算

SCSS 支持数值运输，如 +、-、*、/ 等，一般放置在括号中其运算结果就作为属性值。

scss

.icon {
    width: (100% / 3);
}

内建模块

SCSS 提供了许多内置模块，包含一些预设的功能（类似于函数一样）或 mixin，以供开发者直接调用。

常用的颜色函数：

lighten($color, $amount) 基于参数 $amount（范围从 0% - 100%）和颜色 $color 计算出一个更浅的颜色
complement($color) 计算出颜色 $color 的互补色