SCSS（Sass）入门

SCSS 是什么

SCSS 是 CSS 的扩展， 在保证兼容性的基础上， 允许使用变量、 嵌套、 混合、 导入等特性， 在编写大量的 CSS 文件时很有帮助。

SCSS 的历史

Sass（英文全称：Syntactically Awesome Stylesheets）是一个最初由Hampton Catlin设计并由Natalie Weizenbaum开发的类 CSS 语言。

发行时间：2007年
稳定版本：2016年3月28日

Sass 十分简洁，语法中几乎不含括号。后来前端工程师表示不含括号看不懂，于是 Sass 的开发者又提供了 SCSS，含括号。弱弱的前端工程师终于表示能看懂了。

Sass 的官方解释器是开源的并且用 Ruby 语言写成，但是也有用 PHP、C语言、Java 等实现的版本（C语言版本叫做llibSass，Java 语言版本叫做 JSass）。

SassScript 提供以下功能：变量、嵌套、混入（Mixin）、选择器继承等。

使用

在目录中新建 .scss 文件，并写入样式。
浏览器无法直接解析 .scss 文件，我们需要将其转变为 .css 文件。使用 Parcel 打包工具：

cd demo
npm init -y
npm i -D parcel
npx parcel index.html

最简单的几个语法

1. 嵌套选择器

.nav {
  border: 1px solid grey;
  > ul {
    background: white;
    > li {
      border: 1px solid red;
    }
  }
}

输出的 CSS 代码为：

.nav {
  border: 1px solid grey;
}
.nav > ul {
  background: white;
}
.nav > ul > li {
  border: 1px solid red;
}

2. 变量
   SCSS 使用 $ 符号来定义变量， 支持的变量类型有 数字（可带单位） 、 字符串 、颜色 以及 布尔值 等， 示例如下：

$grey: #333;
$gray: $grey;
.nav {
  border: 1px solid $gray;
}

输出的 CSS 代码为：

.nav {
  border: 1px solid #333;
}

3. mixin

@mixin border($border-color: red) {
  border: 1px solid $border-color;
}
.nav {
  @include border;
  > ul {
    background: white;
    > li {
      @include border(green);
    }
  }
}

输出的 CSS 代码为：

.nav {
  border: 1px solid red;
}
.nav > ul {
  background: white;
}
.nav > ul > li {
  border: 1px solid green;
}

4. placeholder

%box {
  box-shadow: 0 0 3px black;
  margin: 10px;
  background: white;
  border-radius: 4px;
}
.nav {
  > ul {
    background: grey;
    > li {
      @extend %box;
    }
  }
}
.demo {
  height: 100px;
  @extend %box;
}

输出的 CSS 代码为：

.nav > ul {
  background: grey;
}
.nav > ul > li, .demo {
  box-shadow: 0 0 3px black;
  margin: 10px;
  background: white;
  border-radius: 4px;
}
.demo {
  height: 100px;
}