LESS
less的編譯
$ npm install -g less
$ lessc styles.less
$ lessc styles.less > styles.css
在命令行中可以進(jìn)行如上操作
我的 Mac一定是一定是抽風(fēng)了２湛ā！轮锥！
$ npm install less
$ sudo npm install -g less
$ lessc style.less > styles.css
這樣才可以
less特性及語(yǔ)法
變量——Variables
- 用@color來(lái)定義一些變量
- less中的變量只能定義一次，前后重復(fù)會(huì)被覆蓋
- 變量可以進(jìn)行計(jì)算
- 變量的范圍Scope要尔，向上就近原則舍杜，自身有就用自身的新娜，自身沒(méi)有就找父類(lèi)中次變量
混入——Mixins
- 就像函數(shù)一樣，可以額外定義一個(gè)類(lèi)既绩，類(lèi)里面可以有選擇的填寫(xiě)默認(rèn)參數(shù)概龄，應(yīng)用到另一個(gè)類(lèi)中
- 可以混入?yún)?shù)，這個(gè)與默認(rèn)參數(shù)相比較來(lái)說(shuō)的
- @arguments是一個(gè)很特殊的參數(shù)饲握，相當(dāng)于js中的arguments參數(shù)私杜，可以先暫時(shí)替代實(shí)參
嵌套規(guī)則——Nested Rules
- 針對(duì)多層元素來(lái)說(shuō)的，以前需要加上class或者id救欧，要不然就是從高層一層一層的選擇下來(lái)衰粹，現(xiàn)在可以進(jìn)行l(wèi)ess中的嵌套。
- &是一個(gè)很特殊的值笆怠，&指的是同一個(gè)元素或者偽類(lèi)铝耻，沒(méi)有&指的是后代元素
Functions & Operations
- Operations幫助css的屬性，尤其是顏色蹬刷，數(shù)字瓢捉，屬性進(jìn)行四則運(yùn)算的功能。
- Functions 中有Color Functions办成，<p style="color:red;">這個(gè)仍然不是太懂</p>
命名空間
- 經(jīng)常使用某一段代碼泡态，要先封裝起來(lái)，之后用『 > 』調(diào)用就可以了
Less的注解——Comments
- 注釋和js中注釋方式一樣
客戶(hù)端的使用——Client-side usage
- 先<link>導(dǎo)入你的less文件
- 之后用<script>導(dǎo)入一個(gè)名叫"less.js"的文件
- less.js文件下載地址
SASS
參考資料：
sass在gulp中的使用
阮一峰sass手冊(cè)
sass在線轉(zhuǎn)換
sass官網(wǎng)教程
- 注意使用scss文件后綴
- 變量用$來(lái)定義
- 父選擇器的標(biāo)識(shí)符&
- 子組合選擇器和同層組合選擇器：>迂卢、+和~
- sass也有一個(gè)@import規(guī)則兽赁，但不同的是，sass的@import規(guī)則在生成css文件時(shí)就把相關(guān)文件導(dǎo)入進(jìn)來(lái)冷守。這意味著所有相關(guān)的樣式被歸納到
了同一個(gè)css文件中刀崖，而無(wú)需發(fā)起額外的下載請(qǐng)求。另外拍摇，所有在被導(dǎo)入文件中定義的變量和混合器（參見(jiàn)2.5節(jié)）均可在導(dǎo)入文件中使用。 - 混合器@mixin
- 靜默注釋
- @extend選擇器繼承
