less與sass的區(qū)別
????????在介紹less和sass的區(qū)別之前，我們先來了解一下他們的定義：
一翘贮、Less、Sass/Scss是什么?
1、Less：
????是一種動態(tài)樣式語言. 對CSS賦予了動態(tài)語言的特性士葫，如變量、繼承送悔、運(yùn)算慢显、函數(shù)爪模。
????Less 既可以在客戶端上運(yùn)行 (支持IE 6+, Webkit, Firefox)，也可在服務(wù)端運(yùn)行荚藻。
2屋灌、Sass：
????是一種動態(tài)樣式語言，Sass語法屬于縮排語法应狱，
????比css比多出好些功能(如變量共郭、嵌套、運(yùn)算,混入(Mixin)疾呻、繼承除嘹、顏色處理，函數(shù)等)岸蜗，更容易閱讀尉咕。
Sass與Scss是什么關(guān)系?
Sass的縮排語法，對于寫慣css前端的web開發(fā)者來說很不直觀璃岳，也不能將css代碼加入到Sass里面年缎，因此sass語法進(jìn)行了改良，Sass 3就變成了Scss(sassy css)铃慷。與原來的語法兼容单芜，只是用{}取代了原來的縮進(jìn)。
二枚冗、less和sass的相同之處
Less和Sass在語法上有些共性缓溅，比如下面這些：
1、混入(Mixins)——class中的class赁温；
2坛怪、參數(shù)混入——可以傳遞參數(shù)的class，就像函數(shù)一樣股囊；
3袜匿、嵌套規(guī)則——Class中嵌套class，從而減少重復(fù)的代碼稚疹；
4居灯、運(yùn)算——CSS中用上數(shù)學(xué)；
5内狗、顏色功能——可以編輯顏色怪嫌；
6、名字空間(namespace)——分組樣式柳沙，從而可以被調(diào)用岩灭；
7、作用域——局部修改樣式赂鲤；
8噪径、JavaScript 賦值——在CSS中使用JavaScript表達(dá)式賦值柱恤。
三、less和sass的區(qū)別
????Less和Sass的主要不同就是他們的實(shí)現(xiàn)方式找爱。
????Less是基于JavaScript梗顺，是在客戶端處理的。
????Sass是基于Ruby的车摄，是在服務(wù)器端處理的寺谤。
????關(guān)于變量在Less和Sass中的唯一區(qū)別就是Less用@，Sass用$练般。
1矗漾、Less：
【兩種注釋方式】
①//less中的注釋，但這種不會被編譯
②/*
?* 這也是less中的注釋薄料，但是會被編譯
?*/
【less中的變量】
1敞贡、聲明變量:
????@變量名:變量值;
????使用變量:?@變量名
????>>>less中變量的類型：
? ??①數(shù)字類?1 10px
? ??②字符串：無引號字符串 red ;有引號字符串 "haha"
? ??③顏色類：red #000000 rgb()
? ??④值列表類型：用逗號和空格分隔 10px solid red
????>>>變量使用原則：
????多次頻繁出現(xiàn)的值、需要修改的值摄职，設(shè)為變量
2誊役、混合(MiXins)
? ??①無參混合
? ??聲明：.name{}
????選擇器中調(diào)用：.name;
? ??②代參混合
? ??無默認(rèn)值
? ??聲明：.name(@param){}
? ??調(diào)用：.name(parValue);
? ??有默認(rèn)值
? ??聲明：.name(@param:value){}?
? ??調(diào)用：.name(parValue);?//parValue可省
????>>>如果聲明時，參數(shù)沒有默認(rèn)值谷市，則調(diào)用時必須賦值蛔垢，否則報(bào)錯！
????>>>無參混合迫悠，會在css中編譯除同名的class選擇器鹏漆，有參的不會
3、less的匹配模式：
使用混合進(jìn)行匹配创泄，類似于if結(jié)構(gòu)
聲明：
.name(條件一艺玲，參數(shù)){}
.name(條件二，參數(shù)){}
.name(@_,參數(shù)){}
調(diào)用：
.name(條件值鞠抑，參數(shù)值);
匹配規(guī)則：根據(jù)調(diào)用時提供的條件值去尋找與之匹配的"MiXins"執(zhí)行饭聚，其中@_表示永遠(yuǎn)需要執(zhí)行的部分
4、less中的運(yùn)算
+ - * / 可帶搁拙、可不帶單位
顏色運(yùn)算時秒梳，紅綠藍(lán)分三組計(jì)算，組內(nèi)可進(jìn)位箕速，組間互不干涉
5酪碘、包含了傳進(jìn)來的所有參數(shù)：
border:@arguments;
6、less中的嵌套：保留HTML中的代碼結(jié)構(gòu)
①嵌套默認(rèn)是后代選擇器盐茎，如果需要子代選擇器婆跑，則在子代前加>
②.&表示上一層 &:表示上一層的hover事件
2、Sass：
1庭呜、Sass中的變量
使用 $變量名：變量值滑进，聲明變量；
如果變量需要在字符串中嵌套募谎，則需使用#加大括號包裹扶关；
border-#{$left}:10px solid blue;
2、Sass中的運(yùn)算
會將單位也進(jìn)行運(yùn)算数冬，使用時需注意最終單位例：10px*10px=100px*px
3节槐、sass中的嵌套：
選擇器嵌套，屬性嵌套拐纱，偽類嵌套
選擇器嵌套：
? ? ul{ li{} } 后代
? ? ? ? ? ?ul{ >li{} } 子代
&:表示上一層?div{ ul{ li{ &=="div ul li" } } }
屬性嵌套：
屬性名與大括號之間必須有:?
例如:border:{color:red;}
偽類嵌套：ul{li{ &:hover{ "ul li:hover" } } }
4铜异、混合宏、繼承秸架、占位符
①混合宏：
聲明：@mixin?name($param:value){}
調(diào)用：@include?name(value);
>>>聲明時揍庄，可以有參，可以無參东抹；可帶默認(rèn)值蚂子，也可不帶；但是缭黔，調(diào)用時食茎，必須符合聲明規(guī)范。同less
>>>優(yōu)點(diǎn)：可以傳參馏谨，不會生成同名class别渔；
>>>缺點(diǎn)：會將混合宏中的代碼，copy到對應(yīng)的選擇器中惧互，產(chǎn)生冗余代碼哎媚！
②繼承：
聲明：.class{}
調(diào)用：@extend?.class;
>>>優(yōu)點(diǎn)：繼承的相同代碼，會提取到并集選擇器中壹哺，減少冗余代碼
>>>缺點(diǎn)：無法進(jìn)行傳參抄伍，會在css中，生成一個同名class
③占位符：
聲明：&class{}
調(diào)用：@extend?%class;
>>>優(yōu)點(diǎn)：繼承相同代碼管宵，會提前到并集選擇器截珍；不會生成同名的class選擇器
>>>缺點(diǎn)：無法進(jìn)行傳參
綜上所述：當(dāng)需要傳遞參數(shù)時，用混合宏箩朴；當(dāng)有現(xiàn)成的class時用繼承岗喉；當(dāng)不需要參數(shù)，也不需要class時炸庞，用占位符
5钱床、if條件結(jié)構(gòu)：
@if 條件 {}@else {}
6、for循環(huán)結(jié)構(gòu)：
//不包含10;
@for $i from 1 to 10{}
//包含10;
@for $i from 1 through 10{}
7埠居、while循環(huán)結(jié)構(gòu)：
$j: 1;
@while $j<10 {
????.while#{$j} { border:#{$j}px solid red;
}
$j: $j+1;
}
8查牌、each循環(huán)遍歷
@each item in a,b,c,d{//item表示每一項(xiàng)}
9事期、函數(shù)：
@function func($length) { $length1:$length*5; @return $length1;}//調(diào)用：
func(10px);
10、使用...將傳進(jìn)來的所有參數(shù)纸颜，接收到一個變量中
@mixin bordeRadius($param1...) { //使用...將傳進(jìn)來的所有參數(shù)兽泣，接收到一個變量中
border-radius:$param1; -webkit-border-radius:$param1;}
四. 總結(jié)
不管是Sass，還是Less胁孙，
都可以視為一種基于CSS之上的高級語言唠倦，
其目的是使得CSS開發(fā)更靈活和更強(qiáng)大，
Sass的功能比Less強(qiáng)大,
基本可以說是一種真正的編程語言了涮较，
Less則相對清晰明了,易于上手,對編譯環(huán)境要求比較寬松稠鼻。
考慮到編譯Sass要安裝Ruby,而Ruby官網(wǎng)在國內(nèi)訪問不了,個人在實(shí)際開發(fā)中更傾向于選擇Less，
但也會去嘗試使用sass狂票，畢竟為以后的工作做準(zhǔn)備候齿。
五.擴(kuò)展思考
處理機(jī)制不一樣會帶來什么不同？
因?yàn)長ess與Sass處理機(jī)制不一樣苫亦，
前者是通過客戶端處理的毛肋，
后者是通過服務(wù)端處理，
相比較之下前者解析js會比后者慢一點(diǎn)屋剑。
