可編程化雖然讓學(xué)習(xí)曲線增大浇衬，但是卻對(duì)日常使用帶來巨大的便利挠锥，十分提倡！
引入概念
1.什么是css預(yù)編譯萝嘁？
在書寫公司代碼時(shí)梆掸，我們會(huì)發(fā)現(xiàn)同一公司的網(wǎng)頁或者同一個(gè)項(xiàng)目的網(wǎng)頁，在樣式上都是成套匹配的牙言。
舉個(gè)例子，QQ10.1版本這個(gè)APP的主題色是藍(lán)色怪得，那么在可能次頁的顏色為藍(lán)色的60%咱枉，某個(gè)按鈕顏色為藍(lán)色的40%等等。那么如果現(xiàn)在發(fā)布QQ10.2版本徒恋，主題色改為當(dāng)季最流行的抹茶綠蚕断，難道要我把樣式表中的所有藍(lán)色都要更改，那這工作量太巨大了入挣。于是亿乳，css預(yù)編譯誕生了，它將css變成了可編譯径筏，可賦變量的形式葛假。這樣，我就可以通過設(shè)置變量為主題色滋恬，然后大范圍引用這個(gè)變量聊训，那么，下次我直接修改變量的顏色恢氯，整個(gè)頁面的顏色就自動(dòng)修改了带斑，達(dá)到牽一發(fā)而動(dòng)全身的目的。這就是css預(yù)編譯勋拟。目前主流的有 LESS 和 SCSS 勋磕。
2.什么是css預(yù)編譯器？
我們通過自定義寫了一大堆除了我們自己敢靡，瀏覽器根本不認(rèn)識(shí)的東西挂滓，怎么用啊醋安？于是杂彭，css預(yù)編譯器誕生啦，將你寫的誰也看不懂的東西再發(fā)布之前自動(dòng)編譯成真正的css吓揪，這樣你方便了亲怠，瀏覽器能看懂了，皆大歡喜柠辞！
3.什么是css后編譯团秽？
挨千刀的網(wǎng)景公司和微軟公司當(dāng)年的瀏覽器大戰(zhàn)雖然早已折戟沉沙，但是這場戰(zhàn)爭的影響殘留至今并且每天折磨著前端工程師。因?yàn)椴煌臑g覽器有不同的規(guī)則习勤，因此即使是使用 FLEX 也要因不同的瀏覽器內(nèi)核而加不同的前綴踪栋，這太鬧心啦！因此css后編譯誕生图毕，你只需要正常的去寫你的css就好了夷都，寫完之后，由css后編譯(例如postcss)來幫你添加上無聊而又冗雜的前綴予颤、兼容代碼等等囤官。
使用方法
1.變量化
解釋：允許定義css變量，然后在需要這個(gè)變量的地方引用蛤虐。
- less:
@beautiful-color: blue;
.a{
color: @beautiful-color;
margin : 0;
}
- css:
.a {
color: blue;
margin: 0;
}
2.混合化
解釋：在樣式A中引入樣式B党饮，樣式B中的css樣式就會(huì)自動(dòng)復(fù)制到樣式A中。
- less:
.header{
border: 1px solid red;
.a;
}
- css:
.header {
border: 1px solid red;
color: blue;
margin: 0;
}
or
- less:
.box-radius(@my-radius:5px){
border-radius: @my-radius;
-webkit-border-radius: @my-radius;
-moz-border-radius: @my-radius;
}
#header{
.box-radius;
}
#header1{
.box-radius(4px);
}
- css:
#header {
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
#header1 {
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
}
3.嵌套化
解釋：子元素驳庭，直接子元素等可以層層嵌在其中刑顺。
- less:
.b{
color: @beautiful-color;
.c{
margin-top: 10px;
}
.d >p {
margin-bottom: 10px;
.e{
color:@beautiful-color*3;
&:before{
color: @beautiful-color;
}
> li{
display: inline;
}
}
}
&:after{
content: ' ';
clear: both;
display: block;
}
}
- css:
.b {
color: blue;
}
.b .c {
margin-top: 10px;
}
.b .d > p {
margin-bottom: 10px;
}
.b .d > p .e {
color: #0000ff;
}
.b .d > p .e:before {
color: blue;
}
.b .d > p .e > li {
display: inline;
}
.b:after {
content: ' ';
clear: both;
display: block;
}
4.運(yùn)算
解釋：css允許進(jìn)行運(yùn)算
- less:
.f{
color:@beautiful-color*3
}
- css:
.f {
color: #0000ff;
}
the end
