SASS - 简介

Sass 是一种 CSS 预处理器，它使用简洁的语法扩展了 CSS 并引入了许多有用的功能。Sass 提供了变量、嵌套、混合、继承、函数等特性，使得编写 CSS 变得更简洁、更易维护。

安装 Sass

1. 通过 NPM 安装

你可以通过 NPM 安装 Sass：

npm install -g sass

2. 通过 Homebrew 安装

你也可以使用 Homebrew 在 Mac 系统上安装 Sass：

brew install sass/sass/sass

使用 Sass

1. 编译 Sass

你可以使用 Sass 编译器将 Sass 文件编译成 CSS 文件。Sass 支持将 .sass 和 .scss 文件编译成 CSS 文件。

例如，将 styles.scss 编译成 styles.css：

sass styles.scss styles.css

2. 启动 Sass 监听器

你可以使用 Sass 监听器自动编译 Sass 文件。当你保存 Sass 文件时，Sass 监听器会自动编译 Sass 文件，并将其保存为 CSS 文件。

例如，启动一个 Sass 监听器以编译 styles.scss 到 styles.css：

sass --watch styles.scss:styles.css

Sass 特性

1. 变量

Sass 允许你定义变量，以便在整个样式表中重复使用。

例如，定义并使用一个变量：

$primary-color: #333;

body {
  background-color: $primary-color;
}

2. 嵌套

Sass 允许你嵌套 CSS 规则，以便更好地组织样式表。

例如，使用 Sass 的嵌套规则：

.navigation {
  ul {
    list-style: none;
  }

  li {
    display: inline-block;
  }

  a {
    color: #333;
  }
}

3. 混合

Sass 允许你定义混合（mixins），以便在不同的规则中重用代码。

例如，定义一个带有带前缀的 CSS 属性的混合：

@mixin prefix($property, $value) {
  -webkit-#{$property}: $value;
  -moz-#{$property}: $value;
  -ms-#{$property}: $value;
  -o-#{$property}: $value;
  #{$property}: $value;
}

.box {
  @include prefix(border-radius, 5px);
}

4. 继承

Sass 允许你使用继承，以便将一个规则的属性和样式应用于另一个规则。

例如，使用 Sass 的继承规则：

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

.success {
  @extend .panel;
  background-color: #dff0d8;
  border-color: #d6e9c6;
}

.warning {
  @extend .panel;
  background-color: #fcf8e3;
  border-color: #faebcc;
}

5. 函数

Sass 允许你定义函数，以便在样式表中执行计算和其他操作。

例如，定义一个将像素转换为 EM 单位的函数：

@function em($pixels, $context: 16) {
  @return ($pixels / $context) * 1em;
}

h1 {
  font-size: em(24);
}

总结

Sass 是一个很棒的 CSS 预处理器，它提供了许多有用的功能，可以帮助你更简洁、更易维护地编写 CSS。通过变量、嵌套、混合、继承、函数等特性，你可以在样式表中实现更复杂的功能。