今天我們來談?wù)刲ess與sass的相同點(diǎn)與不同點(diǎn)。
一神得、less與sass分別是什么
1、less
Less 是一門?CSS 預(yù)處理語言灯节，它擴(kuò)展了?CSS 語言循头，增加了變量绵估、Mixin、函數(shù)等特性卡骂，使?CSS 更易維護(hù)和擴(kuò)展国裳，它可以運(yùn)行在?Node 或?yàn)g覽器端。
2全跨、sass
Sass 是一款強(qiáng)化?CSS 的輔助工具缝左，它在?CSS 語法的基礎(chǔ)上增加了變量?、嵌套?浓若、混合? 渺杉、導(dǎo)入? 等高級功能，這些拓展令?CSS 更加強(qiáng)大與優(yōu)雅挪钓。使用?Sass 以及?Sass ?的樣式庫（如Compass）有助于更好地組織管理樣式文件是越，以及更高效地開發(fā)項(xiàng)目。
二碌上、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是基于JavaScript，是在客戶端處理的茫打。
Sass是基于Ruby的居触，是在服務(wù)器端處理的妖混。
關(guān)于變量在Less和Sass中的唯一區(qū)別就是Less用@，Sass用$轮洋。
輸出設(shè)置制市，Less沒有輸出設(shè)置，Sass提供4中輸出選項(xiàng)：nested, compact, compressed 和?expanded弊予。
Sass支持條件語句祥楣，可以使用if{}else{},for{}循環(huán)等等，而Less不支持汉柒。
詳細(xì)對比列舉如下：
1误褪、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í)正塌，參數(shù)沒有默認(rèn)值渡八，則調(diào)用時(shí)必須賦值，否則報(bào)錯(cuò)传货！
無參混合屎鳍，會在css中編譯除同名的class選擇器，有參的不會
(3)问裕、less的匹配模式：使用混合進(jìn)行匹配逮壁，類似于if結(jié)構(gòu)
聲明：
.name(條件一，參數(shù)){}
.name(條件二粮宛，參數(shù)){}
.name(@_,參數(shù)){}
調(diào)用：.name(條件值窥淆，參數(shù)值);
匹配規(guī)則：根據(jù)調(diào)用時(shí)提供的條件值去尋找與之匹配的"MiXins"執(zhí)行，其中@_表示永遠(yuǎn)需要執(zhí)行的部分
(4)巍杈、less中的運(yùn)算
+ - * / ?可帶忧饭、可不帶單位
顏色運(yùn)算時(shí)，紅綠藍(lán)分三組計(jì)算筷畦，組內(nèi)可進(jìn)位词裤，組間互不干涉
(5)、包含了傳進(jìn)來的所有參數(shù)：border:@arguments;
(6)鳖宾、less中的嵌套：保留HTML中的代碼結(jié)構(gòu)
①嵌套默認(rèn)是后代選擇器吼砂，如果需要子代選擇器，則在子代前加>
②.&表示上一層? ? ? ?&:表示上一層的hover事件
編譯為:
1section{ 2p{ 3color: red; 4background-color: yellowgreen; 5text-align: center; 6} 7ul{ 8padding: 0px; 9list-style: none;10li{11float: ?left;12margin: 10px;13width: 100px;14text-align: center;15border: ?@border;16&:hover{17background-color: yellow;18}19}
2鼎文、Sass：
(1)渔肩、Sass中的變量
使用? ?$變量名：變量值，聲明變量拇惋；
如果變量需要在字符串中嵌套周偎，則需使用#加大括號包裹抹剩；
border-#{$left}:10px solid blue;
(2)、Sass中的運(yùn)算蓉坎，會將單位也進(jìn)行運(yùn)算吧兔，使用時(shí)需注意最終單位
例：10px*10px=100px
(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);
>>>聲明時(shí)，可以有參罐监，可以無參吴藻；可帶默認(rèn)值，也可不帶弓柱；但是沟堡，調(diào)用時(shí)，必須符合聲明規(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中缔御，生成一個(gè)同名class
③占位符：聲明：&class{} ?調(diào)用：@extend ?%class;
>>>優(yōu)點(diǎn)：繼承相同代碼，會提前到并集選擇器妇蛀；不會生成同名的class選擇器
>>>缺點(diǎn)：無法進(jìn)行傳參
綜上所述：當(dāng)需要傳遞參數(shù)時(shí)耕突，用混合宏；當(dāng)有現(xiàn)成的class時(shí)用繼承讥耗；當(dāng)不需要參數(shù)有勾，也不需要class時(shí)疹启，用占位符
（5） 混合指令?(Mixin Directives)
混合指令（Mixin）用于定義可重復(fù)使用的樣式古程，避免了使用無語意的?class，比如?.float-left喊崖≌跄ィ混合指令可以包含所有的?CSS 規(guī)則雇逞，絕大部分?Sass 規(guī)則，甚至通過參數(shù)功能引入變量茁裙，輸出多樣化的樣式塘砸。
?①定義混合指令?@mixin (Defining a Mixin: @mixin)
混合指令的用法是在?@mixin 后添加名稱與樣式，比如名為?large-text 的混合通過下面的代碼定義：
@mixin large-text { font: { family: Arial; size: 20px; weight: bold; } color: #ff0000; }
（6）. 函數(shù)指令?(Function Directives)
Sass 支持自定義函數(shù)晤锥，并能在任何屬性值或?Sass script 中使用：
$grid-width: 40px; $gutter-width: 10px; @function grid-width($n) { @return $n * $grid-width + ($n - 1) * $gutter-width; } #sidebar { width: grid-width(5); }
編譯為
#sidebar { width: 240px; }
與?mixin 相同掉蔬，也可以傳遞若干個(gè)全局變量給函數(shù)作為參數(shù)。一個(gè)函數(shù)可以含有多條語句矾瘾，需要調(diào)用?@return 輸出結(jié)果女轿。
自定義的函數(shù)也可以使用關(guān)鍵詞參數(shù)，上面的例子還可以這樣寫：
#sidebar { width: grid-width($n: 5); }
建議在自定義函數(shù)前添加前綴避免命名沖突壕翩，其他人閱讀代碼時(shí)也會知道這不是?Sass 或者?CSS 的自帶功能蛉迹。
自定義函數(shù)與?mixin 相同，都支持?variable arguments
