Sass预处理器相关知识笔记

什么是Sass

**Sass（Syntactically Awesome Stylesheets）**是一种CSS预处理器，它扩展了CSS的功能，使其更加强大和灵活。Sass允许开发者使用变量、嵌套规则、混合（mixins）、继承等特性，从而更高效地编写和管理样式代码。

Sass的主要特性

这个预处理器主要具有下面六个特性。

变量：允许你定义可重用的值，如颜色、字体尺寸等。

复制代码

$primary-color: #333;
body {
  color: $primary-color;
}

嵌套：允许你嵌套CSS规则，反映HTML结构。

复制代码

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li { display: inline-block; }
  a {
    text-decoration: none;
    &:hover {
      text-decoration: underline;
    }
  }
}

部分文件和导入：允许你将CSS拆分成多个文件，并在主文件中导入它们。

复制代码

// _reset.scss
* {
  margin: 0;
  padding: 0;
}

// styles.scss
@import 'reset';
body {
  font-family: Arial, sans-serif;
}

混合（Mixins）：允许你定义可重用的CSS代码块。

复制代码

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

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

继承：允许你共享一组CSS属性。

复制代码

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

.success { @extend .message; border-color: green; }
.error { @extend .message; border-color: red; }
.warning { @extend .message; border-color: yellow; }

运算：允许你在CSS中进行算术运算。

复制代码

.container {
  width: 100% - 30px;
  height: 100px / 2;
}

Sass语法

Sass提供了两种语法：

SCSS（Sassy CSS）：这种语法完全兼容CSS3，并扩展了CSS语法。文件扩展名为.scss。

复制代码

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

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

Sass（缩进语法）：这种语法使用缩进而不是大括号和分号。文件扩展名为.sass。

复制代码

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

body
  font: 100% $font-stack
  color: $primary-color

如何开始使用Sass

要使用Sass，你需要安装Sass编译器。可以通过以下方式安装：

通过npm：

复制代码

npm install -g sass

通过RubyGems：

复制代码

gem install sass

安装完成后，你可以使用以下命令将Sass文件编译为CSS文件：

复制代码

sass input.scss output.css

或者你可以使用--watch选项自动编译文件：

复制代码

sass --watch input.scss:output.css

Sass是一个强大的CSS预处理器，通过引入变量、嵌套、混合、继承和运算等特性，使得编写和维护CSS变得更加高效和灵活。如果你经常编写大量的CSS代码，Sass无疑是一个非常有用的工具。