前言
首先sass和less都是css的預(yù)編譯處理語言，他們引入了mixins诀浪，參數(shù)棋返，嵌套規(guī)則，運算雷猪，顏色睛竣，名字空間，作用域求摇，JavaScript賦值等 加快了css開發(fā)效率,當然這兩者都可以配合gulp和grunt等前端構(gòu)建工具使用
sass和less主要區(qū)別:在于實現(xiàn)方式 less是基于JavaScript的在客戶端處理 所以安裝的時候用npm射沟，sass是基于ruby所以在服務(wù)器處理。
很多開發(fā)者不會選擇LESS因為JavaScript引擎需要額外的時間來處理代碼然后輸出修改過的CSS到瀏覽器月帝。關(guān)于這個有很多種方式躏惋，我選擇的是只在開發(fā)環(huán)節(jié)使用LESS。一旦我完成了開發(fā)嚷辅，我就復(fù)制然后粘貼LESS輸出的到一個壓縮器簿姨，然后到一個單獨的CSS文件來替代LESS文件。另一個選擇是使用LESS.app來編譯和壓縮你的LESS文件簸搞。兩個選擇都將最小化你的樣式輸出扁位，從而避免由于用戶的瀏覽器不支持JavaScript而可能引起的任何問題。盡管這不大可能趁俊，但終歸是有可能的
LESS詳細
首先擴展文件名的格式是 xxx.less
在此推薦大家在練習(xí)環(huán)節(jié)可以用
<script src="less.js"...> 這種方式編譯less
但在實際項目中 還是用命令行的 lessc xxx.less>xxx.css 方式然后引入編譯后的css文件 這樣減少在運行時上面出現(xiàn)的問題
//安裝less
npm install -g less
變量
@變量名:值
@width：100px;
.box{
width:@width;
}
混合
定義classa 然后可以將classa引入到classb中
.classa(a){
width:@width;
}
.classb{
.classa(a);
}
嵌套規(guī)則
父級{
子集
}
函數(shù)和運算
可以將值計算
@the-border: 1px;
@base-color: #111;
@red: #842210;
#header {
color: @base-color * 3;
border-left: @the-border;
border-right: @the-border * 2;
}
#footer {
color: @base-color + #003300;
border-color: desaturate(@red, 10%);
}
SASS詳細
首件擴展文件名的格式是 xxx.scss 或者是 xxx.sass
使用方法: sass xxx.scss xxx.css
編譯風(fēng)格：
nested:嵌套縮進的css代碼域仇，默認
expanded:沒有縮緊的,擴展的css代碼
campact:簡介格式的css代碼
compressed:壓縮后的css代碼(生產(chǎn)環(huán)境)
使用的時候 sass --style compressed xxx.sass xxx.css
監(jiān)聽目錄
sass --watch xxx.scss:xxx.css //監(jiān)聽文件
sass --watch scsspath:csspath //監(jiān)聽文件夾
變量
$變量名:值
$width：100px;
.box{
width:$width;
}
如果變量包含字符串則寫在 #{}之中
$c:color;
.box{
border-#{$c}:red;
}
嵌套計算
less和sass嵌套相同，計算同理
繼承
同less混合相同 定義classa 然后再classb可飲用classa值
//使用方法 定義classa
.classb{
@extend .classa
}
Mixin
即重用代碼塊
//使用方法先用@mixin命令定義一個代碼塊
@mixin left(參數(shù)1寺擂，參數(shù)2){
float:left;
margin-left:10px;
}
//使用@include調(diào)用剛剛定義的代碼塊
.box{
@inclidu left(參數(shù)1暇务，參數(shù)2);
}
顏色函數(shù) lighten(顏色，百分比)
插入文件
@import命令插入外部文件 .scss和css都可
條件語句
//@if 可以用來判斷 @else 則是配套
.box{
@if 1+1>1 {width:100px;}@else {
width:200px;
}
}
循環(huán)語句
//@for @while @each
@for $i from 1 to 10{
border-#{$i}{
border:#{$i}px solid red;
}
}
//@while
$i:6;
@while $i>0{
.item-#{$i}{
width:2em*$i;
}
$i:$i-2;
}
//@each
@each $member in a, b, c, d {
.#{$member} {
background-image: url("/image/#{$member}.jpg");
}
}
自定義函數(shù)
@function name($n){
@return $n*2;
}
.box{
width:name(value);
}
總結(jié)
總體來說sass和less都有各自的好處怔软，這要根據(jù)每個開發(fā)者的習(xí)慣和愛好來使用垦细，都可提高開發(fā)效率，當然還有stylus等工具挡逼，因為目前未使用過所以不做評判括改，個人比較傾向sass，至于比較家坎，兩者都有其優(yōu)缺點嘱能，如果你開發(fā)環(huán)境中并沒有ruby 并且你不想安裝ruby 你就可以使用less，如果你覺得sass的語法你更傾向并且你安裝了ruby 你就可以使用sass虱疏∪锹睿總之工具不重要，碼出一手好代碼才是真理做瞪。
