浅谈sass与less区别优缺点
生活随笔
收集整理的這篇文章主要介紹了
浅谈sass与less区别优缺点
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
Sass是一種動(dòng)態(tài)樣式語(yǔ)言，Sass語(yǔ)法的縮排語(yǔ)法，比Css比多出很多功能，如變量，嵌套，運(yùn)算，繼承，顏色處理，函數(shù)等，易于閱讀。Cass的安裝需要安裝Ruby環(huán)境，是服務(wù)器端處理的，Less是需要引入Less.js來(lái)處理代碼輸出css到瀏覽器，也可以在開(kāi)發(fā)環(huán)節(jié)使用Less,然后編譯成css文件，直接放在項(xiàng)目中，有l(wèi)ess.app、SimpleLess、CodeKit.app這樣的工具，也有在線(xiàn)編輯地址。
我偶然發(fā)現(xiàn)LESS之后我就開(kāi)始堅(jiān)定的使用它了。CSS本身對(duì)我來(lái)說(shuō)從來(lái)不是問(wèn)題，但是我很好奇使用變量來(lái)沿著一個(gè)調(diào)色盤(pán)為我的網(wǎng)站或模板創(chuàng)建一些東西的想法。擁有一個(gè)提供固定數(shù)量選項(xiàng)可選的色盤(pán)可以讓我避免顏色太跳躍以至于從一個(gè)已定的風(fēng)格中脫離。
事實(shí)證明，LESS——以及Sass——功能比這個(gè)要多太多。LESS和Sass在語(yǔ)法上有些共性，比如下面這些：
● 混入(Mixins)——class中的class；
● 參數(shù)混入——可以傳遞參數(shù)的class，就像函數(shù)一樣；
● 嵌套規(guī)則——Class中嵌套class，從而減少重復(fù)的代碼；
● 運(yùn)算——CSS中用上數(shù)學(xué)；
● 顏色功能——可以編輯顏色；
● 名字空間(namespace)——分組樣式，從而可以被調(diào)用；
● 作用域——局部修改樣式；
● JavaScript 賦值——在CSS中使用JavaScript表達(dá)式賦值。
LESS和Sass的主要不同就是他們的實(shí)現(xiàn)方式，LESSS是基于JavaScript，所以，是在客戶(hù)端處理的。
另一方面，Sass是基于Ruby的，然后是在服務(wù)器端處理的。很多開(kāi)發(fā)者不會(huì)選擇LESS因?yàn)镴avaScript引擎需要額外的時(shí)間來(lái)處理代碼然后輸出修改過(guò)的CSS到瀏覽器。關(guān)于這個(gè)有很多種方式，我選擇的是只在開(kāi)發(fā)環(huán)節(jié)使用LESS。一旦我完成了開(kāi)發(fā)，我就復(fù)制然后粘貼LESS輸出的到一個(gè)壓縮器，然后到一個(gè)單獨(dú)的CSS文件來(lái)替代LESS文件。另一個(gè)選擇是使用LESS.app來(lái)編譯和壓縮你的LESS文件。兩個(gè)選擇都將最小化你的樣式輸出，從而避免由于用戶(hù)的瀏覽器不支持JavaScript而可能引起的任何問(wèn)題。盡管這不大可能，但終歸是有可能的。
LESS Is More
介紹
在你的項(xiàng)目中引入LESS很簡(jiǎn)單：
1.下載less.js;
2.創(chuàng)建一個(gè)文件來(lái)放你的樣式，比如style.less;
3.添加以下代碼到你的HTML的<head>中:
<link rel="stylesheet/less" type="text/css" href="styles.less">?
變量
如果你是個(gè)開(kāi)發(fā)者，變量應(yīng)該是你最好的朋友。如果你要重復(fù)的使用一個(gè)信息(本例中就是color)，將它設(shè)置為一個(gè)變量就可以。這樣，你就可以保證自己的一致性并可能減少滾動(dòng)代碼來(lái)查找顏色值、復(fù)制、粘貼等繁瑣的工作了。你甚至可以加或者減一些你需要渲染的HEX值到這些顏色上面。看下例子：
@blue: #00c; ?
@light_blue: @blue + #333; ?
@dark_blue: @blue - #333;?
如果我們將這些樣式應(yīng)用到3個(gè)div上面，我們就可以看到由加上和減掉的HEX值形成的漸變的效果：
從@light_blue到@blue到@dark_blue的漸變效果
關(guān)于變量在LESS和Sass中的唯一區(qū)別就是，LESS用@，Sass用$。同時(shí)還有一些作用域上的差別，我后面會(huì)提到。
混入(mixin)
偶爾，我們會(huì)創(chuàng)建一些會(huì)在樣式表中重復(fù)使用的樣式規(guī)則。沒(méi)有人會(huì)阻止你在一個(gè)HTML的元素中使用多個(gè)class，但是你可以用LESS，在樣式表中完成。為了描述這一點(diǎn)，我寫(xiě)了一點(diǎn)兒例子：
.border { ?
? ? border-top: 1px dotted #333; ?
} ?
article.post { ?
? ? background: #eee; ?
? ? .border; ?
} ?
ul.menu { ?
? ? background: #ccc; ?
? ? .border; ?
}?
我偶然發(fā)現(xiàn)LESS之后我就開(kāi)始堅(jiān)定的使用它了。CSS本身對(duì)我來(lái)說(shuō)從來(lái)不是問(wèn)題，但是我很好奇使用變量來(lái)沿著一個(gè)調(diào)色盤(pán)為我的網(wǎng)站或模板創(chuàng)建一些東西的想法。擁有一個(gè)提供固定數(shù)量選項(xiàng)可選的色盤(pán)可以讓我避免顏色太跳躍以至于從一個(gè)已定的風(fēng)格中脫離。
事實(shí)證明，LESS——以及Sass——功能比這個(gè)要多太多。LESS和Sass在語(yǔ)法上有些共性，比如下面這些：
● 混入(Mixins)——class中的class；
● 參數(shù)混入——可以傳遞參數(shù)的class，就像函數(shù)一樣；
● 嵌套規(guī)則——Class中嵌套class，從而減少重復(fù)的代碼；
● 運(yùn)算——CSS中用上數(shù)學(xué)；
● 顏色功能——可以編輯顏色；
● 名字空間(namespace)——分組樣式，從而可以被調(diào)用；
● 作用域——局部修改樣式；
● JavaScript 賦值——在CSS中使用JavaScript表達(dá)式賦值。
LESS和Sass的主要不同就是他們的實(shí)現(xiàn)方式，LESSS是基于JavaScript，所以，是在客戶(hù)端處理的。
另一方面，Sass是基于Ruby的，然后是在服務(wù)器端處理的。很多開(kāi)發(fā)者不會(huì)選擇LESS因?yàn)镴avaScript引擎需要額外的時(shí)間來(lái)處理代碼然后輸出修改過(guò)的CSS到瀏覽器。關(guān)于這個(gè)有很多種方式，我選擇的是只在開(kāi)發(fā)環(huán)節(jié)使用LESS。一旦我完成了開(kāi)發(fā)，我就復(fù)制然后粘貼LESS輸出的到一個(gè)壓縮器，然后到一個(gè)單獨(dú)的CSS文件來(lái)替代LESS文件。另一個(gè)選擇是使用LESS.app來(lái)編譯和壓縮你的LESS文件。兩個(gè)選擇都將最小化你的樣式輸出，從而避免由于用戶(hù)的瀏覽器不支持JavaScript而可能引起的任何問(wèn)題。盡管這不大可能，但終歸是有可能的。
LESS Is More
介紹
在你的項(xiàng)目中引入LESS很簡(jiǎn)單：
1.下載less.js;
2.創(chuàng)建一個(gè)文件來(lái)放你的樣式，比如style.less;
3.添加以下代碼到你的HTML的<head>中:
<link rel="stylesheet/less" type="text/css" href="styles.less">?
<script src="less.js" type="text/javascript"></script>?
請(qǐng)注意link的rel屬性。你需要在屬性值的最后面使用/less以使LESS起作用。然后在link后面引入scirpt也是必須的。如果你在用HTML5語(yǔ)法——為什么不用呢？——你可以省去type=”text/css”和type=”text/javascript”。
其實(shí)也有一個(gè)服務(wù)器端的LESS版本。在服務(wù)器上安裝LESS的最簡(jiǎn)單的辦法就是使用Node Package Manager (NPM，一看就知道是基于Node.js的)。變量
如果你是個(gè)開(kāi)發(fā)者，變量應(yīng)該是你最好的朋友。如果你要重復(fù)的使用一個(gè)信息(本例中就是color)，將它設(shè)置為一個(gè)變量就可以。這樣，你就可以保證自己的一致性并可能減少滾動(dòng)代碼來(lái)查找顏色值、復(fù)制、粘貼等繁瑣的工作了。你甚至可以加或者減一些你需要渲染的HEX值到這些顏色上面。看下例子：
@blue: #00c; ?
@light_blue: @blue + #333; ?
@dark_blue: @blue - #333;?
如果我們將這些樣式應(yīng)用到3個(gè)div上面，我們就可以看到由加上和減掉的HEX值形成的漸變的效果：
從@light_blue到@blue到@dark_blue的漸變效果
關(guān)于變量在LESS和Sass中的唯一區(qū)別就是，LESS用@，Sass用$。同時(shí)還有一些作用域上的差別，我后面會(huì)提到。
混入(mixin)
偶爾，我們會(huì)創(chuàng)建一些會(huì)在樣式表中重復(fù)使用的樣式規(guī)則。沒(méi)有人會(huì)阻止你在一個(gè)HTML的元素中使用多個(gè)class，但是你可以用LESS，在樣式表中完成。為了描述這一點(diǎn)，我寫(xiě)了一點(diǎn)兒例子：
.border { ?
? ? border-top: 1px dotted #333; ?
} ?
article.post { ?
? ? background: #eee; ?
? ? .border; ?
} ?
ul.menu { ?
? ? background: #ccc; ?
? ? .border; ?
}?
總結(jié)
以上是生活随笔為你收集整理的浅谈sass与less区别优缺点的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： SQL分类：DDL/DML/DQL/DC
- 下一篇： Oracle存储过程procedure与