CSS——LESS入門

來源:互聯網
上載者:User

Less是一種動態樣式語言。Less擴充了CSS的動態行為,比如說,設定變數(Variables)、混合書寫入模式(mixins)、操作(operations)和功能(functions)等等,最棒的是,Less使用了現有的CSS文法,也就是說,你可以直接把你現成的樣式檔案“style.css”直接改成“style.less”,他也能正常工作。如:

<link rel="stylesheet/less" href="less/style.less" />

Less現在可以在用戶端(如:IE+,Webkit,Firefox)和伺服器(如node.js)上運行。前面也說過Less是CSS的一種擴充,他不但向後相容,而且在現有的CSS文法基礎上增加許多額外的功能。如果你具有一定的CSS文法基礎,學習Less將是一件輕而易舉事情,那麼我們現在就開始吧,首先一起看一段用Less文法的CSS代碼:

.box-shadow (@x: 0, @y: 0, @blur: 1px, @alpha) {  @val: @x @y @blur rgba(0, 0, 0, @alpha);  box-shadow:         @val;  -webkit-box-shadow: @val;  -moz-box-shadow:    @val;}.box { @base: #f938ab;  color:        saturate(@base, 5%);  border-color: lighten(@base, 30%);  div { .box-shadow(0, 0, 5px, 0.4) }}

看到這裡或許你現在並不知道這些代碼錶示的是什麼意思。不過不要緊張,我們會一步一步一介紹這些文法表示的是什麼意思。別的先不說,我們一起動起來吧。 如何使用Less

要成功的使用Less,需要一個指令碼的支援,這個指令碼我們把他叫做less.js。大家可以在點擊這裡下載這個less指令碼,並放到你的項目中。下載好以後我們需要把less.js引用到檔案中,引用方式很簡單:

<link rel="stylesheet/less" type="text/css" href="less/styles.less"><script src="js/less.js" type="text/javascript"></script>
Less包含些什麼。

Less具體有哪些東東呢。其實這個問題我在前面早就有說過,Less要CSS文法的基礎上進行了擴充,主要包含:Variables,Mixins、Nested Rules、Functions & Operations、Client-side usage、Server-side usage等等,下面我們就針對這幾個部分,更好協助我們瞭解和深入的學習Less。

1、變數——Variables

Less中的變數充許你在樣式中的某個地方對常用的值進行定義,然後應用到樣式中,這樣只要改變你定義的變數參數值就可以達到改變全域的效果,我們先來看一段代碼:

Less Code

/*======== 定義變數===========*/@color: #4d926f;/*======== 應用到元素中 ========*/#header {color: @color;}h2 {color: @color;}

Compiled Css code:

/*======= Less 編譯成 css ======*/#header {color: #4d926f;}h2 {color: #4d926f;}

Less中的變數還具有計算功能,如:

Less Code:

@nice-blue: #5b83ad;@light-blue: @nice-blue + #111;#header {color: @light-blue;}

Compiled Css Code:

#header {color: #6c94be;}

我們還可以定義一個變數名為變數,如

Less Code:

@color: #253636;@highlight: "color";#header {color: @@highlight;}

Compiled Css Code:

#header {color: #253636;}

註:在Less中的變數實際上就是一個“常量”,因為它們只能被定義一次。

Less Code:

@color: #253636;@highlight: "color";@color: #ff3636;#header {color: @@highlight;}

Compiled Css Code:

#header {color: #ff3636;}

上面代碼很明顯說明了後的@color覆蓋了前面的@color。

2、混入——Mixins

混入其實就是一種嵌套,它充許你將一個類嵌入到另一個類中,而被嵌入的這個類也稱為是一個變數。換句話說,你可以用一個類定義CSS,然後把整個為當作一個變數來使用,嵌入到另一人類中當作他的屬性;另外混入也像一個帶有參數的functions,如下在的例子:

Less Code:

/*========= 定義一個類 ===========*/.roundedCorners(@radius:5px) {-moz-border-radius: @radius;-webkit-border-radius: @radius;border-radius: @radius;}/*========== 定義的類應用到另個一個類中 ===========*/#header {.roundedCorners;}#footer {.roundedCorners(10px);}

Compiled Css Code:

#header {-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}#footer {-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;}

註:這樣任何CSS的類或ID下的樣式都可以當作變數,使用混入模式用來當作另一個元素的屬性值。

混入(Mixin)有一個名詞叫“混入參數(Parametric Mixins)”,上面也說過。Less具有一個特殊類型的規則集,那就是一個類可以當作另一個元素的屬生值,並且還可以接受其自己的參數,我們來看一個典型的執行個體:

Less Code:

/*========== 定義一個規則,並且不設定預設參數值 ============*/.borderRadius(@radius){-moz-border-radius: @radius;-webkit-border-radius: @radius;border-radius: @radius;}/*============ 應用到元素中 ============*/#header {.borderRadius(10px); /*把10px傳給變數@radius*/}.btn {.borderRadius(3px);/*把3px傳給變數@radius*/}

Compiled Css Code:

#header {-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px;}.btn {-moz-border-radius: 3px;-webkit-border-radius: 3px;border-radius: 3px;}

我們還可以給Mixins的參數定義一人預設值,如

Less Code:

.borderRadius(@radius:5px){-moz-border-radius: @radius;-webkit-border-radius: @radius;border-radius: @radius;}.btn {.borderRadius;}

Compiled Css Code:

.btn {-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;}

還有一種方法就是給Mixins不定我任何參數,特別是在你想隱藏輸出的CSS規則,但又想在別的規則中包含他的屬性,使用這種不帶參數的Mixins將非常有用的,我們來看一段代碼:

Less Code:

.wrap(){text-wrap: wrap;white-space: pre-wrap;white-space: -moz-pre-wrap;word-wrap: break-word;}pre {.wrap;}

Compiled Css Code:

pre {text-wrap: wrap;white-space: pre-wrap;white-space: -moz-pre-wrap;word-wrap: break-word;}

Mixins還有一個重要的變數:@arguments。@arguments在Mixins中具是一個很特別的參數,當Mixins引用這個參數時,他將表示所有的變數,當你不想處理個別的參數時,這個將很有用,我們來看一個陰影的執行個體:

Less Code:

.boxShadow(@x:0,@y:0,@blur:1px,@color:#000){-moz-box-shadow: @arguments;-webkit-box-shadow: @arguments;box-shadow: @arguments;}#header {.boxShadow(2px,2px,3px,#f36);}

Compiled Css Code:

#header {-moz-box-shadow: 2px 2px 3px #FF36;-webkit-box-shadow: 2</
相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.