CSS現(xiàn)狀及LESS的作用

CSS（層疊樣式表）是一門歷史悠久的標(biāo)記性語言，同 HTML 一道，被廣泛應(yīng)用于萬維網(wǎng)（World Wide Web）中。HTML 主要負(fù)責(zé)文檔結(jié)構(gòu)的定義，CSS 負(fù)責(zé)文檔表現(xiàn)形式或樣式的定義。
作為一門標(biāo)記性語言，CSS 的語法相對(duì)簡(jiǎn)單，對(duì)使用者的要求較低，但同時(shí)也帶來一些問題：
CSS 需要書寫大量看似沒有邏輯的代碼，不方便維護(hù)及擴(kuò)展，不利于復(fù)用，尤其對(duì)于非前端開發(fā)工程師來講，往往會(huì)因?yàn)槿鄙?CSS 編寫經(jīng)驗(yàn)而很難寫出組織良好且易于維護(hù)的 CSS 代碼，造成這些困難的很大原因源于 CSS 是一門非程序式語言，沒有變量、函數(shù)、SCOPE（作用域）等概念。
LESS 為 Web 開發(fā)者帶來了福音，它在 CSS 的語法基礎(chǔ)之上，引入了變量，Mixin（混入），運(yùn)算以及函數(shù)等功能，大大簡(jiǎn)化了 CSS 的編寫，并且降低了 CSS 的維護(hù)成本，就像它的名稱所說的那樣，LESS 可以讓我們用更少的代碼做更多的事情。

LESS 原理及使用方式

本質(zhì)上，LESS 包含一套自定義的語法及一個(gè)解析器，可以根據(jù)這些語法定義自己的樣式規(guī)則，這些規(guī)則最終會(huì)通過解析器，編譯生成對(duì)應(yīng)的CSS 文件。LESS 并沒有裁剪CSS 原有的特性，更不是用來取代CSS 的，而是在現(xiàn)有CSS 語法的基礎(chǔ)上，為CSS 加入程序式語言的特性。

編譯工具

** 方法一：Node.js庫 安裝node.js進(jìn)入中文官網(wǎng)http://nodejs.cn/**

安裝最新版本node.js

//新建less文件中輸入代碼
#header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p { font-size: 12px;
    a { text-decoration: none;
      &:hover { border-width: 1px }
    }
  }
}

終端運(yùn)行結(jié)果

Koala界面截圖

文件設(shè)置截圖

注意： 在編寫less文件不能關(guān)閉軟件 引入文件直接引入生成后的css文件

一：注釋

默認(rèn)css注釋是適應(yīng)“/**/”,Less新加了一種css注釋方法，使用雙斜杠注釋，這種注釋方式不會(huì)再編譯的css文件中出現(xiàn)，建議使用雙斜杠進(jìn)行注釋

/*在css文件中顯示*/
//在css文件中不顯示

注意:如果使用less編寫css樣式的話后期維護(hù)在less中，所以注釋建議使用雙斜杠

二：變量

與其他變成語言類似，less也有了變量的概念，主要是用于將相同的值定義成變量統(tǒng)一管理起來，該特性適用于定義主題，我們可以將背景顏色、字體顏色、邊框?qū)傩缘瘸Ｒ?guī)樣式進(jìn)行統(tǒng)一定義，這樣不同的主題只需要定義不同的變量文件就可以了。(每個(gè)變量前加@)

//less文件編寫
@border-color : #b5bcc7; 
 .main { 
   border : 1px solid @border-color; 
 }

//css中編譯后結(jié)果
.main { 
  border: 1px solid #b5bcc7; 
 }

三：變量范圍

Less中的變量和別的程序語言一樣，他的變量也有一個(gè)范圍概念，這個(gè)概念就有點(diǎn)像局部變量和全局變量一樣，只是在Less中采取的是就近原則，換句話說，元素先找本身有沒有這個(gè)變量存在，如果本身存在，就取本身中的變量，如果本身不存在，就尋找父元素，依此類推，直到尋找到相對(duì)應(yīng)的變量，LESS中查找變量的順序是先在局部定義中找，如果找不到，則查找上級(jí)定義，直至全局

//less文件編寫
 @width : 20px; 
 #left { 
   @width : 30px; 
   #left-mian{ 
       width : @width;// 此處應(yīng)該取最近定義的變量 width 的值 30px 
   } 
 } 
 #right { 
     width : @width; // 此處應(yīng)該取最上面定義的變量 width 的值 20px 
 }

