Sass预处理器基础教程

Sass是一种CSS预处理器，它使得CSS的编写变得更加简单，高效，且具有可读性。它使用类似CSS的语法，但增加了更多的特性，如变量，继承，嵌套，函数等。它可以将CSS转换为更易于管理和维护的格式，从而提高开发效率。

Sass的安装非常简单，只需要安装Ruby和Sass gem，在命令行中运行“gem install sass”即可。

Sass文件有两种格式：SCSS和Sass。SCSS是一种CSS的子集，它使用像CSS一样的语法，但是增加了更多的特性，如变量，继承，嵌套，函数等。Sass是一种更简洁的语法，它不使用大括号和分号，而是使用缩进来表示层次结构。

Sass文件可以使用sass命令行工具进行编译，例如：

sass style.scss style.css

上面的命令会将style.scss文件编译为style.css文件。也可以使用“--watch”选项来监视文件的变化，当文件发生变化时，它会自动编译文件：

sass --watch style.scss:style.css

Sass支持很多有用的特性，如变量，继承，嵌套，混合，函数等。变量可以用于存储值，例如：

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

继承可以让你在一个选择器中使用另一个选择器的属性，例如：

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;
}

嵌套可以让你在一个选择器中嵌套另一个选择器，例如：

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

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

混合可以让你定义一个可以多次使用的代码块，例如：

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

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

函数可以让你定义一个可以多次使用的表达式，例如：

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

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

Sass是一种强大的CSS预处理器，它可以让你更快更容易地编写CSS代码，从而提高开发效率。