SCSS常用语法总结

Scss 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。

1. 使用变量

因为 css 里不能使用变量，造成很大不便。所以 scss 里引入了变量。

任何可以用作 css 属性值的赋值都可以用作 scss 的变量值，甚至是以空格分割的多个属性值。

$width: 100px; // 定义$width变量
nav {
  width: $width; // 引用$width变量
  color: $nav-color;
}

2. 嵌套 CSS 规则

css 中重复写选择器是非常麻烦的。比如下面这样：

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

像这种情况，scss 可以只写一遍，且使样式可读性更高。

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

2-1. 父选择器的标识符&

当你想为 article 元素内 a 标签写 :hover 这种伪类时，css 的写法是：

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

而 scss 可以通过&符号实现上面功能，更方便也更容易理解

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

常用父选择器用法：

&:hover

&:active

&:disabled

&:focus

&::placeholder

&::after

2-2. 群组选择器的嵌套

你需要在一个特定的容器元素内对一个群组选择器进行修饰时。css 的写法是让你在群组选择器中的每一个选择器前都重复一遍容器元素的选择器。

.container h1, .container h2, .container h3 { margin-bottom: .8em }

而用 scss 写是这样的

.container {
  h1, h2, h3 {margin-bottom: .8em}
}

有利必有弊，你需要特别注意群组选择器的规则嵌套生成的 css。虽然 scss 让你的样式表看上去很小，但实际生成的 css 却可能非常大，这会降低网站的速度。

2-3. 子组合选择器和同层组合选择器：>、+和~

上边这三个组合选择器必须和其他选择器配合使用，以指定浏览器仅选择某种特定上下文中的元素。

用子组合选择器 > 选择一个元素的直接子元素。选择器会选择 article 下紧跟着的 section 子元素。

article > section { border: 1px solid #ccc }

用同层相邻组合选择器 + 选择 header 元素后紧跟的 p 元素

header + p { font-size: 1.1em }

你也可以用同层全体组合选择器~，选择所有跟在 article 后的同层 article 元素，不管它们之间隔了多少其他元素

article ~ article { border-top: 1px dashed #ccc }

3. 注释 /* */ 与 //

Scss 支持标准的 CSS 多行注释 /* */，以及单行注释 //

4. 混合器

scss 的混合器可以实现大段样式的重用。混合器使用@mixin 标识符定义，然后通过@include 来使用这个混合器。
为便于书写，@mixin 可以用 = 表示，而 @include 可以用 + 表示

@mixin div-back{
    background: red;
}
.item {
    @include div-back;
}

4-1. 给混合器传参

混合器可以做为方法一样可以传参

@mixin div-back($color) {
    background: $color;
}
.item {
    @include div-back(red);
}

当你用混合器传参时，有时候会很难区分每个参数是什么意思，参数之间是一个什么样的顺序。为了解决这个问题，scss 允许通过语法$name: value 的形式指定每个参数的值

@mixin div-back($color,$size) {
    background: $color;
    font-size: $size;
}
.item {
    @include div-back(
        $color: green,
        $size: 30px
    );
}

为了在@include 混合器时不必传入所有的参数，我们可以给参数指定一个默认值。

@mixin div-back($color,$size: 20px) {
    background: $color;
    font-size: $size;
}
.item {
    @include div-back(
        $color: green
    );
}

5. 继承

使用 scss 的时候，最后一个减少重复的主要特性就是选择器继承。选择器继承是说一个选择器可以继承为另一个选择器定义的所有样式。这个通过@extend 语法实现。

.div {
    font-size: 40px;
}
.item {
    @extend .div;
    background: red;
}

6. 占位符选择器 %

有时，需要定义一套样式并不是给某个元素用，而是只通过 @extend 指令使用。当占位符选择器单独使用时（未通过 @extend 调用），不会编译到 CSS 文件中。

#context a%extreme {
  color: blue;
  font-weight: bold;
  font-size: 2em;
}
.notice {
  @extend %extreme;
}

编译为

#context a.notice {
  color: blue;
  font-weight: bold;
  font-size: 2em;
}

原理可以理解为用@extend 的.notice 去替换占位符选择器%extreme 的位置。

7. ScssScript

ScssScript 支持 6 种主要的数据类型：

• 数字：1, 2, 13, 10px
• 字符串：有引号字符串与无引号字符串，”foo”, ‘bar’, baz
• 颜色：blue, #04a3f9, rgba(255,0,0,0.5)
• 布尔型：true, false
• 空值：null
• 数组 (list)：用空格或逗号作分隔符，1.5em 1em 0 2em, Helvetica, Arial, sans-serif
• maps：相当于 JavaScript 的 object，(key1: value1, key2: value2)

@mixin firefox-message($selector) {
  body.firefox #{$selector}:before {
    content: "Hi, Firefox users!";
  }
}
@include firefox-message(".header");

编译为

body.firefox .header:before {
  content: "Hi, Firefox users!";
}

所有数据类型均支持相等运算 == 或 !=，此外，每种数据类型也有其各自支持的运算方式。

7-1. 颜色值运算

颜色值的运算是分段计算进行的，也就是分别计算红色，绿色，以及蓝色的值：

p {
  color: #010203 + #040506;
}

计算 01 + 04 = 05 02 + 05 = 07 03 + 06 = 09，然后编译为

p {
  color: #050709;
}

• 可用于连接字符串

.item {
    background: re + d;
}

在有引号的文本字符串中使用 #{} 插值语句可以添加动态的值：

p:before {
  content: "I ate #{5 + 10} pies!";
}

7-2. 变量定义 !default

可以在变量的结尾添加 !default 给一个未通过 !default 声明赋值的变量赋值，此时，如果变量已经被赋值，不会再被重新赋值，但是如果变量还没有被赋值，则会被赋予新的值。

7-3. @if、@for、@each、@while

scss 也可以写 if else 等。

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

编译为

p {
  color: green;
}

8. 函数指令

Sass 支持自定义函数，并能在任何属性值或 Sass script 中使用：

$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;
}