Sass语法备忘单

Sass是一种CSS预处理器，它扩展了CSS语法并添加了许多其他的功能，例如变量、嵌套、混合等等。使用Sass可以使得编写CSS更为轻松和高效。以下是一些基本的Sass语法备忘单。

变量

Sass中变量以$符号开头，并用冒号(:)进行分隔。

$primary-color: #4078c0;
$secondary-color: #ccc;

嵌套

Sass可以使用嵌套样式来帮助我们组织CSS代码，使其更易读。

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

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

混合

混合是一种代码重用的方式，可以达到代码减少的目的。

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}

.box {
  @include border-radius(10px);
}

继承

继承是一种使样式继承其他样式的方法。

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

.primary-button {
  @extend .button;
  background-color: #4078c0;
  color: #fff;
}

运算

Sass支持使用运算符在代码中进行运算。

.container {
  width: 100%;
  margin: 0 auto;
  max-width: 960px;
}

article {
  float: left;
  width: 600px / 960px * 100%;
}

aside {
  float: right;
  width: 300px / 960px * 100%;
}

以上是Sass基本语法的一些要点。使用Sass可以使得CSS编写更为高效，并且可以更加易于维护和扩展。