关于Sass的这些知识，一看就懂一学就会

1. 什么是Sass

Sass简介

Sass（Syntactically Awesome Stylesheets）是一种扩展CSS的预处理语言。它增加了许多有用的功能，使得CSS的编写更加灵活和高效。

安装Sass

要使用Sass，需要先安装它。可以通过以下命令安装Sass：

npm install -g sass

安装完成后，可以通过命令行编译Sass文件：

sass input.scss output.css

Sass与SCSS的区别

Sass有两种语法：一种是Sass（缩进语法），另一种是SCSS（类似CSS的语法）。大多数开发者更喜欢使用SCSS，因为它与CSS的语法更加相似。

Sass语法示例：

$primary-color: #333

body
  color: $primary-color

SCSS语法示例：

$primary-color: #333;

body {
  color: $primary-color;
}

2. Sass基础语法

变量

变量允许你存储信息以便在整个样式表中复用。

示例：

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

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

嵌套

Sass允许将选择器嵌套，这样更符合HTML的结构。

示例：

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

  li { display: inline-block; }

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

导入

Sass允许将CSS拆分成多个文件，然后通过@import将它们组合在一起。

示例：

// _reset.scss
html, body, ul, ol {
  margin: 0;
  padding: 0;
}

// _base.scss
body {
  font-family: Helvetica, sa