*學(xué)習(xí)筆記
? ? Sass和Less都屬于css預(yù)處理器，css預(yù)處理器定義了一種新的語言，其基本思想是，用一種專門的編程語言，為css增加了一些編程的特性，如：變量、語句、函數(shù)、繼承等概念。講先試試作為目標(biāo)生成文件，然后開發(fā)者就只要使用這種語言進(jìn)行css的編碼工作。
創(chuàng)建.less或.scss文件會生成對應(yīng)的css文件
語法：
注釋：兩者用法一樣，但是sass的css文件會多出一行@charset?"UTF-8";
//單行注釋不會被編譯出來
/*?
????多行注釋，就是css的注釋方式，會被編譯出來
*/
sass的css文件會多出一行@charset?"UTF-8";
變量：兩者變量符號不同
less使用@定義變量，如@number：123px,可以直接引用
sass使用$定義變量，
//變量
$number:123px;
.box2{
????width:?$number;
????height:?$number;
}
插值：可以在選擇器上或樣式屬性上或?qū)傩灾瞪鲜褂?/h4>
less使用插值用@{key},
sass使用插值用#{$key}
//插值
$key:margin;
$i:3;
.box#{$i}{
????width:?$number;
????height:?$number;
????#{$key}:auto
}
作用域：兩者不同
less作用域,變量查找用就近原則,局部有變量就不會去找外面的變量
@number:123px;
.box4{
????height:?@number;
????@number:456px;
????width:?@number;
}
css文件顯示height:456px;width:456px
sass作用域,變量查找按順序從上到下
@number:123px;
.box4{
????height:?$number;
????$number:456px;
????width:?$number;
}
css文件顯示height:123px;width:456px
選擇器嵌套、偽類嵌套：
less與sass用法完全相同，注意，偽類嵌套要在偽類前加&符號去掉ul與偽類之間的空格
屬性嵌套(Sass)：只有sass有這個功能
運(yùn)算：可進(jìn)行數(shù)值運(yùn)算、顏色運(yùn)算
less與sass有兩點(diǎn)不同
①sass比較嚴(yán)謹(jǐn)，單位不同是不可以進(jìn)行運(yùn)算的
②默認(rèn)/是分割的操作，要進(jìn)行運(yùn)算可以加括號
函數(shù)：預(yù)編譯中會提供很多內(nèi)置的函數(shù)，并不是所有函數(shù)兩者都適用的 ，具體函數(shù)去查看相應(yīng)的API文檔
舉個栗子：
sass還有個特點(diǎn)，他可以自定義函數(shù)
混入：把不同的css組合在一起，less和sass混入方式不同
less混入用法
sass混入，要加@mixin創(chuàng)建，用@include引入
命名空間（Less）：只有Less有這個功能
繼承：兩個盒子有相同樣式時，可以使用繼承來進(jìn)行分組，更節(jié)約代碼。
less的繼承用&:extend();
sass的繼承用@extend；
合并：把多個值合并到一起,兩者不同
less用法
sass用法
媒體查詢：兩者用法相同
條件：
less用法
sass用法
循環(huán)：遞歸思想
less用法
sass用法，提供了for、if、while等語法
導(dǎo)入：把另外一個文件的代碼引入到文件中，兩者用法一樣