//css中編譯后結(jié)果
#left #left-mian {
  width: 30px;
}
#right {
  width: 20px;
}

四：Mixins（混入）

混入是多重繼承的一種實(shí)現(xiàn)方式，在 LESS 中，混入是指在一個(gè) CLASS 中引入另外一個(gè)已經(jīng)定義的 CLASS，就像在當(dāng)前 CLASS 中增加一個(gè)屬性一樣。
多個(gè)參數(shù)可以使用分號(hào)或者逗號(hào)分隔，推薦使用分號(hào)分隔，因?yàn)槎禾?hào)有兩重含義：它既可以表示混合的參數(shù)，也可以表示一個(gè)參數(shù)中一組值的分隔符。
使用分號(hào)作為參數(shù)分隔符意味著可以將逗號(hào)分隔的一組值作為一個(gè)變量處理。換句話說，如果編譯器在混合的定義或者是調(diào)用中找到至少一個(gè)分號(hào)，就會(huì)假設(shè)參數(shù)是使用分號(hào)分隔的，所有的逗號(hào)都屬于參數(shù)中的一組值的分隔符。
2個(gè)參數(shù)，每個(gè)參數(shù)都含有通過逗號(hào)分隔的一組值的情況：.name(1, 2, 3; something, else)。
3個(gè)參數(shù)，每個(gè)參數(shù)只含一個(gè)數(shù)字的情況：.name(1, 2, 3)。

//less文件編寫
// 定義一個(gè)樣式選擇器 
//@radius:5px是定義的變量默認(rèn)值.border;使用默認(rèn)圓角為5px;
//如果需要改變圓角值可直接傳參.border(10px);
.border(@radius:5px) {
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
}
//多參數(shù)混入
.mixin(@color; @padding; @margin: 2px) {
   color: @color;
   padding: @padding;
   margin: @margin @margin @margin @margin;
}
// 在另外的樣式選擇器中使用
#header {
.border;//取默認(rèn)值
}
#footer {
.border(10px);//傳參數(shù)
}
#sider {
.mixin(#ccc,10px);
}

//css中編譯后結(jié)果
#header {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
#footer {
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}
#sider {
  color: #cccccc;
  padding: 10px;
  margin: 2px 2px 2px 2px;
}

五：@arguments 變量

像 JavaScript 中 arguments一樣，Mixins 也有這樣一個(gè)變量：@arguments。@arguments 在 Mixins 中具是一個(gè)很特別的參數(shù)，當(dāng) Mixins 引用這個(gè)參數(shù)時(shí)，該參數(shù)表示所有的變量，很多情況下，這個(gè)參數(shù)可以省去你很多代碼。
@arguments包含了所有傳遞進(jìn)來的參數(shù)。 如果你不想單獨(dú)處理每一個(gè)參數(shù)的話就可以直接使用@arguments代替：

//less文件編寫
.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);
}
#sider {
.boxShadow(2px,2px);
}
#footer {
.boxShadow;
}

//css中編譯后結(jié)果
#header {
  -moz-box-shadow: 2px 2px 3px #ff3366;
  -webkit-box-shadow: 2px 2px 3px #ff3366;
  box-shadow: 2px 2px 3px #ff3366;
}
#sider {
  -moz-box-shadow: 2px 2px 1px #000000;
  -webkit-box-shadow: 2px 2px 1px #000000;
  box-shadow: 2px 2px 1px #000000;
}
#footer {
  -moz-box-shadow: 0 0 1px #000000;
  -webkit-box-shadow: 0 0 1px #000000;
  box-shadow: 0 0 1px #000000;
}

補(bǔ)充 （高級(jí)參數(shù)用法與@rest參數(shù)）

如果需要在 mixin 中不限制參數(shù)的數(shù)量，可以在變量名后添加 ...，表示這里可以使用 N 個(gè)參數(shù)。

