CSS工程化
一个网页通常只有几种配色，这些配色会到处使用，或者是一些样式（比如弹性盒、固定位置等）
也会到处使用，这样一来，我们不得不到处的去书写这些重复代码。一旦有一天网站改版，颜色发
生变化，代码修改量是非常庞大的。
在CSS中遇到的这些问题，如果放到后端开发领域，是难以想象的。而后端开发之所以不容易发生
这样的问题，是因为后端有多种技术手段来解决该问题（函数、类、模块等）。而现在，前端的迅
速崛起，也为这些问题带来了解决方案。
本文讨论的《CSS工程化》，就是使用后端开发的思维，来解决前端遇到的问题。
CSS编译器
CSS编译器，也叫做CSS预编译器，是指开发者使用某种类似CSS（但实际不是）的语言编写代码，然后通过编译器，将其编译成浏览器真正能执行的CSS代码。
目前常见的CSS编译器有：SASS和LESS。本文已最常用的SASS为例，来讲解如何用SASS来实现优雅简洁的CSS代码。
SASS代码虽然看上去和CSS代码很像，但其实仔细观察，它并不是CSS语言（CSS中可没有变量），而它是用SASS语言书写而成的。
这段代码并不能被浏览器识别，因为浏览器不认识SASS代码。
因此，需要使用SASS编译器进行编译，它会将我们的SASS代码编译成CSS代码
SASS的安装
SASS编译器是使用Ruby语言书写而成的，因此，SASS的执行依赖Ruby的环境。值得庆幸的是，我们不需要进行繁琐的步骤去安装和配置Ruby，直接安装一个第三方的工具Koala即可。
Koala是一个预编译工具集，它内置了SASS、LESS等多种前端的预编译器，并且提供图形化的操作界面。
准备工程
新建一个文件夹，并用你熟悉的文本编辑器打开（例如VSCode），然后在文件夹中新建css文件
夹，用于存放SASS文件以及CSS文件，再在根目录中新建一个index.html文件。
编写SASS代码
在css文件中新建一个index.scss文件，注意后缀名为.scss，表示这是一个使用Sass CSS语言
编写的文件。
sass语言中是支持//注释的。
编译
我们书写好了SASS代码，现在需要将它编译成浏览器可识别的CSS代码。
现在，打开安装好的Koala，将你的工程文件夹拖动Koala的主界面中。
此时，如果不出意外，你的VSCODE中，已经生成了对应的CSS文件和一个Map文件。
使用SASS开发就是这么简单，不仅如此，只要你不关闭Koala，之后你对index.scss文件作出的任何改动，它都会直接自动编译到index.css中。
那么map文件是干嘛用的呢？这是一个指示SASS文件和CSS文件映射方式的文件，如果你是一个初学者，简单来说，就是没用。你可以在Koala中进行设置，让它不要生成这个文件。
编译选项
Koala提供多种编译选项可供配置，这里介绍两个：
1. Autoprefix自动前缀
选中该选项，在编译时，会自动对浏览器有兼容问题的属性加上厂商前缀。
2. compressed压缩模式
选中该选项，在编译时，会对生成的代码进行压缩，以达到最小文件体积。
变量
sass让人们受益的一个重要特性就是它为css引入了变量。你可以把反复使用的css属性值 定义成变
量，然后通过变量名来引用它们，而无需重复书写这一属性值。或者，对于仅使用过一 次的属性值，你可以赋予其一个易懂的变量名，让人一眼就知道这个属性值的用途。
sass使用$符号来标识变量。
变量声明
sass变量的声明和css属性的声明很像：$highlight-color: #F90;这意味着变量$highlightcolor
现在的值是#F90。任何可以用作css属性值的赋值都可以用作sass的变量值，甚至是以空格分割的
多个属性值，如$basic-border: 1px solid black;，或以逗号分割的多个属性值，如
$plain-font: "Myriad Pro","Myriad","Helvetica Neue","Helvetica","Liberati
on Sans","sans-serif";
嵌套属性
在sass中，除了CSS选择器，属性也可以进行嵌套。尽管编写属性涉及的重复不像编写选择器那么糟糕，但是要反复写border-style、border-width、border-color以及border-*等也是非常烦人的。在sass中，你只需敲写一遍border
简单混合器
例如，如果你的网站，需要大量使用到弹性盒（往往如此），并且这些弹性盒都有共同的特征（比如需要换行、两端对齐排列等），你大可不必每次都去重复编写代码，使用混合器能够帮助你仅编写一次这样的代码:
@mixin flex-container{
display:flex;
flex-wrap: wrap;
justify-content: space-between;
}
混合器传参
混合器并不一定总得生成相同的样式。可以通过在@include混合器时给混合器传参，来定制混合器生成的精确样式。当@include混合器时，参数其实就是可以赋值给css属性值的变量。如果你接触过函数，这种方式跟函数非常相似：
解决浏览器兼容性问题
所谓的浏览器兼容性问题，是指不同的浏览器对同一段代码有不同的解析，造成页面显示
效果不统一的情况。在大多数情况下，我们的需求是，用户用任何浏览器来查看我们的网
站或者登陆我们的系统，都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发
人员经常会碰到和必须要解决的问题。
而造成浏览器兼容问题的根本原因，是浏览器的内核不同导致的。
认识浏览器内核
“浏览器内核”也称为“引擎”，可大概译为“渲染引擎”，不过我们一般称之为“浏览器内核”。我们写的HTML和CSS代码，之所以能被浏览器识别并在页面上渲染，正是因为内核的存在。
常见的浏览器内核如下：
浏览器类型 内核 JS引擎
IE Trident JScript
Firefox Gecko TraceMonkey
Chrome WebKit,Blink V8
Safari WebKit SquirrelFish Extreme
Opera Presto Carakan
使用CSS Hack解决兼容性问题:
浏览器在读取CSS代码的时候可能会遇到一些无法识别的代码，造成这种现象的原因通常有两种：
1. 代码本身有问题，如：bg:red，bg并不是一个有效的css属性
2. 代码没问题，但浏览器的内核不能识别，如：box-sizing:border-box，这句代码本身没
有问题，但由于使用的是CSS3的属性box-sizing，会造成在一些低版本内核的浏览器中无
法识别。
总之，当浏览器遇到这些无法识别的代码时，它会怎么做呢？和java、C#等后端语言不同，浏览器不会中止程序的执行，它会立即跳过这些无法识别的代码，就当作没看见一样，继续执行后面的代码
总结一些浏览器的这两点特性：
1. 不同内核的浏览器可以识别自己特有的CSS属性
2. 浏览器遇到无法识别的CSS属性，会直接跳过
正是由于浏览器的这种特点，给我们解决兼容浏览器兼容性问题打开了一条通道。而CSS Hack技
术，就是通过书写一些让特定浏览器识别的代码来解决兼容性问题的。
比如，当我们遇到某些CSS属性可能带来浏览器兼容问题，可以通过这样的模式来书写：
.hack{
opacity: .5; /*若浏无法识别，会跳过此行*/
filter:alpha(opacity=50); /*针对IE，若无法识别，会跳过此行*/
-moz-opacity: .5; /*针对火狐旧版本，若无法识别，会跳过此行*/
-khtml-opacity: .5; /*针对Safari旧版本，若无法识别，会跳过此行*/
}
渐近增强和优雅降级
由于我们的网页需要适应不同型号、以及同型号不同版本的浏览器。
面对这么多的浏览器，就算使用Hack技术，我们也无法保证所有的样式都能正常的应用到浏览器
中，比如，你无法把动画效果应用到IE5中。
如果你的项目需要考虑那些旧版本的浏览器，你就会面临上面的困境。
如何处理呢？
我们的总体思路是：网页在新版本的浏览器中要应用新的效果；网页在旧版本的浏览器中可以没有
新的效果，但不要布局错乱。
以上是总体思路，而面对不同的项目时，可能有侧重点的不同。比如，政府网站一般会侧重考虑旧
版本浏览器（公务员的世界你不懂）；而互联网应用项目会侧重考虑新版本浏览器。
针对不同的侧重点，于是出现了两种静态页面的开发思路，它们分别是渐近增强（progressive
enhancement）和优雅降级（graceful degradation）。
渐进增强是指：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行
效果、交互等改进和追加功能达到更好的用户体验。
优雅降级是指：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
它们的区别在于：
优雅降级以新版本浏览器为目标，从现状开始，并面向低版本浏览器，逐渐减少用户体验的
供给。
渐进增强以旧版本浏览器为目标，从一个非常基础的，能够起作用的版本开始，并不断扩
充，以适应新版本浏览器的需要。
降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地
带。
在代码风格上，优雅降级会优先书写新标准中的属性，以适应新版本浏览器，然后再补充旧版本浏
览器中的书写方式