CSS工程化

旧网页面临问题：全局样式冲突、嵌套层次过深的选择器、会带来代码的冗余等

CSS工程化目的：将代码层次化，容易看出嵌套关系；精简代码，提高效率。

CSS编译器的出现:

CSS经过多个版本的更迭，从CSS1 到 CSS3，历时多年。虽然新出了不少属性和规范，但在语言本身的特性上，并没有本质的改变。尽管使用 @import 指令可以解决部分模块化的

问题，但还远远不够。但W3C官方似乎对这些问题视而不见，就是不解决，于是，随着前端技术（特别是JS）的快速发展，很多第三方机构开始尝试进入CSS这个古老的领域，开

始着手解决这些遗留太久的难题。而它们的思路，就是像解决JS的问题那样，用编译器来解决CSS的问题.

什么是CSS编译器？
CSS编译器，也叫做CSS预编译器，是指开发者使用某种类似CSS（但实际不是）的语言编写代码，然后通过编译器，将其编译成浏览器真正能执行的CSS代码。
目前常见的CSS编译器有：SASS和LESS。
如何用SASS来实现优雅简洁的CSS代码：

SASS编译器是使用Ruby 语言书写而成的，因此，SASS的执行依赖Ruby的环境。值得庆幸的是，我们不需要进行繁琐的步骤去安装和配置Ruby，直接安装一个第三方的工具Koala即可。
使用方法：
1.新建一个文件夹，并用你熟悉的文本编辑器打开（例如VSCode），然后在文件夹中新建css文件夹，用于存放SASS文件以及CSS文件，再在根目录中新建一个index.html文件。在css文件中新建一个index.scss 文件，注意后缀名为.scss ，表示这是一个使用Sass CSS语言编写的文件。
2.将建好的文件夹拖到loala主界面中在Sass中取消勾选Source Map、选择Autoprefix 以及在右边文本输入框中选择CSS生成样式。
变量：
sass让人们受益的一个重要特性就是它为css引入了变量。你可以把反复使用的css属性值定义成变量，然后通过变量名来引用它们，而无需重复书写这一属性值。或者，对于仅使用过一次的属性值，你可以赋予其一个易懂的变量名，让人一眼就知道这个属性值的用途。
sass使用$ 符号来标识变量。
变量声明
sass变量的声明和css属性的声明很像： $highlight-color: #F90; 这意味着变量$highlightcolor现在的值是#F90。任何可以用作css属性值的赋值都可以用作sass的变量值，甚至是以空格分割的多个属性值，如$basic-border: 1px solid black; 或以逗号分割的多个属性值。。
变量引用
凡是css属性的标准值（比如说1px或者bold）可存在的地方，变量就可以使用。css生成时，变量会被它们的值所替代。之后，如果你需要一个不同的值，只需要改变这个变量的值，则所有引用此变量的地方生成的值都会随之改变。

嵌套CSS 规则

嵌套选择器
作用：将一大串需要一遍又一遍的重复样式简写，使用SASS语言每个选择器只需要书写一遍即可。
嵌套属性
在sass中，除了CSS选择器，属性也可以进行嵌套。尽管编写属性涉及的重复不像编写选择器那么糟糕，但是要反复写border-style 、border-width 、border-color 以及border-* 等也是非常烦人的。在sass中，你只需敲写一遍border：
    nav {
   　　 border: {
       　 style: solid;
        　 1px;
       　 color: #ccc;}
       　 }

SASS中的注释
SASS中提供了两种注释方式，分别是：
1. CSS标准注释/* 注释内容 */ ,该注释会出现在编译结果中
2. 静默注释// 注释内容该注释仅会出现在SASS代码中

混合器
如果你的整个网站中有几处小小的样式类似（例如一致的颜色和字体），那么使用变量来统一处理，这种情况是非常不错的选择。但是当你的样式变得越来越复杂，你需要大段大段的重用样式的代码，独立的变量就没办法应付这种情况了。你可以通过sass的混合器实现大段样式的重用。
简单混合器
使用@mixin定义一个混合器，混合器的书写跟CSS代码块一样，可以定义多个规则

@mixin flex-container{  
            display:flex;  
            flex-wrap: wrap;  
            justify-content: space-between;}  
//其他的代码块中均可以使用该混合器
@include flex-container;//使用混合器   
}   
.container{   
background: lightblue;   
@include flex-container;//使用混合器   
}

编译后生成：

.main{
font-size:1.1em;   
color:inherit;   
display:flex;   
flex-wrap: wrap;   
justify-content: space-between;   
}   
.container{   
background: lightblue;   
display:flex;   
flex-wrap: wrap;   
justify-content: space-between;   
}