.mixin (...) { // 接受 0-N 個(gè)參數(shù)
.mixin () { // 不接受任何參數(shù)
.mixin (@a: 1) { // 接受 0-1 個(gè)參數(shù)
.mixin (@a: 1, ...) { // 接受 0-N 個(gè)參數(shù)
.mixin (@a, ...) { // 接受 1-N 個(gè)參數(shù)

六：嵌套的規(guī)則

在我們書寫標(biāo)準(zhǔn) CSS 的時(shí)候，遇到多層的元素嵌套這種情況時(shí)，我們要么采用從外到內(nèi)的選擇器嵌套定義，要么采用給特定元素加 class 或 id 的方式。在 LESS 中我們可以多層嵌套編寫樣式，也避免的樣式重名的問題，嵌套的結(jié)構(gòu)與HTML文件結(jié)構(gòu)一致

<!--HTML文件結(jié)構(gòu)-->
<div id="home">
    <div id="top">top</div>
    <div id="center">
        <div id="left">left</div>
        <div id="right">right</div>
    </div>
 </div>

//less文件編寫
#home{
  color : blue;
  width : 600px;
  height : 500px;
  border:outset;
  #top{
       border:outset;
       width : 90%;
  }
  #center{
       border:outset;
       height : 300px;
       width : 90%;
       #left{
         border:outset;
         float : left;
         width : 40%;
       }
       #right{
         border:outset;
         float : left;
         width : 40%;
       }
   }
}

//css中編譯后結(jié)果
#home {
  color: blue;
  width: 600px;
  height: 500px;
  border: outset;
}
#home #top {
  border: outset;
  width: 90%;
}
#home #center {
  border: outset;
  height: 300px;
  width: 90%;
}
#home #center #left {
  border: outset;
  float: left;
  width: 40%;
}
#home #center #right {
  border: outset;
  float: left;
  width: 40%;
}

七：偽元素操作

這里的&很重要，它表示選擇上一級(jí)，如下例中：
:hover前添加&符號(hào)是給自身添加hover樣式；
:hover前無&符號(hào)是給后代元素添加hover樣式；

//less文件編寫
a {
 color: red;
 text-decoration: none;
     &:hover {// 有 & 時(shí)解析的是同一個(gè)元素或此元素的偽類，沒有 & 解析是后代元素
      color: black;
      text-decoration: underline;
     }
     :hover {// 有 & 時(shí)解析的是同一個(gè)元素或此元素的偽類，沒有 & 解析是后代元素
      color: blue;
      text-decoration: underline;
     }
 }

//css中編譯后結(jié)果
a {
  color: red;
  text-decoration: none;
}
a:hover {
  color: black;
  text-decoration: underline;
}
a :hover {
  color: blue;
  text-decoration: underline;
}

八：運(yùn)算

在css樣式中經(jīng)常會(huì)有color、padding、margin等，賦數(shù)值的樣式，這種數(shù)值在less中運(yùn)算提供了加，減，乘，除操作；我們可以做屬性值和顏色的運(yùn)算，這樣就可以實(shí)現(xiàn)屬性值之間的復(fù)雜關(guān)系。

//less文件編寫
@init: #111111;
@transition: @init*2;
.switchColor {
    color: @transition;
}

//css中編譯后結(jié)果
.switchColor {
    color: #222222;
}

九：!important關(guān)鍵字

注意： 在調(diào)用混用方法時(shí)，如果在方法后面添加“!important”關(guān)鍵字，那就表示將混入所引進(jìn)來的所有屬性都添加!important關(guān)鍵字;

//less文件編寫
.mixin (@a: 1px,@b: 10px) {
    border: @a solid #ccc;
    margin: @b;

}
.important {
    .mixin(2) !important;
}

//css中編譯后結(jié)果
.important {
  border: 2 solid #cccccc !important;
  margin: 10px !important;
}

十：Color Functions（擴(kuò)展部分）

除了以上常用的方法之外，Less中還提供了一個(gè)Color Functions，他具有多種變換顏色的功能，先把顏色轉(zhuǎn)換成HSL色，然后在此基礎(chǔ)上進(jìn)行操作，具體包括以下幾種：
HSL色是依照色相、飽和度、明度對(duì)顏色進(jìn)行調(diào)整的一種方式（H: Hue 色相、S：Saturation 飽和度、L Lightness 明度）
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
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

//less文件編寫
@base: #f04615;
#header {
color: @base;
    h1 {
        color: lighten(@base,20%);
            a {
                color: darken(@base,50%);
                &:hover {
                    color: saturate(@base,30%);
                }
            }
        }
    p {
        color: desaturate(@base,60%);
    }
}

//css中編譯后結(jié)果
#header {
  color: #f04615;
}
#header h1 {
  color: #f69275;
}
#header h1 a {
  color: #060200;
}
#header h1 a:hover {
  color: #ff3e06;
}
#header p {
  color: #a56f60;
}