一篇文章让你完全掌握Sass，不只是学会而已哦！！！

蔚落 2022-12-23 14:24 178阅读 0赞

### 使用sass变量存储数据 ###

Sass与CSS的不同之处之一是它使用变量。与JavaScript相似，它们被声明并设置为存储数据。

在JavaScript中，使用`let`和`const`关键字定义变量。在Sass中，变量以开头，`$`后跟变量名称。

这是几个例子：

$main-fonts: Arial, sans-serif;
    $headings-color: green;
    
    //To use variables:
    h1 {
      font-family: $main-fonts;
      color: $headings-color;
    }

变量有用的一个例子是，当多个元素需要使用相同的颜色时。如果该颜色发生更改，唯一的代码编辑位置就是变量值。

### **使用Sass嵌套CSS** ###

Sass允许嵌套CSS规则，这是组织样式表的一种有用方法。

通常，每个元素都指向不同的行以对其进行样式设置，如下所示：

nav {
      background-color: red;
    }
    
    nav ul {
      list-style: none;
    }
    
    nav ul li {
      display: inline-block;
    }

对于大型项目，CSS文件将具有许多行和规则。在这里，嵌套可以通过将子样式规则放置在各自的父元素中来帮助组织代码：

nav {
      background-color: red;
    
      ul {
        list-style: none;
    
        li {
          display: inline-block;
        }
      }
    }

### **使用Mixins创建可重用的CSS** ###

在Sass中，mixin是一组CSS声明，可以在整个样式表中重复使用。

较新的CSS功能需要一段时间才能被完全采用并准备在所有浏览器中使用。将功能添加到浏览器后，使用这些功能的CSS规则可能需要供应商前缀。考虑“盒子阴影”：

div {
      -webkit-box-shadow: 0px 0px 4px #fff;
      -moz-box-shadow: 0px 0px 4px #fff;
      -ms-box-shadow: 0px 0px 4px #fff;
      box-shadow: 0px 0px 4px #fff;
    }

要为所有具有的元素重新编写此规则`box-shadow`，或者更改每个值以测试不同的效果，需要进行大量键入。Mixins就像CSS的功能。这是如何写一个：

@mixin box-shadow($x, $y, $blur, $c){ 
      -webkit-box-shadow: $x $y $blur $c;
      -moz-box-shadow: $x $y $blur $c;
      -ms-box-shadow: $x $y $blur $c;
      box-shadow: $x $y $blur $c;
    }

定义以`@mixin`自定义名称开头。的参数（`$x`，`$y`，`$blur`，和`$c`在上面的例子）是可选的。现在`box-shadow`，只要需要一条规则，仅需一行调用mixin即可替换，而不必键入所有供应商前缀。用`@include`指令调用mixin ：

div {
      @include box-shadow(0px, 0px, 4px, #fff);
    }

### **使用@if和@else为样式添加逻辑** ###

`@if`Sass中的指令对于测试特定情况非常有用-就像`if`JavaScript中的语句一样工作。

@mixin make-bold($bool) {
      @if $bool == true {
        font-weight: bold;
      }
    }

就像在JavaScript中一样，`@else if`并`@else`测试更多条件：

@mixin text-effect($val) {
      @if $val == danger {
        color: red;
      }
      @else if $val == alert {
        color: yellow;
      }
      @else if $val == success {
        color: green;
      }
      @else {
        color: black;
      }
    }

### **使用@for创建Sass循环** ###

该`@for`指令在循环中添加样式，与`for`JavaScript中的循环非常相似。

`@for`有两种用法：“从头开始”或“从头到尾”。主要区别在于“开始**到**结束”*不包括*结束号作为计数的一部分，而“开始**至**结束”*包括*结束号作为计数的一部分。

这里是一个开始**通过**结束例如：

@for $i from 1 through 12 {
      .col-#{$i} { width: 100%/12 * $i; }
    }

该`#{$i}`部分是将变量（`i`）与文本组合成字符串的语法。当Sass文件转换为CSS时，如下所示

.col-1 {
      width: 8.33333%;
    }
    
    .col-2 {
      width: 16.66667%;
    }
    
    ...
    
    .col-12 {
      width: 100%;
    }

这是创建网格布局的有力方法。现在，您有十二个用于CSS类别的列宽选项。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Nlc3RpZA_size_16_color_FFFFFF_t_70][]

### **使用@each映射列表中的项目** ###

最后一个挑战显示了`@for`指令如何使用起始值和结束值循环一定次数。Sass还提供了`@each`遍历列表或映射中每个项目的指令。在每次迭代中，变量将从列表或映射中分配给当前值。

@each $color in blue, red, green {
      .#{$color}-text {color: $color;}
    }

映射的语法略有不同。这是一个例子：

$colors: (color1: blue, color2: red, color3: green);
    
    @each $key, $color in $colors {
      .#{$color}-text {color: $color;}
    }

请注意，`$key`需要变量来引用映射中的键。否则，编译后的CSS将有`color1`，`color2`...在里面。上面的两个代码示例都转换为以下CSS：

.blue-text {
      color: blue;
    }
    
    .red-text {
      color: red;
    }
    
    .green-text {
      color: green;
    }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Nlc3RpZA_size_16_color_FFFFFF_t_70 1][]

### **应用样式，直到使用@while满足条件为止** ###

该`@while`指令是具有与JavaScript`while`循环类似功能的选项。它创建CSS规则，直到满足条件为止。

该`@for`挑战举了一个例子来创建一个简单的网格系统。也可以使用`@while`。

$x: 1;
    @while $x < 13 {
      .col-#{$x} { width: 100%/12 * $x;}
      $x: $x + 1;
    }

首先，定义一个变量`$x`并将其设置为1。接着，使用该`@while`指令来创建网格系统*而* `$x`小于13设置CSS规则后`width`，`$x`加1，以避免无限循环。

### ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Nlc3RpZA_size_16_color_FFFFFF_t_70 2][] ###

### **将一组CSS样式扩展到另一个元素** ###

Sass具有一项称为的功能`extend`，可以轻松地从一个元素借用CSS规则，然后在另一个元素上构建CSS规则。

例如，以下CSS规则块为一个`.panel`类设置样式。它有一个`background-color`，`height`和`border`

.panel{
      background-color: red;
      height: 70px;
      border: 2px solid green;
    }

现在，您需要另一个名为的面板`.big-panel`。它具有与相同的基本属性`.panel`，但还需要`width`和`font-size`。可以从复制和粘贴初始CSS规则`.panel`，但是随着添加更多类型的面板，代码将变得重复。该`extend`指令是重用为一个元素编写的规则，然后为另一个元素添加更多规则的简单方法：

.big-panel{
      @extend .panel;
      width: 150px;
      font-size: 2em;
    }

在`.big-panel`将具有相同的属性`.panel`，除了新的风格

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Nlc3RpZA_size_16_color_FFFFFF_t_70 3][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Nlc3RpZA_size_16_color_FFFFFF_t_70]: /images/20221120/0fb94a77e561443d96d9bbbf2ccb01f6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Nlc3RpZA_size_16_color_FFFFFF_t_70 1]: /images/20221120/1e1f216d893243fd8bca699834f85b17.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Nlc3RpZA_size_16_color_FFFFFF_t_70 2]: /images/20221120/38ab2463f8fc475aa01b4563f34d8fb2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Nlc3RpZA_size_16_color_FFFFFF_t_70 3]: /images/20221120/8068cb056f944d46a0422998284543db.png