sass详解

Sass（Syntactically Awesome Style Sheets），是一种CSS预处理器，是对CSS的扩展，提供了更多的功能和选择，以简化样式表的编写过程。

以下是Sass的一些特性和用法：

1. 变量：Sass允许在样式表中使用变量，以便在多个地方重复使用，从而简化样式的修改和维护。

$primary-color: #ff0000;
$font-size: 14px;

h1 {
  color: $primary-color;
  font-size: $font-size;
}

2. 嵌套：Sass允许将选择器嵌套在其他选择器中，以提高样式的可读性和简洁性。

.container {
  width: 100%;

  .title {
    font-size: 24px;
  }
}

3. 混合器：Sass允许创建可重用的样式块，称为混合器（mixins），以减少重复代码的编写。

@mixin button($bg-color, $text-color) {
  background-color: $bg-color;
  color: $text-color;
  padding: 10px;
}

.button-primary {
  @include button(#ff0000, #ffffff);
}

.button-secondary {
  @include button(#000000, #ffffff);
}

4. 继承：Sass允许选择器继承其他选择器的样式，以减少重复的样式定义。

.button {
  padding: 10px;
  border: 1px solid #ccc;
}

.button-primary {
  @extend .button;
  background-color: #ff0000;
  color: #ffffff;
}

.button-secondary {
  @extend .button;
  background-color: #000000;
  color: #ffffff;
}

5. 条件语句：Sass允许使用条件语句来根据条件设置样式。

$use-bold: true;

.button {
  font-size: if($use-bold, bold, normal);
}

6. 循环：Sass允许使用循环来生成重复的样式。

@for $i from 1 through 3 {
  .item-#{$i} {
    width: 100px * $i;
  }
}

除了以上的功能，Sass还提供了许多其他的功能，如操作符、函数、导入等，可以大大提高样式表的可维护性和灵活性。