前言

CSS 代码多了就不好管理了, 这是它语法先天的不足.

Sass 就是加强它语法的, Sass 为 CSS 引入了一些 JS 语言的特性, 比如 variable, function, parameter, extend, import.

Sass 的 variable 和 import (用于管理), 和 CSS 的 variable, import 不是一回事儿. 分开看待会更好理解.

它的原理很简单, 就是解析 Sass 语法, 然后编辑去 CSS. 和 TS > JS 一样的道理.

 

How to Compile?

搭配 Webpack 的话, 看这篇 : Webpack 学习笔记

这里使用的方式是 VS Code Extension.

安装插件

点击 Watch Sass 开启 watching mode.

这时, scss 文件就会被 compile 生成 css 文件了 (.map 是 debug 用的)

 

Variable

CSS 的 variable 和 Sass 的 variable 不是一个概念. 不要把它们放一起看待.

Sass 的 variable 是用来存变量的, 编辑完之后就没有. 

CSS variable 是定义在 element 了, JS 是可以获取到和修改的. 总是完全不是一个世界的东西. 用途动机都不一样.

$primaryColor: red;
$secondaryColor: red;

h1 {
  color: $primaryColor;
}
p {
  color: $secondaryColor;
}

定义变量是用 $ 符号, 使用就直接放去想用的地方就可以了.

编译完成后 css file

h1 {
  color: red;
}
p {
  color: red;
}

有了变量表达加分, 要批量换也容易, 修改加分. 

 

Child Nested