Sass-概述

Sass（全称Syntactically Awesome Style Sheets）是一种CSS预处理器，它能够扩展CSS并提供了许多有用的功能，例如变量、嵌套、Mixin、函数等。通过使用Sass，可以更加高效地编写CSS代码，减少CSS代码的冗余，提高代码可维护性。

特性

Sass具有以下特性：

变量

使用$符号定义一个变量，可以在CSS中重复使用。

$primary-color: #333;

body {
  color: $primary-color;
}

h1 {
  color: $primary-color;
}

编译后的CSS代码：

body {
  color: #333;
}

h1 {
  color: #333;
}

嵌套

可以在父选择器的上下文中编写CSS，避免了CSS中的冗余、重复代码。

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

    li {
      display: inline-block;
    }
  }
}

编译后的CSS代码：

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

nav ul li {
  display: inline-block;
}

Mixin

Mixin可以将一组CSS规则封装为一个单位，减少代码量，并且可以在多个选择器中重复使用。

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

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

编译后的CSS代码：

.box {
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}

函数

函数可以接受参数，返回一个值，可以用于计算样式值、生成颜色等。

@function double($n) {
  @return $n * 2;
}

.box {
  width: double(50px);
}

编译后的CSS代码：

.box {
  width: 100px;
}

继承

继承可以避免代码的重复，通过继承一个选择器的样式来实现代码共享。

.button {
  border: none;
  font-size: 14px;
  padding: 10px 20px;
}

.success {
  @extend .button;
  background-color: green;
}

.warning {
  @extend .button;
  background-color: yellow;
}

编译后的CSS代码：

.button, .success, .warning {
  border: none;
  font-size: 14px;
  padding: 10px 20px;
}

.success {
  background-color: green;
}

.warning {
  background-color: yellow;
}

总结

Sass是一种非常实用的CSS预处理器，它提供了许多有用的功能，可以提高CSS代码的编写效率和可维护性，适合工程化项目的开发。