SASS | 风格规则

1. 简介

SASS（Syntactically Awesome Style Sheets）是一款CSS预处理器，它允许开发人员使用一些CSS语法不具备的特性，比如变量、嵌套、混合、继承等。它简化了CSS样式表的编写，提高了开发效率，并且提供了更加灵活和可维护的样式表。

2. 语法规则

2.1 变量命名

变量名应该使用小写字母，使用中划线作为单词分隔符。

// 变量名
$primary-color: #0066cc;
$secondary-color: #ccc;

2.2 代码缩进

SASS允许使用缩进来表示嵌套，代码缩进应该使用2个空格。

// 缩进
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;

    li {
      display: inline-block;
      margin: 0 10px;

      a {
        color: #333;
        text-decoration: none;
      }
    }
  }
}

2.3 注释

注释应该清晰明了，使用行注释。

// 注释
// Primary button style
.btn-primary {
  background-color: $primary-color;
  color: #fff;
  border: none;
}

2.4 混合

混合（Mixin）是SASS中的一种代码复用机制，可以将一些常用的样式合并成一个可重用的样式块。

// 混合
@mixin center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.modal {
  @include center;
  width: 500px;
  height: 300px;
  background-color: #fff;
}

2.5 继承

继承（Extend）是SASS中的另一种代码复用机制，可以将一个选择器的所有样式复制到另一个选择器。

// 继承
.error {
  color: red;
  font-weight: bold;
}

.alert {
  @extend .error;
  background-color: yellow;
}

3. 总结

SASS是一款强大的CSS预处理器，提供了许多CSS不具备的特性和附加功能。在编写SASS样式表时，应该注意命名规范、代码缩进、注释、混合和继承等方面的规则，以提高代码的可读性和可维护性。