想必大家學(xué)習(xí)CSS的時(shí)候一定接觸過LESS和SASS吧，但可能還是有很多朋友對(duì)他們的概念模糊，下面不妨就跟著一起了解一下關(guān)于它們的故事。

目前創(chuàng)新互聯(lián)已為超過千家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)絡(luò)空間、網(wǎng)站托管運(yùn)營(yíng)、企業(yè)網(wǎng)站設(shè)計(jì)、崇川網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。

背景
CSS（層疊樣式表）是一門非程序式語言，入門學(xué)習(xí)使用非常直觀方便，但是對(duì)于一些比較復(fù)雜或者重用性比較強(qiáng)的項(xiàng)目來說，因?yàn)镃SS沒有變量、函數(shù)、SCOPE（作用域），需要書寫大量看似沒有邏輯的代碼，不方便維護(hù)及擴(kuò)展，不利于復(fù)用，尤其對(duì)于非前端開發(fā)工程師來講，往往會(huì)因?yàn)槿鄙?CSS 編寫經(jīng)驗(yàn)而很難寫出組織良好且易于維護(hù)的 CSS 代碼。為了方便前端開發(fā)的工作量，出現(xiàn)了sass和less。
SASS和LESS
SASS（英文全稱：Syntactically Awesome Stylesheets）Sass 誕生于 2007 年，使用Ruby 編寫，是一種對(duì)css的一種擴(kuò)展提升，增加了規(guī)則、變量、混入、選擇器、繼承等等特性?？梢岳斫鉃橛胘s的方式去書寫，然后編譯成css。比如說，sass中可以把反復(fù)使用的css屬性值定義成變量，然后通過變量名來引用它們，而無需重復(fù)書寫這一屬性值。
LESS（2009年開源的一個(gè)項(xiàng)目，受Sass的影響較大，但又使用CSS的語法，讓大部分開發(fā)者和設(shè)計(jì)師更容易上手。LESS保留了css的任何功能，同時(shí)提供了多種方式能平滑的將寫好的代碼轉(zhuǎn)化成標(biāo)準(zhǔn)的CSS代碼，可以在任何使用隨時(shí)切換到css的語法進(jìn)行書寫。
SASS和LESS****使用
傳統(tǒng)的css可以直接被html引用，但是sass和less由于使用了類似JavaScript的方式去書寫，所以必須要經(jīng)過編譯生成css，而html引用只能引用編譯之后的css文件，雖然過程多了一層，但是畢竟sass/less在書寫的時(shí)候就方便很多，所以在我們使用sass/less之前，只要我們提前設(shè)置好，就可以直接生成對(duì)應(yīng)的css文件，而我們只需要關(guān)心我們的sass/less文件即可。
Sass的語法規(guī)則，可以參考下SASS中文網(wǎng)：<u>https://www.sass.hk/</u>。
SASS技術(shù)的文件的后綴名有兩種形式：.sass和.scss。其實(shí)兩者都是同一種東西，兩種均可以可以通過編譯生成瀏覽器能識(shí)別的css文件。這兩種的區(qū)別：
1.
擴(kuò)展名不同；
2.

SCSS 的語法書寫和CSS 語法書寫方式非常類似，.sass文件對(duì)代碼的排版有著非常嚴(yán)格的要求，而且沒有大括號(hào)，沒有分號(hào)；

Sass 語法
$font-stack: Helvetica, sans-serif //定義變量
$primary-color: #333 //定義變量
body
font: 100% $font-stack
color: $primary-color
SCSS 語法
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
編譯出來的 CSS
body {
font: 100% Helvetica, sans-serif;
color: #333;
}
LESS技術(shù)的后綴名只有一種，就是.less，語法規(guī)則和sass大同小異，詳細(xì)可以參考less中文網(wǎng)<u>http://lesscss.cn/</u>。
LESS使用分為兩種：
1.直接在瀏覽器中引入less編譯器js文件和less文件，直接渲染編譯為css文應(yīng)用到當(dāng)前頁面中。
2.less文件通過編譯成為css之后引用css；
/ Less/
@color: #999;

@bgColor: skyblue;//不要添加引號(hào)

@width: 50%;

#wrap {
color: @color;
width: @width;
}
/ 生成后的 CSS/
#wrap {

color: #999;

width: 50%;
}

通過對(duì)比，想必你已經(jīng)大概了解了這幾門語言，接下來的研究，就交給你自己了。當(dāng)然，你也可以繼續(xù)關(guān)注我，今后我還會(huì)提供更多的教學(xué)，希望能夠幫助你更進(jìn)一步。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)cdcxhl.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

本文名稱：淺談Css、less和Sass（SCSS）-創(chuàng)新互聯(lián)
文章URL：http://www.rwnh.cn/article20/ddcsco.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供手機(jī)網(wǎng)站建設(shè)、小程序開發(fā)、網(wǎng)站制作、做網(wǎng)站、網(wǎng)站設(shè)計(jì)公司、網(wǎng)頁設(shè)計(jì)公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)