定義： less是一種動態樣式語言，對css賦予了動態語言的特性，比如變數、繼承、運算、函數，既可以運行在客戶端，也可以運行在伺服器端，依賴JavaScript sass是一種動態語言，屬於縮排語法，比css多出很多功能，比如變數、嵌套、運算、混入、繼承、函數等，更容易閱讀； sass與scss關係 ...
定義：
less是一種動態樣式語言，對css賦予了動態語言的特性，比如變數、繼承、運算、函數，既可以運行在客戶端，也可以運行在伺服器端，依賴JavaScript sass是一種動態語言，屬於縮排語法，比css多出很多功能，比如變數、嵌套、運算、混入、繼承、函數等，更容易閱讀； sass與scss關係：sass的縮排語法，對於閱讀者很不直觀，因此sass對語法進行改良，sass3就變成scss，與原來的語法相容，只是用{}取代了原來的縮進 為什麼要使用less和sass： 因為css只是單純的屬性描述，並不具有變數、條件語句等，css的特性導致了它難組織和維護。 less與sass相同之處： 1.混入 class中的class 2.參數混入 可以傳遞參數的class 3.嵌套規則 class中嵌套class，從而減少重覆的代碼 4.運算 使用數學 5.顏色功能 可以編輯顏色 6.名字空間 7.作用域-局部修改樣式 8.JavaScript賦值，在css中使用JavaScript表達式賦值 區別之處： 1.less基於JavaScript，是在客戶端處理的 很多開發者不會選擇Less因為javaScript引擎需要額外的時間來處理代碼然後輸出修改過的Css到瀏覽器， 【解決：只在開發階段使用Less,一旦開發完成，複製Less輸出的到一個壓縮器，然後用一個單獨的css文件來代替Less文件；另一種方式是使用Less App來編譯和壓縮你的Less文件；這兩種方式都是最小化樣式輸出】 2.sass是基於ruby的，是在伺服器端處理的 變數在less和sass中唯一的區別就是，less使用@，sass使用$ 3.變數、使用方面的區別 less: 1.變數： 使用@變數名：變數值 2.混合：無參混合，代參混合 3.less的匹配模式，會根據調用時提供的條件只尋找與之匹配的mixins執行，其中@_表示永遠需要執行的部分 4.less中的運算，加減乘除可帶、可不帶單位；顏色運算時，分紅綠藍三組進行運算，組內可進位，組間互不幹涉 5.包含了傳進來的所有參數：border：@arguments； 6.less中的嵌套保留了html的代碼結構 1）嵌套預設是後代選擇器，如果需要子代選擇器，則在子代前加>2）.&表示上一層 &：表示上一層的hover事件 sass： 1.使用$變數名：變數值，如果變數需要需要在字元中嵌套，則需使用#加大括弧包裹 ：border-#{$left}:10px solid #ccc; 2.會使用單位 3.嵌套：選擇器嵌套 偽類嵌套 屬性嵌套 選擇器嵌套 ul{li{}} 後代 ul{>li{}}子代 &表示上一級 屬性嵌套：屬性名與大括弧之間必須有： border：{color：red} 4、混合巨集、繼承、占位符 ①混合巨集：聲明：@mixin name($param:value){} 調用：@include name(value); >>>聲明時，可以有參，可以無參；可帶預設值，也可不帶；但是，調用時，必須符合聲明規範。同less >>>優點；可以傳參，不會生成同名class； >>>缺點：會將混合巨集中的代碼，copy到對應的選擇器中，產生冗餘代碼！②繼承：聲明：.class{} 調用：@extend .class; >>>優點：繼承的相同代碼，會提取到並集選擇器中，減少冗餘代碼 >>>缺點：無法進行傳參，會在css中，生成一個同名class
③占位符：聲明：&class{} 調用：@extend %class; >>>優點：繼承相同代碼，會提前到並集選擇器；不會生成同名的class選擇器 >>>缺點：無法進行傳參 綜上所述：當需要傳遞參數時，用混合巨集；當有現成的class時用繼承；當不需要參數，也不需要class時，用占位符
5、if條件結構： @if 條件{} @else{} 6、for迴圈結構： @for $i from 1 to 10{} 不包含10; @for $i from 1 through 10{} 包含10; 7、while迴圈結構： $j:1; @while $j<10{ .while#{$j}{ border:#{$j}px solid red; } $j:$j+1; } 8、each迴圈遍歷 @each item in a,b,c,d{ //item表示每一項 } 9、函數： @function func($length){ $length1:$length*5; @return $length1; } 調用：func(10px); 10、使用...將傳進來的所有參數，接收到一個變數中 @mixin bordeRadius($param1...){ //使用...將傳進來的所有參數，接收到一個變數中 border-radius:$param1; -webkit-border-radius:$param1; }
