SCSS常用语法总结

柔光的暖阳◎ 2023-06-19 09:57 6阅读 0赞

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