less和sass的介紹和差別
● 混入(Mixins)——class中的class；javascript
● 參數混入——能夠傳遞參數的class，就像函數同樣；css
● 嵌套規則——Class中嵌套class，從而減小重複的代碼；html
● 運算——CSS中用上數學；java
● 顏色功能——能夠編輯顏色；git
● 名字空間(namespace)——分組樣式，從而能夠被調用；github
● 做用域——局部修改樣式；web
● JavaScript 賦值——在CSS中使用JavaScript表達式賦值。npm
LESS和Sass的主要不一樣就是他們的實現方式，LESSS是基於JavaScript，因此，是在客戶端處理的。編程
另外一方面，Sass是基於Ruby的，而後是在服務器端處理的。不少開發者不會選擇LESS由於JavaScript引擎須要額外的時間來處理代碼而後輸出修改過的CSS到瀏覽器。關於這個有不少種方式，我選擇的是隻在開發環節使用LESS。一旦我完成了開發，我就複製而後粘貼LESS輸出的到一個壓縮器，而後到一個單獨的CSS文件來替代LESS文件。另外一個選擇是使用LESS.app來編譯和壓縮你的LESS文件。兩個選擇都將最小化你的樣式輸出，從而避免因爲用戶的瀏覽器不支持JavaScript而可能引發的任何問題。儘管這不大可能，但終歸是有可能的。api
LESS Is More
介紹
在你的項目中引入LESS很簡單：
1.下載less.js;
2.建立一個文件來放你的樣式，好比style.less;
3.添加如下代碼到你的HTML的<head>中:
|
1
2
|
<
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」。
其實也有一個服務器端的LESS版本。在服務器上安裝LESS的最簡單的辦法就是使用Node Package Manager (NPM，一看就知道是基於Node.js的)。
變量
若是你是個開發者，變量應該是你最好的朋友。若是你要重複的使用一個信息(本例中就是color)，將它設置爲一個變量就能夠。這樣，你就能夠保證本身的一致性並可能減小滾動代碼來查找顏色值、複製、粘貼等繁瑣的工做了。你甚至能夠加或者減一些你須要渲染的HEX值到這些顏色上面。看下例子：
|
1
2
3
|
@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，在樣式表中完成。爲了描述這一點，我寫了一點兒例子：
|
1
2
3
4
5
6
7
8
9
10
11
|
.border {
border-top
:
1px
dotted
#333
;
}
article.post {
background
:
#eee
;
.border;
}
ul.menu {
background
:
#ccc
;
.border;
}
|
這能夠給到你與你在兩個元素中分別添加.bordered class一樣的效果——並且僅僅在樣式表中就完成了。並且它工做的很好：
文字和無序列表都被用上了邊框樣式
在Sass中，你要在樣式規則前面添加@mixin聲明，規定它是個嵌套。而後，經過@include來調用它：
|
1
2
3
4
5
6
7
8
9
10
11
|
@mixin border {
border-top
:
1px
dotted
#333
;
}
article.post {
background
:
#eee
;
@include border;
}
ul.menu {
background
:
#ccc
;
@include border;
}
|
參數混入
就像在CSS中有函數功能同樣，這些對於那些在如今的CSS工做中多餘的工做很是有用。最好和最有用的例子就是咱們正在經歷的從CSS2到CSS3過渡過程當中的不少瀏覽器私有前綴。Nettuts+有一篇Jeffrey Way寫的很讚的視頻和文章，內容是包含着由有用的參數組成的文件，他們涵蓋了大部分使用各個瀏覽器私有前綴的CSS3屬性。例如，在他們的格式中，一個簡單的處理圓角的mixin是這樣的：
|
1
2
3
4
5
|
.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來調用。
選擇器繼承
這個東西LESS並無提供。經過這個功能，你能夠將一個選擇器附加到已經預先定義的選擇器上，而無需再使用逗號將二者分開的寫法了：
|
1
2
3
4
5
6
7
8
9
10
11
|
.menu {
border
:
1px
solid
#ddd
;
}
.footer {
@extend .menu;
}
/* 上面的寫法規則和下面的效果是同樣的： */
.menu, .footer {
border
:
1px
solid
#ddd
;
}
|
嵌套規則
在css中嵌套class和ID是避免你的樣式干擾或者被別的樣式干擾的惟一方法了。可是這可能會很凌亂。使用一個相似於#site-body .post .post-header h2 的選擇器毫無吸引力並且會佔用大量沒必要要的空格。使用LESS，你能夠嵌套id、class以及標籤。對於前面提到的例子，你能夠這樣寫：
|
1
2
3
4
5
6
7
8
9
10
11
|
#site-body { …
.post { …
.post-header { …
h
2
{ … }
a { …
&:visited { … }
&:hover { … }
}
}
}
}
|
上面的代碼最終和上面的例子（那一長串的選擇器）的效果同樣，可是要更容易閱讀和理解的多，並且它佔用不多的空間。你也能夠經過&來引用元素樣式到他們的僞元素上，該功能相似於JavaScript中的this。
運算
這多是你所指望的：使用數字或者變量在你的樣式表中實現數學運算！
|
1
2
3
4
5
|
@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變量，可是這裏我只是想要演示下圓括號組成「運算順序」在這裏也是能夠用的。在使用簡寫的規則中，小括號也是必須的，好比 border: (@width / 2) solid #000。
Sass在數字上比LESS更專業。它已經能夠換算單位了。Sass能夠處理沒法識別的度量單位並將其輸出。這個特性很明顯是一個對將來的嘗試——證實W3C做出的一些改變。
|
1
2
3
4
5
|
/* Sass */
2
in +
3
cm +
2
pc =
3.514
in
/* LESS */
2
in +
3
cm +
2
pc = Error
|
Color函數
在文章開頭，我提到了LESS如何幫我在編碼過程當中處理圍繞着一個調色板。對此貢獻最大的一部分就是顏色函數。加入你用一個標準的藍色貫穿到你的樣式中，而後你想要在表單中用這個藍色來作一個漸變的按鈕。你能夠打開Photoshop或者其它的編輯器來獲取一個比藍色較淺的或者較暗的HEX色值來做爲漸變色。或者，你能夠只是使用LESS中的顏色函數。
|
1
2
3
4
5
6
7
8
9
10
11
12
|
@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函數很明顯就是用百分比值來減輕顏色，在這個例子中，它將減輕這個基礎的藍色的10%。這種方法可讓咱們變化的元素或者其它任何元素的顏色值——只是簡單的改變基礎顏色而已。這對於主題(模板)來講很是有用。並且，若是你使用參數功能，像上面提到的，你還能夠更簡單的應用到一些瀏覽器私有前綴的聲明中，好比：.linear-gradient(lighten(@blue), @blue, 100%);。
嗯，最終的效果的確很贊：
很讚的漸變的、基於變量的」Submit」按鈕
還有不少其它的色彩函數，好比變暗或者調整顏色的飽和度，甚至你能夠旋轉色盤來使用其它顏色。我建議親自嘗試下你能想出的（用法）。
Sass貌似有更多的選項——但我並不須要這麼多。我我的最經常使用的仍是lighten和darken。若是你想了解更多，能夠看一下這篇很詳細的介紹。
條件語句與控制
這是一個的確很讚的東東，也是另外一個LESS不支持的功能。使用 Sass，你可使用if { } else { } 條件語句，以及for { }循環。它甚至支持 and、 or和 not，以及 <、 >、 <=、 >= 和 == 等操做符。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
/* Sample Sass "if" statement */
@if lightness($color) >
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到另外一個檔次，咱們能夠將一些公用的樣式分組，而後在用的時候直接使用。例如，若是咱們建立了一個名爲default的樣式分組，咱們就能夠在用到的時候直接從該組中調用。
|
1
2
3
4
5
6
7
8
|
#defa
ults {
.nav_list () {
list-style
:
none
;
margin
:
0
;
padding
:
0
;
}
.button () { … }
.quote () { … }
}
|
而後，在咱們的代碼中，若是咱們正好在一個nav元素中使用了ul元素，咱們就會想到咱們須要default樣式。那麼咱們就能夠簡單的調用它，它也會被直接應用。
|
1
2
3
|
nav ul {
#defa
ults > .nav_list;
}
|
做用域
做用域是編程中的標配，LESS中也是。若是你在你樣式表的root級聲明一個變量，它在整個文檔中都是能夠用的。然而，若是你在一個選擇器，好比id或者class中，從新定義了這個變量，那麼，它就只能在這個選擇器中可用了——固然是從新定義後的新值。
|
1
2
3
4
5
6
7
8
|
@
color
:
#00c
;
/* 藍色 */
#header {
@
color
:
#c00
;
/* red */
border
:
1px
solid
@color;
/* 紅色邊框 */
}
#footer {
border
:
1px
solid
@color;
/* 藍色邊框 */
}
|
由於咱們在#header中從新定義了color變量，變量的值將會是不一樣的並且只會在該選擇器中有效。它以前或者以後的全部地方，若是沒有被從新定義，都會保持那個原始的值。
做用域在Sass中稍有不一樣。在上面的代碼中，當@color變量變爲紅色後，代碼中，此處以後的該變量的值，將會被重寫（成爲紅色）。
註釋
這一部分比較基礎。LESS中容許兩種註釋寫法。標準的CSS註釋，/* comment */，是有效的，並且可以經過處理並正確輸出。當行註釋，// comment，一樣能夠用可是不可以經過處理也不能被輸出，而後，結果是，「無聲的」。
導入
導入也至關符合標準。標準的 @import: ‘classes.less’; 處理的很好。然而，若是你想要導入其它的LESS文件，那麼文件的擴展名是可選的，因此 @import ‘classes’; 也是可行的。若是你想要導入一些無需LESS處理的內容，你可使用 .css 擴展 (好比， @import: ‘reset.css’;)。
字符串插入
字符串也是能夠用於變量中的，而後經過@{name}來調用。
|
1
2
|
@base_url :
'http://www.qianduan.net'
;
background-image
:
url
(
"@{base_url}/images/background.png"
);
|
轉義(Escaping)
可能偶爾會須要引入一個CSS中非法或者LESS沒法識別的值。一般是一些IE的hack。要避免拋出異常並破壞LESS，你將須要避開它們。
|
1
2
3
4
5
6
7
8
|
.class {
filter: ~
"progid:DXImageTransform.Microsoft.Alpha(opacity=20)"
;
}
/*實際上將會輸出下面的代碼: */
.class {
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=
20
);
}
|
JavaScript 賦值
這是LESS中我最中意的部分：在樣式表中使用Javascript——至關精彩。你可使用表達式，也能夠參考環境方向來使用反單引號。
|
1
2
3
4
5
6
7
8
|
@string: `
'howdy'
.toUpperCase()`;
/* @string 變成 'HOWDY' */
/* 你也可使用前面提到的插值： */
@string:
'howdy'
;
@var: ~`
'@{string}'
.topUpperCase()`;
/* 變爲 'HOWDY' */
/* 獲取文檔的信息 */
@height = `document.body.clientHeight`;
|
輸出格式
然而LESS並無輸出設置，而Sass提供4中輸出選項：nested, compact, compressed 和 expanded。
- 1. sass/scss 和 less的區別
- 2. Sass和Less的區別？
- 3. scss和sass，less區別?
- 4. Sass、LESS 和 Stylus
- 5. less 和 sass 配置
- 6. Css、less和Sass（SCSS）
- 7. sass和less的優缺點
- 8. Sass Scss Less快速開發工具之Compass和EST介紹
- 9. Sass, LESS, Stylus區別
- 10. Gulp 編譯Less和Sass
- 更多相關文章...
- • XLink 和 XPointer 簡介 - XLink 和 XPointer 教程
- • Spring目錄結構和基礎JAR包介紹 - Spring教程
- • 適用於PHP初學者的學習線路和建議
- • Java Agent入門實戰（一）-Instrumentation介紹與使用
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 融合阿里雲，牛客助您找到心儀好工作
- 2. 解決jdbc(jdbctemplate)在測試類時不報錯在TomCatb部署後報錯
- 3. 解決PyCharm GoLand IntelliJ 等 JetBrains 系列 IDE無法輸入中文
- 4. vue+ant design中關於圖片請求不顯示的問題。
- 5. insufficient memory && Native memory allocation (malloc) failed
- 6. 解決IDEA用Maven創建的Web工程不能創建Java Class文件的問題
- 7. [已解決] Error: Cannot download ‘https://start.spring.io/starter.zip?
- 8. 在idea讓java文件夾正常使用
- 9. Eclipse啓動提示「subversive connector discovery」
- 10. 帥某-技巧-快速轉帖博主文章（article_content）