css工程化和浏览器兼容性问题

CSS工程化

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

$darkcolor : #2E2E2E; //定义一个颜色变量，值为#2E2E2E 
$lightcolor : #c1c1c1; //定义一个颜色变量，值为#c1c1c1 
.site-footer { 

background: $darkcolor; //使用变量$darkcolor的值作为背景色 
color: $lightcolor; //使用变量$lightcolor的值作为前景色 
padding: 50px 0; 
} 
.site-header { 
background: $darkcolor; //使用变量$darkcolor的值作为背景色 
color: $lightcolor; //使用变量$lightcolor的值作为前景色 
position: fixed; 
left: 0; 
top: 0;
}

SASS的安装
　　Koala是一个预编译工具集，它内置了SASS、LESS等多种前端的预编译器，并且提供图形化的操作界面，无论对于新手和老手，都是非常不错的选择。
　　　　1、新建一个文件夹，并用你熟悉的文本编辑器打开（例如VSCode），然后在文件夹中新建css文件夹，用于存放SASS文件以及CSS文件，再在根目录中新建一个index.html文件。
　　　　2、在css文件中新建一个 index.scss 文件，注意后缀名为 .scss ，表示这是一个使用Sass CSS语言编写的文件。
　　　　3、打开安装好的Koala，将你的工程文件夹拖动Koala的主界面中。VSCODE中，已经生成了对应的CSS文件和一个Map文件.

　　编译选项
　　　　1. Autoprefix自动前缀
　　　　　　选中该选项，在编译时，会自动对浏览器有兼容问题的属性加上厂商前缀。
　　　　2. compressed压缩模式
　　　　　　选中该选项，在编译时，会对生成的代码进行压缩，以达到小文件体积。

变量

sass使用 $ 符号来标识变量。

1、变量声明
　　　　sass变量的声明和css属性的声明很像： $highlight-color: #F90; 这意味着变量$highlight color 现在的值是#F90。任何可以用作css属性值的赋值都可以用作sass的变量值，甚至是以空格分割的多个　属性值，如 $basic-border: 1px solid black; ，或以逗号分割的多个属性值，

2、变量引用

　　凡是css属性的标准值（比如说1px或者bold）可存在的地方，变量就可以使用。css生成时，变量会被它们的值所替代。之后，如果你需要一个不同的值，只需要改变这个变量的值，则所有引用此变量的地方生成的值都会随之改变。

嵌套CSS 规则

嵌套选择器

示例：

.site-footer .footer-container .footer-menu { 
　　　　　　　　display: flex; 
　　　　　　　　 773px; 
　　　　　　　　justify-content: space-between; 
　　　　　　　　line-height: 3;
　　　　　　　　li{ 
　　　　　　　　　　font-size: 14px; 
　　　　　　　　　　　　a:hover { 
　　　　　　　　　　　　　　color: #fff; 
　　　　　　　　　　　　　　} 
　　　　　　　　&:first-child{ 
　　　　　　　　font-size: 16px; 
　　　　　　　　color: #eee; 
　　　　　　}
　　　}
}

嵌套属性
　　在sass中，除了CSS选择器，属性也可以进行嵌套。尽管编写属性涉及的重复不像编写选择器那么糟糕，但是要反复写 border-style 、 border-width 、 border-color 以及 border-* 等也是非常烦人的。在sass中，你只需敲写一遍border：
SASS中的注释

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

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

简单混合器
@mixin定义一个混合器， @include 来引用混合器名称
示例：

//使用@mixin定义一个混合器，混合器的书写跟CSS代码块一样，可以定义多个规则
@mixin flex-container{ 
　　　　　　　　display:flex; 
　　　　　　　　flex-wrap: wrap; 
　　　　　　　　justify-content: space-between; 
　　　　} 

//其他的代码块中均可以使用该混合器 

.main{ 
　　　　font-size:1.1em; 
　　　　color:inherit; 
　　　　@include flex-container;//使用混合器
} 

.container{ 
　　　　background: lightblue; 
　　　　@include flex-container;//使用混合器
}

混合器传参
　　混合器并不一定总得生成相同的样式。可以通过在@include混合器时给混合器传参，来定制混合器生成的精确样式。当@include混合器时，参数其实就是可以赋值给css属性值的变量。如果你接触过函数，这种方式跟函数非常相似：
　　当混合器被@include时，你可以把它当作一个css函数来传参。
混合器参数的默认值
　　为了在@include混合器时不必传入所有的参数，我们可以给参数指定一个默认值。参数默认值使用 $name: default-value 的声明形式，默认值可以是任何有效的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 ，会造成在一些低版本内核的浏览器中无法识别。

一些浏览器的这两点特性：
　　1.不同内核的浏览器可以识别自己特有的CSS属性
　　2.浏览器遇到无法识别的CSS属性，会直接跳过
正是由于浏览器的这种特点，给我们解决兼容浏览器兼容性问题打开了一条通道。而CSS Hack技术，就是通过书写一些让特定浏览器识别的代码来解决兼容性问题的。

渐近增强和优雅降级
　　网页在新版本的浏览器中要应用新的效果；网页在旧版本的浏览器中可以没有新的效果，但不要布局错乱。

　　针对不同的侧重点，于是出现了两种静态页面的开发思路，它们分别是渐近增强（progressive enhancement）和优雅降级（graceful degradation）。

　　　　渐进增强是指：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

　　　　优雅降级是指：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

它们的区别在于：

　　1、优雅降级以新版本浏览器为目标，从现状开始，并面向低版本浏览器，逐渐减少用户体验的供给。
　　2、渐进增强以旧版本浏览器为目标，从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应新版本浏览器的需要。
　　3、降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。

优雅降级会优先书写新标准中的属性，以适应新版本浏览器，然后再补充旧版本浏览器中的书写方式，
渐近增强会优先书写浏览器特有的属性，以适应旧版本浏览器，然后再补充新标准中的属性