|
Color函數(shù)
在文章開頭，我提到了LESS如何幫我在編碼過程中處理圍繞著一個調(diào)色板。對此貢獻最大的一部分就是顏色函數(shù)。加入你用一個標準的藍色貫穿到你的樣式中，然后你想要在表單中用這個藍色來做一個漸變的按鈕。你可以打開Photoshop或者其它的編輯器來獲取一個比藍色較淺的或者較暗的HEX色值來作為漸變色�；蛘撸憧梢灾皇鞘褂肔ESS中的顏色函數(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ù)很明顯就是用百分比值來減輕顏色，在這個例子中，它將減輕這個基礎的藍色的10%。這種方法可以讓我們變化的元素或者其它任何元素的顏色值——只是簡單的改變基礎顏色而已。這對于主題(模板)來說非常有用。而且，如果你使用參數(shù)功能，像上面提到的，你還可以更簡單的應用到一些瀏覽器私有前綴的聲明中，比如：.linear-gradient(lighten(@blue), @blue, 100%);。
嗯，最終的效果的確很贊：
很贊的漸變的、基于變量的”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) > 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)用它，它也會被直接應用。
nav ul {
#defaults > .nav_list;
}
出處：前端觀察
責任編輯：bluehearts
上一頁 LESS介紹及其與Sass的差異 [3] 下一頁 LESS介紹及其與Sass的差異 [5]
◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 4 頁 LESS介紹及其與Sass的差異 [4]
