less讓css具有動(dòng)態(tài)語(yǔ)言的特性
發(fā)布時(shí)間：2012-11-20 09:10:10 作者：佚名 
我要評(píng)論
我要評(píng)論Less 是一種樣式語(yǔ)言，它將 css 賦予了動(dòng)態(tài)語(yǔ)言的特性，如變量、 繼承、 運(yùn)算、 函數(shù)。less 既可以在客戶(hù)端上運(yùn)行（支持IE 6+, Webkit, Firefox），也可以借助 Node.js 或者 Rhino 在服務(wù)端運(yùn)行
Less 是一種樣式語(yǔ)言，它將 css 賦予了動(dòng)態(tài)語(yǔ)言的特性，如變量、 繼承、 運(yùn)算、 函數(shù)。less 既可以在客戶(hù)端上運(yùn)行（支持IE 6+, Webkit, Firefox），也可以借助 Node.js 或者 Rhino 在服務(wù)端運(yùn)行。
Less 做為 css 的一種形式的擴(kuò)展，它并沒(méi)有閹割 css 的功能，而是在現(xiàn)有的 css 語(yǔ)法上，添加了很多額外的功能，所以對(duì)于前端開(kāi)發(fā)人員來(lái)所，學(xué)習(xí) less 是一件輕而易舉的事情。我們先看下用 less 寫(xiě)的一段 css：
@base: #f938ab;
.box-shadow(@style, @c) when (iscolor(@c)) {
box-shadow: @style @c;
-webkit-box-shadow: @style @c;
-moz-box-shadow: @style @c;
}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
.box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.box {
color: saturate(@base, 5%);
border-color: lighten(@base, 30%);
div { .box-shadow(0 0 5px, 30%) }
}
在沒(méi)有學(xué)過(guò) less 的情況下，我們并不知道這些代碼是做啥用的，怎么生成我們所熟悉的 css 代碼，以上代碼經(jīng)過(guò) less 編譯后：
.box {
color: #fe33ac;
border-color: #fdcdea;
}
.box div {
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
下面我們就一起來(lái)學(xué)習(xí) less 吧。
我們知道如果要使用 jquery 就必須在頁(yè)面上引進(jìn) jquery 庫(kù)，同樣的在使用 less 編寫(xiě) css 代碼時(shí)，也要引進(jìn) less 庫(kù)——less.js。點(diǎn)擊這里下載 less 庫(kù)。
下載好后只要在頁(yè)面中引入就可以了。
<link rel="stylesheet/less" type="text/css" href="style.less" media="all" />
<script type="text/javascript" src="less.js"></script>
要注意外部引進(jìn)樣式的方法有所改變，rel 屬性值為 stylesheet/less，樣式的后綴變?yōu)?.less 同時(shí) less 樣式文件一定要在 less.js 前先引入。
引入了 less 之后，正式開(kāi)始學(xué)習(xí) less。
LESS 語(yǔ)法
1、變量
Less 的變量充許你在樣式中對(duì)常用的屬性值進(jìn)行定義，然后應(yīng)用到樣式中，這樣只要改變變量的值就可以改變?nèi)值男Ч?。?javascript 中的全局變量有點(diǎn)類(lèi)似。
甚至可以用變量名定義為變量。
@color: red;
@foot: 'color';
.head{
color: @color;
}
.foot{
color: @@foot;
}
輸出：
.head {
color: red;
}
.foot {
color: red;
}
注意 less 中的變量為完全的“常量”，所以只能定義一次。
2、混合
混合就是定義一個(gè) class，然后在其他 class 中調(diào)用這個(gè) class。
.common{
color: red;
}
.nav{
background: #ccc;
.common;
}
輸出：
.common {
color: red;
}
.nav {
background: #ccc;
color: red;
}
Css 中的 class, id 或者元素屬性集都可以用同樣的方式引入。
3、帶參數(shù)混合
在 less 中，你可以把 class 當(dāng)做是函數(shù)，而函數(shù)是可以帶參數(shù)的。
.border-radius (@radius) {
border-radius: @radius;
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
}
#header {
.border-radius(4px);
}
.button {
.border-radius(6px);
}
最后輸出：
#header {
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}
.button {
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}
我們還可以給參數(shù)設(shè)置默認(rèn)值：
.border-radius (@radius: 5px) {
border-radius: @radius;
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
}
#header {
.border-radius;
}
最后輸出：
#header {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
也可以定義不帶參數(shù)屬性集合，如果想要隱藏這個(gè)屬性集合，不讓它暴露到CSS中去，但是還想在其他的屬性集合中引用，就會(huì)發(fā)現(xiàn)這個(gè)方法非常的好用：
.wrap () {
text-wrap: wrap;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
word-wrap: break-word;
}
pre {
.wrap
}
輸出：
pre {
text-wrap: wrap;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
word-wrap: break-word;
}
混合還有個(gè)重要的變量@arguments。
@arguments 包含了所有傳遞進(jìn)來(lái)的參數(shù)，當(dāng)你不想處理個(gè)別的參數(shù)時(shí)，這個(gè)將很有用。
.border(@width:0,@style:solid,@color:red){
border:@arguments;
}
.demo{
.border(2px);
}
輸出：
.demo {
border: 2px solid #ff0000;
}
混合還有許多高級(jí)的應(yīng)用，如模式匹配等。在這里就不介紹了，只講些基礎(chǔ)的東西。
4、嵌套規(guī)則
Less 可以讓我們用嵌套的方式來(lái)寫(xiě) css。下面是我們平時(shí)寫(xiě)的 css：
#header h1 {
font-size: 26px;
font-weight: bold;
}
#header p {
font-size: 12px;
}
#header p a {
text-decoration: none;
}
#header p a:hover {
border-width: 1px;
}
用 less 我們就可以這樣寫(xiě)：
#header {
h1 {
font-size: 26px;
font-weight: bold;
}
p {
font-size: 12px;
a {
text-decoration: none;
&:hover { border-width: 1px }
}
}
}
注意 & 符號(hào)的使用—如果你想寫(xiě)串聯(lián)選擇器，而不是寫(xiě)后代選擇器，就可以用到 & 了。這點(diǎn)對(duì)偽類(lèi)尤其有用如 :hover。
5、運(yùn)算
任何數(shù)字、顏色或者變量都可以參與運(yùn)算。
.demo{
color: #888 / 4;
}
輸出：
.demo {
color: #222222;
}
Less 完全可以進(jìn)行復(fù)雜四則運(yùn)算，同樣的復(fù)合運(yùn)算也沒(méi)有問(wèn)題。
6、Color 函數(shù)
Less 提供了一系列的顏色運(yùn)算函數(shù)。顏色會(huì)先被轉(zhuǎn)化成 HSL 色彩空間，然后在通道級(jí)別操作。
lighten(@color, 10%); // return a color which is 10% *lighter* than @color
darken(@color, 10%); // return a color which is 10% *darker* than @color
saturate(@color, 10%); // return a color 10% *more* saturated than @color
desaturate(@color, 10%); // return a color 10% *less* saturated than @color
fadein(@color, 10%); // return a color 10% *less* transparent than @color
fadeout(@color, 10%); // return a color 10% *more* transparent than @color
fade(@color, 50%); // return @color with 50% transparency
spin(@color, 10); // return a color with a 10 degree larger in hue than @color
spin(@color, -10); // return a color with a 10 degree smaller hue than @color
mix(@color1, @color2); // return a mix of @color1 and @color2
使用起來(lái)相當(dāng)簡(jiǎn)單：
@base: #f04615;
.class {
color: saturate(@base, 5%);
background-color: lighten(spin(@base, 8), 25%);
}
還可以提取顏色信息：
hue(@color); // returns the `hue` channel of @color
saturation(@color); // returns the `saturation` channel of @color
lightness(@color); // returns the 'lightness' channel of @color
例如：
@color: #f36;
#header {
background-color: hsl(hue(@color),45%,90%);
}
輸出：
#header {
background-color: #f1dae0;
}
7、Math 函數(shù)
Less 提供了一組方便的數(shù)學(xué)函數(shù)，你可以使用它們處理一些數(shù)字類(lèi)型的值。
round(1.67); // returns 2
ceil(2.4); // returns 3
floor(2.6); // returns 2
如果你想將一個(gè)值轉(zhuǎn)化為百分比，你可以使用 percentage 函數(shù)：
percentage(0.5); // returns 50%
8、命名空間
有時(shí)候，你可能為了更好組織 css 或者單純是為了更好的封裝，將一些變量或者混合模塊打包起來(lái)，你可以像下面這樣在 #form 中定義一些屬性集之后可以重復(fù)使用：
#form {
.submit () {
display: block;
border: 1px solid black;
background: gray;
&:hover { background: green }
}
.register { ... }
.login { ... }
}
你只需要在 #myform 中像這樣引入 .submit：
#myform {
color: orange;
#form > .submit;
}
9、作用域
和其他編程語(yǔ)言類(lèi)似，less 變量也有作用域。首先會(huì)從本地查找變量或者混合模塊，如果沒(méi)找到的話(huà)會(huì)去父級(jí)作用域中查找，直到找到為止。
@var: red;
#page {
@var: white;
#header {
color: @var; // white
}
}
#footer {
color: @var; // red
}
10、注釋
Css 形式的注釋在 less 中是依然保留的，同時(shí) less 也支持雙斜線(xiàn)的注釋?zhuān)蔷幾g成 css 的時(shí)候自動(dòng)過(guò)濾掉。
最后 less 還有一些其他的特性就不介紹了，大家可以去LESS官網(wǎng)看下。
Less 做為 css 的一種形式的擴(kuò)展，它并沒(méi)有閹割 css 的功能，而是在現(xiàn)有的 css 語(yǔ)法上，添加了很多額外的功能，所以對(duì)于前端開(kāi)發(fā)人員來(lái)所，學(xué)習(xí) less 是一件輕而易舉的事情。我們先看下用 less 寫(xiě)的一段 css：
復(fù)制代碼
代碼如下:@base: #f938ab;
.box-shadow(@style, @c) when (iscolor(@c)) {
box-shadow: @style @c;
-webkit-box-shadow: @style @c;
-moz-box-shadow: @style @c;
}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
.box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.box {
color: saturate(@base, 5%);
border-color: lighten(@base, 30%);
div { .box-shadow(0 0 5px, 30%) }
}
在沒(méi)有學(xué)過(guò) less 的情況下，我們并不知道這些代碼是做啥用的，怎么生成我們所熟悉的 css 代碼，以上代碼經(jīng)過(guò) less 編譯后：
復(fù)制代碼
代碼如下:.box {
color: #fe33ac;
border-color: #fdcdea;
}
.box div {
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
下面我們就一起來(lái)學(xué)習(xí) less 吧。
我們知道如果要使用 jquery 就必須在頁(yè)面上引進(jìn) jquery 庫(kù)，同樣的在使用 less 編寫(xiě) css 代碼時(shí)，也要引進(jìn) less 庫(kù)——less.js。點(diǎn)擊這里下載 less 庫(kù)。
下載好后只要在頁(yè)面中引入就可以了。
復(fù)制代碼
代碼如下:<link rel="stylesheet/less" type="text/css" href="style.less" media="all" />
<script type="text/javascript" src="less.js"></script>
要注意外部引進(jìn)樣式的方法有所改變，rel 屬性值為 stylesheet/less，樣式的后綴變?yōu)?.less 同時(shí) less 樣式文件一定要在 less.js 前先引入。
引入了 less 之后，正式開(kāi)始學(xué)習(xí) less。
LESS 語(yǔ)法
1、變量
Less 的變量充許你在樣式中對(duì)常用的屬性值進(jìn)行定義，然后應(yīng)用到樣式中，這樣只要改變變量的值就可以改變?nèi)值男Ч?。?javascript 中的全局變量有點(diǎn)類(lèi)似。
甚至可以用變量名定義為變量。
復(fù)制代碼
代碼如下:@color: red;
@foot: 'color';
.head{
color: @color;
}
.foot{
color: @@foot;
}
輸出：
復(fù)制代碼
代碼如下:.head {
color: red;
}
.foot {
color: red;
}
注意 less 中的變量為完全的“常量”，所以只能定義一次。
2、混合
混合就是定義一個(gè) class，然后在其他 class 中調(diào)用這個(gè) class。
復(fù)制代碼
代碼如下:.common{
color: red;
}
.nav{
background: #ccc;
.common;
}
輸出：
復(fù)制代碼
代碼如下:.common {
color: red;
}
.nav {
background: #ccc;
color: red;
}
Css 中的 class, id 或者元素屬性集都可以用同樣的方式引入。
3、帶參數(shù)混合
在 less 中，你可以把 class 當(dāng)做是函數(shù)，而函數(shù)是可以帶參數(shù)的。
復(fù)制代碼
代碼如下:.border-radius (@radius) {
border-radius: @radius;
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
}
#header {
.border-radius(4px);
}
.button {
.border-radius(6px);
}
最后輸出：
復(fù)制代碼
代碼如下:#header {
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}
.button {
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}
我們還可以給參數(shù)設(shè)置默認(rèn)值：
復(fù)制代碼
代碼如下:.border-radius (@radius: 5px) {
border-radius: @radius;
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
}
#header {
.border-radius;
}
最后輸出：
復(fù)制代碼
代碼如下:#header {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
也可以定義不帶參數(shù)屬性集合，如果想要隱藏這個(gè)屬性集合，不讓它暴露到CSS中去，但是還想在其他的屬性集合中引用，就會(huì)發(fā)現(xiàn)這個(gè)方法非常的好用：
復(fù)制代碼
代碼如下:.wrap () {
text-wrap: wrap;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
word-wrap: break-word;
}
pre {
.wrap
}
輸出：
復(fù)制代碼
代碼如下:pre {
text-wrap: wrap;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
word-wrap: break-word;
}
混合還有個(gè)重要的變量@arguments。
@arguments 包含了所有傳遞進(jìn)來(lái)的參數(shù)，當(dāng)你不想處理個(gè)別的參數(shù)時(shí)，這個(gè)將很有用。
復(fù)制代碼
代碼如下:.border(@width:0,@style:solid,@color:red){
border:@arguments;
}
.demo{
.border(2px);
}
輸出：
復(fù)制代碼
代碼如下:.demo {
border: 2px solid #ff0000;
}
混合還有許多高級(jí)的應(yīng)用，如模式匹配等。在這里就不介紹了，只講些基礎(chǔ)的東西。
4、嵌套規(guī)則
Less 可以讓我們用嵌套的方式來(lái)寫(xiě) css。下面是我們平時(shí)寫(xiě)的 css：
復(fù)制代碼
代碼如下:#header h1 {
font-size: 26px;
font-weight: bold;
}
#header p {
font-size: 12px;
}
#header p a {
text-decoration: none;
}
#header p a:hover {
border-width: 1px;
}
用 less 我們就可以這樣寫(xiě)：
復(fù)制代碼
代碼如下:#header {
h1 {
font-size: 26px;
font-weight: bold;
}
p {
font-size: 12px;
a {
text-decoration: none;
&:hover { border-width: 1px }
}
}
}
注意 & 符號(hào)的使用—如果你想寫(xiě)串聯(lián)選擇器，而不是寫(xiě)后代選擇器，就可以用到 & 了。這點(diǎn)對(duì)偽類(lèi)尤其有用如 :hover。
5、運(yùn)算
任何數(shù)字、顏色或者變量都可以參與運(yùn)算。
復(fù)制代碼
代碼如下:.demo{
color: #888 / 4;
}
輸出：
復(fù)制代碼
代碼如下:.demo {
color: #222222;
}
Less 完全可以進(jìn)行復(fù)雜四則運(yùn)算，同樣的復(fù)合運(yùn)算也沒(méi)有問(wèn)題。
6、Color 函數(shù)
Less 提供了一系列的顏色運(yùn)算函數(shù)。顏色會(huì)先被轉(zhuǎn)化成 HSL 色彩空間，然后在通道級(jí)別操作。
復(fù)制代碼
代碼如下:lighten(@color, 10%); // return a color which is 10% *lighter* than @color
darken(@color, 10%); // return a color which is 10% *darker* than @color
saturate(@color, 10%); // return a color 10% *more* saturated than @color
desaturate(@color, 10%); // return a color 10% *less* saturated than @color
fadein(@color, 10%); // return a color 10% *less* transparent than @color
fadeout(@color, 10%); // return a color 10% *more* transparent than @color
fade(@color, 50%); // return @color with 50% transparency
spin(@color, 10); // return a color with a 10 degree larger in hue than @color
spin(@color, -10); // return a color with a 10 degree smaller hue than @color
mix(@color1, @color2); // return a mix of @color1 and @color2
使用起來(lái)相當(dāng)簡(jiǎn)單：
復(fù)制代碼
代碼如下:@base: #f04615;
.class {
color: saturate(@base, 5%);
background-color: lighten(spin(@base, 8), 25%);
}
還可以提取顏色信息：
復(fù)制代碼
代碼如下:hue(@color); // returns the `hue` channel of @color
saturation(@color); // returns the `saturation` channel of @color
lightness(@color); // returns the 'lightness' channel of @color
例如：
復(fù)制代碼
代碼如下:@color: #f36;
#header {
background-color: hsl(hue(@color),45%,90%);
}
輸出：
復(fù)制代碼
代碼如下:#header {
background-color: #f1dae0;
}
7、Math 函數(shù)
Less 提供了一組方便的數(shù)學(xué)函數(shù)，你可以使用它們處理一些數(shù)字類(lèi)型的值。
復(fù)制代碼
代碼如下:round(1.67); // returns 2
ceil(2.4); // returns 3
floor(2.6); // returns 2
如果你想將一個(gè)值轉(zhuǎn)化為百分比，你可以使用 percentage 函數(shù)：
復(fù)制代碼
代碼如下:percentage(0.5); // returns 50%
8、命名空間
有時(shí)候，你可能為了更好組織 css 或者單純是為了更好的封裝，將一些變量或者混合模塊打包起來(lái)，你可以像下面這樣在 #form 中定義一些屬性集之后可以重復(fù)使用：
復(fù)制代碼
代碼如下:#form {
.submit () {
display: block;
border: 1px solid black;
background: gray;
&:hover { background: green }
}
.register { ... }
.login { ... }
}
你只需要在 #myform 中像這樣引入 .submit：
復(fù)制代碼
代碼如下:#myform {
color: orange;
#form > .submit;
}
9、作用域
和其他編程語(yǔ)言類(lèi)似，less 變量也有作用域。首先會(huì)從本地查找變量或者混合模塊，如果沒(méi)找到的話(huà)會(huì)去父級(jí)作用域中查找，直到找到為止。
復(fù)制代碼
代碼如下:@var: red;
#page {
@var: white;
#header {
color: @var; // white
}
}
#footer {
color: @var; // red
}
10、注釋
Css 形式的注釋在 less 中是依然保留的，同時(shí) less 也支持雙斜線(xiàn)的注釋?zhuān)蔷幾g成 css 的時(shí)候自動(dòng)過(guò)濾掉。
最后 less 還有一些其他的特性就不介紹了，大家可以去LESS官網(wǎng)看下。
相關(guān)文章
- 在這篇文章中，我們將來(lái)看一些CSS3新屬性，從而用HTML和CSS處理網(wǎng)格的時(shí)候更容易。但首先讓我們討論一點(diǎn)HTML和CSS網(wǎng)格的歷史，了解清楚為什么以前很困難2014-04-04
- 選中文字時(shí)選區(qū)顏色變成了綠色，跟網(wǎng)站整體的綠色風(fēng)格非常協(xié)調(diào)，其實(shí)實(shí)現(xiàn)很簡(jiǎn)單利用CSS3的特性，同樣也可以指定部分元素設(shè)置選區(qū)顏色，詳細(xì)如下，喜歡的朋友可以參考下2013-09-11
- 這篇文字收集了45個(gè)讓人覺(jué)得不可思議的 CSS3 應(yīng)用示例，它們驗(yàn)證了 CSS3 Transform 和 Transition 等屬性的強(qiáng)大能力2012-01-01
- BlueTrip 是一個(gè)想要整合以下優(yōu)點(diǎn)的CSS 框架： 集成了BluePrint & Tripoli 框架的做好的部分； Hartija 的打印樣式； 960.gs的簡(jiǎn)潔； Elem2009-07-01
CSS教程:學(xué)習(xí)CSS的繼承性-CSS教程-網(wǎng)頁(yè)制作-網(wǎng)頁(yè)教學(xué)網(wǎng)
所謂CSS的繼承是指被包在內(nèi)部的標(biāo)簽將擁有外部標(biāo)簽的樣式性質(zhì)。繼承特性最典型的應(yīng)用通常發(fā)揮在整個(gè)網(wǎng)頁(yè)的樣式預(yù)設(shè)，需要指定為其它樣式的部份設(shè)定在個(gè)別元素里即可。這項(xiàng)2008-10-17CSS教程:優(yōu)先級(jí)問(wèn)題的考慮實(shí)例-CSS教程-網(wǎng)頁(yè)制作-網(wǎng)頁(yè)教學(xué)網(wǎng)
如果同個(gè)元素有兩個(gè)或以上沖突的CSS規(guī)則，瀏覽器有一些基本的規(guī)則來(lái)決定哪一個(gè)非常特殊而勝出。 它可能不像其它那么重要，大部分案例你不需要擔(dān)心沖突，但大型2008-10-17- CSS初學(xué)者感到很簡(jiǎn)單，沒(méi)什么難點(diǎn)，其實(shí)是你還沒(méi)深入理解css特性，下面通過(guò)本文給大家分享容易忽略的css特性，本文都是小編日常所遇到的坑，非常具有參考借鑒價(jià)值，特此分2016-01-08