溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

ESS和Sass的基本特性及區(qū)別是什么

發(fā)布時間：2020-09-10 10:46:49 來源：億速云 閱讀：151 作者：小新 欄目：web開發(fā)

這篇文章主要介紹ESS和Sass的基本特性及區(qū)別是什么，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

最近接觸了Bootstrap，涉及到了LESS，CSS的預(yù)處理器使用最廣泛的就是LESS和Sass，都是努力把CSS武裝成為開發(fā)語言，讓它從簡單的描述性語言過渡到具有程序式特性的語言，主要的特性就是：變量、Mixins、嵌套、繼承等。就像教程里說的：CSS的預(yù)處理器就是讓CSS從設(shè)計師的工具，變?yōu)殚_發(fā)人員的工具。但是看完之后覺得，作為對CSS研究尚不透徹的前端小生，我最好還是不要高攀，況且在我目前的項目中拿LESS來寫CSS有點兒殺雞用牛刀的感覺。但回過頭來說，技不壓身。。。bulabulabula~~好了，且正題，摘了一篇非常不錯的干貨，分享給大家：非常明晰地介紹一下LESS和Sass的基本特性他們的區(qū)別。

事實證明，LESS——以及Sass——功能比這個要多太多。LESS和Sass在語法上有些共性，比如下面這些：

● 混入(Mixins)——class中的class；

● 參數(shù)混入——可以傳遞參數(shù)的class，就像函數(shù)一樣；

● 嵌套規(guī)則——Class中嵌套class，從而減少重復(fù)的代碼；

● 運算——CSS中用上數(shù)學(xué)；

● 顏色功能——可以編輯顏色；

● 名字空間(namespace)——分組樣式，從而可以被調(diào)用；

● 作用域——局部修改樣式；

● JavaScript 賦值——在CSS中使用JavaScript表達式賦值。

LESS和Sass的主要不同就是他們的實現(xiàn)方式，LESSS是基于JavaScript，所以，是在客戶端處理的。

另一方面，Sass是基于Ruby的，然后是在服務(wù)器端處理的。很多開發(fā)者不會選擇LESS因為JavaScript引擎需要額外的時間來處理代碼然后輸出修改過的CSS到瀏覽器。關(guān)于這個有很多種方式，我選擇的是只在開發(fā)環(huán)節(jié)使用LESS。一旦我完成了開發(fā)，我就復(fù)制然后粘貼LESS輸出的到一個壓縮器，然后到一個單獨的CSS文件來替代LESS文件。另一個選擇是使用koala來編譯和壓縮你的LESS文件。兩個選擇都將最小化你的樣式輸出，從而避免由于用戶的瀏覽器不支持JavaScript而可能引起的任何問題。

LESS Is More

介紹

在你的項目中引入LESS很簡單：

1.下載less.js;

2.創(chuàng)建一個文件來放你的樣式，比如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”。

變量

如果你是個開發(fā)者，變量應(yīng)該是你最好的朋友。如果你要重復(fù)的使用一個信息(本例中就是color)，將它設(shè)置為一個變量就可以。這樣，你就可以保證自己的一致性并可能減少滾動代碼來查找顏色值、復(fù)制、粘貼等繁瑣的工作了。你甚至可以加或者減一些你需要渲染的HEX值到這些顏色上面?？聪吕樱?/p>

 @blue: #00c;
 @light_blue: @blue + #333;
 @dark_blue: @blue - #333;

關(guān)于變量在LESS和Sass中的唯一區(qū)別就是，LESS用@，Sass用$。同時還有一些作用域上的差別，我后面會提到。

混入(mixin)

偶爾，我們會創(chuàng)建一些會在樣式表中重復(fù)使用的樣式規(guī)則。沒有人會阻止你在一個HTML的元素中使用多個class，但是你可以用LESS，在樣式表中完成。為了描述這一點，我寫了一點兒例子：

.border {
    border-top: 1px dotted #333;
}
article.post {
    background: #eee;
    .border;
}
ul.menu {
    background: #ccc;
    .border;
}

在Sass中，你要在樣式規(guī)則前面添加@mixin聲明，規(guī)定它是個嵌套。然后，通過@include來調(diào)用它：

@mixin border {
 border-top: 1px dotted #333;
}
article.post {
 background: #eee;
 @include border;
}
ul.menu {
 background: #ccc;
 @include border;
}

參數(shù)混入

就像在CSS中有函數(shù)功能一樣，這些對于那些在現(xiàn)在的CSS工作中多余的工作非常有用。最好和最有用的例子就是我們正在經(jīng)歷的從CSS2到CSS3過渡過程中的很多瀏覽器私有前綴。Nettuts+有一篇Jeffrey Way寫的很贊的視頻和文章，內(nèi)容是包含著由有用的參數(shù)組成的文件，他們涵蓋了大部分使用各個瀏覽器私有前綴的CSS3屬性。例如，在他們的格式中，一個簡單的處理圓角的mixin是這樣的：

