CSS工程化
CSS工程化
引言
CSS编译器的出现
什么是CSS编译器
SASS示例
SASS的安装起步
准备工程
编写SASS代码编译
编 译 选 项 应用到页面
变量
变量声明变量引用
嵌套CSS 规则
嵌套选择器嵌套属性
SASS中的注释混合器
简单混合器混合器传参
混合器参数的默认值
更多功能
引言
你在编写CSS代码时，是否遇到过这样的问题：
这样的代码在CSS中非常常见，本来是从外向内依次设置CSS样式，但在书写时，我们不得不每次都从最外层开始选择，不仅繁琐，而且重复的书写这些选择器也容易出错，同时还增加了阅读难 度。
一个网页通常只有几种配色，这些配色会到处使用，或者是一些样式（比如弹性盒、固定位置等） 也会到处使用，这样一来，我们不得不到处的去书写这些重复代码。一旦有一天网站改版，颜色发生变化，代码修改量是非常庞大的。
在CSS中遇到的这些问题，如果放到后端开发领域，是难以想象的。而后端开发之所以不容易发生这样的问题，是因为后端有多种技术手段来解决该问题（函数、类、模块等）。而现在，前端的迅速崛起，也为这些问题带来了解决方案。
本文讨论的《CSS工程化》，就是使用后端开发的思维，来解决前端遇到的问题。
CSS编译器的出现
什么是CSS编译器
CSS编译器，也叫做CSS预编译器，是指开发者使用某种类似CSS（但实际不是）的语言编写代码，然后通过编译器，将其编译成浏览器真正能执行的CSS代码。
目前常见的CSS编译器有：SASS和LESS。本文已最常用的SASS为例，来讲解如何用SASS来实现优雅简洁的CSS代码。
SASS示例
下面是用一段非常简单的SASS代码，来讲解它是如何执行的。
上面的代码虽然看上去和CSS代码很像，但其实仔细观察，它并不是CSS语言（CSS中可没有变量），而它是用SASS语言书写而成的。
这段代码并不能被浏览器识别，因为浏览器不认识SASS代码。
因此，需要使用SASS编译器进行编译，它会将我们的SASS代码编译成CSS代码，编译完成后，会得到类似这样的CSS代码：
看到了吗？两个类选择器中的背景色和前景色被变量的值替换了，这段代码是可以被浏览器执行 的。 也就是说，我们可以使用SASS语言来编写没有重复的、简洁优雅的CSS代码，编写好后，只需要让SASS编译器启动起来，将其生成最终的CSS代码交给浏览器执行就可以了。
接下来，我们就来一步步学习如何使用SASS。
SASS的安装
SASS编译器是使用 Ruby 语言书写而成的，因此，SASS的执行依赖Ruby的环境。值得庆幸的是， 我们不需要进行繁琐的步骤去安装和配置Ruby，直接安装一个第三方的工具Koala即可。
Koala是一个预编译工具集，它内置了SASS、LESS等多种前端的预编译器，并且提供图形化的操作界面，无论对于新手和老手，都是非常不错的选择。
还等什么，赶紧去官网下载Koala并安装吧
起步
跟随教程，一步步认识SASS的使用。
准备工程
新建一个文件夹，并用你熟悉的文本编辑器打开（例如VSCode），然后在文件夹中新建css文件夹，用于存放SASS文件以及CSS文件，再在根目录中新建一个index.html文件。
编写SASS代码
在css文件中新建一个 index.scss 文件，注意后缀名为 .scss ，表示这是一个使用Sass CSS语言编写的文件。
在该文件中输入下面的代码：
从代码中我们可以看到，sass语言中是支持 // 注释的。
编译
我们书写好了SASS代码，现在需要将它编译成浏览器可识别的CSS代码。现在，打开安装好的Koala，将你的工程文件夹拖动Koala的主界面中。
此时，如果不出意外，你的VSCODE中，已经生成了对应的CSS文件和一个Map文件。
现在，手动删除index.css.map文件，它以后都不会生成了。
sca你可以看一下index.css文件中的代码，是否就是你需要的代码呢？
使用SASS开发就是这么简单，不仅如此，只要你不关闭Koala，之后你对index.scss文件作出的任
何改动，它都会直接自动编译到index.css中。
那么map文件是干嘛用的呢？这是一个指示SASS文件和CSS文件映射方式的文件，如果你是一个
初学者，简单来说，就是没用。你可以在Koala中进行设置，让它不要生成这个文件。
le=1.0">
编译选项
Koala提供多种编译选项可供配置，这里介绍两个：
1. Autoprefix自动前缀
选中该选项，在编译时，会自动对浏览器有兼容问题的属性加上厂商前缀。
2. compressed压缩模式
选中该选项，在编译时，会对生成的代码进行压缩，以达到最小文件体积。
现在，将SASS代码更改成：
@charset "utf-8";
$darkcolor : #2E2E2E; //定义一个颜色变量，值为#2E2E2E
$lightcolor : #c1c1c1; //定义一个颜色变量，值为#c1c1c1
.main{
background: $darkcolor; //使用变量$darkcolor的值作为背景色
color: $lightcolor; //使用变量$lightcolor的值作为前景
display: flex; //有兼容问题的属性
}变量
sass让人们受益的一个重要特性就是它为css引入了变量。你可以把反复使用的css属性值 定义成变
量，然后通过变量名来引用它们，而无需重复书写这一属性值。或者，对于仅使用过一 次的属性
值，你可以赋予其一个易懂的变量名，让人一眼就知道这个属性值的用途。
sass使用 $ 符号来标识变量。
变量声明
sass变量的声明和css属性的声明很像： $highlight-color: #F90; 这意味着变量$highlight color
现在的值是#F90。任何可以用作css属性值的赋值都可以用作sass的变量值，甚至是以空格分割的
多个属性值，如 $basic-border: 1px solid black; ，或以逗号分割的多个属性值，如
与CSS属性不同，变量可以在css规则块定义之外存在。当变量定义在css规则块内，那么该变量只
能在此规则块内使用。如果它们出现在任何形式的{…}块中：
在这段代码中， $nav-color 这个变量定义在了规则块外边，所以在整个样式表中都可以像 nav规
则块那样引用它。 $width 这个变量定义在了nav的{ }规则块内，所以它只能在nav规则块内使用。
这意味着是你可以在样式表的其他地方定义和使用 $width 变量，不会对这里造成影响。
只声明变量其实没啥用处，我们最终的目的还是使用它们，接下来我们将进一步探讨变量的使用方
法。
变量引用
凡是css属性的标准值（比如说1px或者bold）可存在的地方，变量就可以使用。css生成时，变量
会被它们的值所替代。之后，如果你需要一个不同的值，只需要改变这个变量的值，则所有引用此
变量的地方生成的值都会随之改变。
在声明变量时，变量值也可以引用其他变量。当你通过粒度区分，为不同的值取不同名字时，这相
当有用。下例在独立的颜色值粒度上定义了一个变量，且在另一个更复杂的边框值粒度上也定义了
一个变量：
$highlight-color: #F90;
.selected {
border: 1px嵌套CSS 规则
嵌套选择器
css中重复写选择器是非常恼人的。如果要写一大串指向页面中同一块的样式时，往往需要 一遍又
一遍地重复父级样式：
solid $highlight-color;
}嵌套属性
在sass中，除了CSS选择器，属性也可以进行嵌套。尽管编写属性涉及的重复不像编写选择器那么
糟糕，但是要反复写 border-style 、 border-width 、 border-color 以及 border-* 等也是非
常烦人的。在sass中，你只需敲写一遍border：
SASS中的注释
SASS中提供了两种注释方式，分别是：
1. CSS标准注释 /* 注释内容 */ ,该注释会出现在编译结果中
2. 静默注释 // 注释内容 该注释仅会出现在SASS代码中
例如：
混合器
如果你的整个网站中有几处小小的样式类似（例如一致的颜色和字体），那么使用变量来统一处理
这种情况是非常不错的选择。但是当你的样式变得越来越复杂，你需要大段大段的重用样式的代
码，独立的变量就没办法应付这种情况了。你可以通过sass的混合器实现大段样式的重用。
简单混合器
例如，如果你的网站，需要大量使用到弹性盒（往往如此），并且这些弹性盒都有共同的特征（比
如需要换行、两端对齐排列等），你大可不必每次都去重复编写代码，使用混合器能够帮助你仅编
写一次这样的代码：
$widt100px;
混合器传参
混合器并不一定总得生成相同的样式。可以通过在@include混合器时给混合器传参，来定制混合器
生成的精确样式。当@include混合器时，参数其实就是可以赋值给css属性值的变量。如果你接触
过函数，这种方式跟函数非常相似：
混合器参数的默认值
为了在@include混合器时不必传入所有的参数，我们可以给参数指定一个默认值。参数默认值使
用 $name: default-value 的声明形式，默认值可以是任何有效的css属性值，甚至是其他参数的
引用，如下代码