淺談sass與less區別優缺點
阿新 • • 發佈：2019-02-12
Sass是一種動態樣式語言，Sass語法的縮排語法，比Css比多出很多功能，如變數，巢狀，運算，繼承，顏色處理，函式等，易於閱讀。Cass的安裝需要安裝Ruby環境，是伺服器端處理的，Less是需要引入Less.js來處理程式碼輸出css到瀏覽器，也可以在開發環節使用Less,然後編譯成css檔案，直接放在專案中，有less.app、SimpleLess、CodeKit.app這樣的工具，也有線上編輯地址。
我偶然發現LESS之後我就開始堅定的使用它了。CSS本身對我來說從來不是問題，但是我很好奇使用變數來沿著一個調色盤為我的網站或模板建立一些東西的想法。擁有一個提供固定數量選項可選的色盤可以讓我避免顏色太跳躍以至於從一個已定的風格中脫離。
事實證明，LESS——以及Sass——功能比這個要多太多。LESS和Sass在語法上有些共性，比如下面這些：
● 混入(Mixins)——class中的class；
● 引數混入——可以傳遞引數的class，就像函式一樣；
● 巢狀規則——Class中巢狀class，從而減少重複的程式碼；
● 運算——CSS中用上數學；
● 顏色功能——可以編輯顏色；
● 名字空間(namespace)——分組樣式，從而可以被呼叫；
● 作用域——區域性修改樣式；
● JavaScript 賦值——在CSS中使用JavaScript表示式賦值。
LESS和Sass的主要不同就是他們的實現方式，LESSS是基於JavaScript，所以，是在客戶端處理的。
另一方面，Sass是基於Ruby的，然後是在伺服器端處理的。很多開發者不會選擇LESS因為JavaScript引擎需要額外的時間來處理程式碼然後輸出修改過的CSS到瀏覽器。關於這個有很多種方式，我選擇的是隻在開發環節使用LESS。一旦我完成了開發，我就複製然後貼上LESS輸出的到一個壓縮器，然後到一個單獨的CSS檔案來替代LESS檔案。另一個選擇是使用LESS.app來編譯和壓縮你的LESS檔案。兩個選擇都將最小化你的樣式輸出，從而避免由於使用者的瀏覽器不支援JavaScript而可能引起的任何問題。儘管這不大可能，但終歸是有可能的。
LESS Is More
介紹
在你的專案中引入LESS很簡單：
1.下載less.js;
2.建立一個檔案來放你的樣式，比如style.less;
3.新增以下程式碼到你的HTML的<head>中:
<link rel="stylesheet/less" type="text/css" href="styles.less">
變數
如果你是個開發者，變數應該是你最好的朋友。如果你要重複的使用一個資訊(本例中就是color)，將它設定為一個變數就可以。這樣，你就可以保證自己的一致性並可能減少滾動程式碼來查詢顏色值、複製、貼上等繁瑣的工作了。你甚至可以加或者減一些你需要渲染的HEX值到這些顏色上面。看下例子：
@blue: #00c;
@light_blue: @blue + #333;
@dark_blue: @blue - #333;
如果我們將這些樣式應用到3個div上面，我們就可以看到由加上和減掉的HEX值形成的漸變的效果：
從@light_blue到@blue到@dark_blue的漸變效果
關於變數在LESS和Sass中的唯一區別就是，LESS用@，Sass用$。同時還有一些作用域上的差別，我後面會提到。
混入(mixin)
偶爾，我們會建立一些會在樣式表中重複使用的樣式規則。沒有人會阻止你在一個HTML的元素中使用多個class，但是你可以用LESS，在樣式表中完成。為了描述這一點，我寫了一點兒例子：
.border {
border-top: 1px dotted #333;
}
article.post {
background: #eee;
.border;
}
ul.menu {
background: #ccc;
.border;
}
我偶然發現LESS之後我就開始堅定的使用它了。CSS本身對我來說從來不是問題，但是我很好奇使用變數來沿著一個調色盤為我的網站或模板建立一些東西的想法。擁有一個提供固定數量選項可選的色盤可以讓我避免顏色太跳躍以至於從一個已定的風格中脫離。
事實證明，LESS——以及Sass——功能比這個要多太多。LESS和Sass在語法上有些共性，比如下面這些：
● 混入(Mixins)——class中的class；
● 引數混入——可以傳遞引數的class，就像函式一樣；
● 巢狀規則——Class中巢狀class，從而減少重複的程式碼；
● 運算——CSS中用上數學；
● 顏色功能——可以編輯顏色；
● 名字空間(namespace)——分組樣式，從而可以被呼叫；
● 作用域——區域性修改樣式；
● JavaScript 賦值——在CSS中使用JavaScript表示式賦值。
LESS和Sass的主要不同就是他們的實現方式，LESSS是基於JavaScript，所以，是在客戶端處理的。
另一方面，Sass是基於Ruby的，然後是在伺服器端處理的。很多開發者不會選擇LESS因為JavaScript引擎需要額外的時間來處理程式碼然後輸出修改過的CSS到瀏覽器。關於這個有很多種方式，我選擇的是隻在開發環節使用LESS。一旦我完成了開發，我就複製然後貼上LESS輸出的到一個壓縮器，然後到一個單獨的CSS檔案來替代LESS檔案。另一個選擇是使用LESS.app來編譯和壓縮你的LESS檔案。兩個選擇都將最小化你的樣式輸出，從而避免由於使用者的瀏覽器不支援JavaScript而可能引起的任何問題。儘管這不大可能，但終歸是有可能的。
LESS Is More
介紹
在你的專案中引入LESS很簡單：
1.下載less.js;
2.建立一個檔案來放你的樣式，比如style.less;
3.新增以下程式碼到你的HTML的<head>中:
<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>
請注意link的rel屬性。你需要在屬性值的最後面使用/less以使LESS起作用。然後在link後面引入scirpt也是必須的。如果你在用HTML5語法——為什麼不用呢？——你可以省去type=”text/css”和type=”text/javascript”。
變數
如果你是個開發者，變數應該是你最好的朋友。如果你要重複的使用一個資訊(本例中就是color)，將它設定為一個變數就可以。這樣，你就可以保證自己的一致性並可能減少滾動程式碼來查詢顏色值、複製、貼上等繁瑣的工作了。你甚至可以加或者減一些你需要渲染的HEX值到這些顏色上面。看下例子：
@blue: #00c;
@light_blue: @blue + #333;
@dark_blue: @blue - #333;
如果我們將這些樣式應用到3個div上面，我們就可以看到由加上和減掉的HEX值形成的漸變的效果：
從@light_blue到@blue到@dark_blue的漸變效果
關於變數在LESS和Sass中的唯一區別就是，LESS用@，Sass用$。同時還有一些作用域上的差別，我後面會提到。
混入(mixin)
偶爾，我們會建立一些會在樣式表中重複使用的樣式規則。沒有人會阻止你在一個HTML的元素中使用多個class，但是你可以用LESS，在樣式表中完成。為了描述這一點，我寫了一點兒例子：
.border {
border-top: 1px dotted #333;
}
article.post {
background: #eee;
.border;
}
ul.menu {
background: #ccc;
.border;
}