.border-radius( @radius: 3px ) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}

在這個例子中，.border-radius有個默認的3px的圓角，但是你可以使用你需要的任何值。.border-radius(10px)將會生成半徑為10px的圓角。

Sass中的語法很像LESS，只是使用$聲明變量，然后使用前面提到的@mixin和@include來調(diào)用。

選擇器繼承

這個東西LESS并沒有提供。通過這個功能，你可以將一個選擇器附加到已經(jīng)預(yù)先定義的選擇器上，而無需再使用逗號將兩者分開的寫法了：

.menu {
    border: 1px solid #ddd;
}
.footer {
    @extend .menu;
} 

/* 上面的寫法規(guī)則和下面的效果是一樣的： */
.menu, .footer {
    border: 1px solid #ddd;
}

嵌套規(guī)則

在css中嵌套class和ID是避免你的樣式干擾或者被別的樣式干擾的唯一方法了。但是這可能會很凌亂。使用一個類似于#site-body .post .post-header h3 的選擇器毫無吸引力而且會占用大量不必要的空格。使用LESS，你可以嵌套id、class以及標簽。對于前面提到的例子，你可以這樣寫：

#site-body { …
    .post { …
        .post-header { …
            h3 { … }
            a { …
                &amp;:visited { … }
                &amp;:hover { … }
            }
        }
    }
}

上面的代碼最終和上面的例子（那一長串的選擇器）的效果一樣，但是要更容易閱讀和理解的多，而且它占用很少的空間。你也可以通過&來引用元素樣式到他們的偽元素上，該功能類似于JavaScript中的this。

運算

這可能是你所期望的：使用數(shù)字或者變量在你的樣式表中實現(xiàn)數(shù)學(xué)運算！

@base_margin: 10px;
@double_margin: @base_margin * 2;
@full_page: 960px;
@half_page: @full_page / 2;
@quarter_page: (@full_page / 2) / 2;

聲明下，我也意識到我可以除以4來獲得@quarter_page變量，但是這里我只是想要演示下圓括號組成“運算順序”在這里也是可以用的。在使用簡寫的規(guī)則中，小括號也是必須的，比如 border: (@width / 2) solid #000。

Sass在數(shù)字上比LESS更專業(yè)。它已經(jīng)可以換算單位了。Sass可以處理無法識別的度量單位并將其輸出。這個特性很明顯是一個對未來的嘗試——證明W3C作出的一些改變。

/* Sass */
2in + 3cm + 2pc = 3.514in
/* LESS */
2in + 3cm + 2pc = Error

Color函數(shù)

在文章開頭，我提到了LESS如何幫我在編碼過程中處理圍繞著一個調(diào)色板。對此貢獻最大的一部分就是顏色函數(shù)。加入你用一個標準的藍色貫穿到你的樣式中，然后你想要在表單中用這個藍色來做一個漸變的按鈕。你可以打開Photoshop或者其它的編輯器來獲取一個比藍色較淺的或者較暗的HEX色值來作為漸變色。或者，你可以只是使用LESS中的顏色函數(shù)。

@blue: #369;

.submit {
    padding: 5px 10px;
    border: 1px solid @blue;
    background: -moz-linear-gradient(top, lighten(@blue, 10%), @blue 100%); /*Moz*/
    background: -webkit-gradient(linear, center top, center bottom, from(lighten(@blue,10%)), color-stop(100%, @blue)); /*Webkit*/
    background: -o-linear-gradient(top, lighten(@blue, 10%) 0%, @blue 100%);/*Opera*/
    background: -ms-linear-gradient(top, lighten(@blue, 10%) 0%, @blue 100%); /*IE 10+*/
    background: linear-gradient(top, lighten(@blue, 10%) 0%, @blue 100%); /*W3C*/
    color: #fff;
    text-shadow: 0 -1px 1px rgba(0,0,0,0.4);
}

lighten函數(shù)很明顯就是用百分比值來減輕顏色，在這個例子中，它將減輕這個基礎(chǔ)的藍色的10%。這種方法可以讓我們變化的元素或者其它任何元素的顏色值——只是簡單的改變基礎(chǔ)顏色而已。這對于主題(模板)來說非常有用。而且，如果你使用參數(shù)功能，像上面提到的，你還可以更簡單的應(yīng)用到一些瀏覽器私有前綴的聲明中，比如：.linear-gradient(lighten(@blue), @blue, 100%);。

嗯，最終的效果的確很贊：

ESS和Sass的基本特性及區(qū)別是什么

很贊的漸變的、基于變量的”Submit”按鈕

還有很多其它的色彩函數(shù)，比如變暗或者調(diào)整顏色的飽和度，甚至你可以旋轉(zhuǎn)色盤來使用其它顏色。我建議親自嘗試下你能想出的（用法）。

Sass貌似有更多的選項——但我并不需要這么多。我個人最常用的還是lighten和darken。如果你想了解更多，可以看一下這篇很詳細的介紹。

條件語句與控制

這是一個的確很贊的東東，也是另一個LESS不支持的功能。使用 Sass，你可以使用if { } else { } 條件語句，以及for { }循環(huán)。它甚至支持 and、 or和 not，以及 <、 >、 <=、 >= 和 == 等操作符。

/* Sample Sass "if" statement */
@if lightness($color) &gt; 30% {
    background-color: #000;
} @else {
    background-color: #fff;
}
/* Sample Sass "for" loop */

@for $i from 1px to 10px {
    .border-#{i} {
    border: $i solid blue;
    }
}

名字空間(Namespaces)

名字空間可以用于組織我們的CSS到另一個檔次，我們可以將一些公用的樣式分組，然后在用的時候直接使用。例如，如果我們創(chuàng)建了一個名為default的樣式分組，我們就可以在用到的時候直接從該組中調(diào)用。

#defaults {
    .nav_list () {
        list-style: none;
        margin: 0; padding: 0;
    }
    .button () { … }
    .quote () { … }
}

然后，在我們的代碼中，如果我們正好在一個nav元素中使用了ul元素，我們就會想到我們需要default樣式。那么我們就可以簡單的調(diào)用它，它也會被直接應(yīng)用。

   nav ul {
    #defaults &gt; .nav_list;
      }

作用域

作用域是編程中的標配，LESS中也是。如果你在你樣式表的root級聲明一個變量，它在整個文檔中都是可以用的。然而，如果你在一個選擇器，比如id或者class中，重新定義了這個變量，那么，它就只能在這個選擇器中可用了——當然是重新定義后的新值。

@color: #00c; /* 藍色 */
#header {
    @color: #c00; /* red */
    border: 1px solid @color; /* 紅色邊框 */
}
#footer {
    border: 1px solid @color; /* 藍色邊框 */
}

因為我們在#header中重新定義了color變量，變量的值將會是不同的而且只會在該選擇器中有效。它之前或者之后的所有地方，如果沒有被重新定義，都會保持那個原始的值。

作用域在Sass中稍有不同。在上面的代碼中，當@color變量變?yōu)榧t色后，代碼中，此處之后的該變量的值，將會被重寫（成為紅色）。

注釋

這一部分比較基礎(chǔ)。LESS中允許兩種注釋寫法。標準的CSS注釋，/* comment */，是有效的，而且能夠通過處理并正確輸出。當行注釋，// comment，同樣可以用但是不能夠通過處理也不能被輸出，然后，結(jié)果是，“無聲的”。

導(dǎo)入

導(dǎo)入也相當符合標準。標準的 @import: ‘classes.less’; 處理的很好。然而，如果你想要導(dǎo)入其它的LESS文件，那么文件的擴展名是可選的，所以 @import ‘classes’; 也是可行的。如果你想要導(dǎo)入一些無需LESS處理的內(nèi)容，你可以使用 .css 擴展 (比如， @import: ‘reset.css’;)。

字符串插入

字符串也是可以用于變量中的，然后通過@{name}來調(diào)用。

@base_url : 'www.qianduan.net';

background-image: url("@{base_url}/images/background.png");

轉(zhuǎn)義(Escaping)

可能偶爾會需要引入一個CSS中非法或者LESS無法識別的值。通常是一些IE的hack。要避免拋出異常并破壞LESS，你將需要避開它們。

.class {
    filter: ~"progid:DXImageTransform.Microsoft.Alpha(opacity=20)";

}
/*實際上將會輸出下面的代碼: */
.class {
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=20);

}

JavaScript 賦值

這是LESS中我最中意的部分：在樣式表中使用Javascript——相當精彩。你可以使用表達式，也可以參考環(huán)境方向來使用反單引號。

@string: `'howdy'.toUpperCase()`; /* @string 變成 'HOWDY' */
/* 你也可以使用前面提到的插值： */
@string: 'howdy';
@var: ~`'@{string}'.topUpperCase()`; /* 變?yōu)?'HOWDY' */
/* 獲取文檔的信息 */
@height = `document.body.clientHeight`;

輸出格式

然而LESS并沒有輸出設(shè)置，而Sass提供4中輸出選項：nested, compact, compressed 和 expanded。

以上是ESS和Sass的基本特性及區(qū)別是什么的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手