本文目錄

• 1.變量
• 2.混合（Mixins）
• 3.嵌套（Nesting）
• 4.運(yùn)算（Operations）
• 5.轉(zhuǎn)義（Escaping）
• 6.函數(shù)（Functions）
• 7.命名空間和訪問(wèn)符
• 8.映射（Maps）
• 9.作用域（Scope）
• 10.導(dǎo)入（Importing）
• 11.Less和Sass的聯(lián)系和區(qū)別
• 12.Less 中的嵌套規(guī)則講解
  • 12.1.嵌套的使用
  • 12.2.&符號(hào)的使用
  • 12.3.&的重復(fù)使用
  • 12.4.反向嵌套
  • 12.5.@規(guī)則嵌套的冒泡

Less 是一門 CSS 預(yù)處理語(yǔ)言，它擴(kuò)展了 CSS 語(yǔ)言，增加了變量、Mixin、函數(shù)等特性，使 CSS 更易維護(hù)和擴(kuò)展。
Less 可以運(yùn)行在 Node 或?yàn)g覽器端。
常見(jiàn)的css預(yù)處理語(yǔ)言有Less，Sass，Stylus等，
我在平時(shí)寫(xiě)項(xiàng)目時(shí)比較多使用Less，現(xiàn)將Less基本使用方法總結(jié)如下：

1.變量

使用@將常用的屬性定義為變量

@width: 10px;
@height: @width + 10px;

#header {
  width: @width;
  height: @height;
}

編譯結(jié)果

#header {
  width: 10px;
  height: 20px;
}

2.混合（Mixins）

混合（Mixin）是一種將一組屬性從一個(gè)規(guī)則集包含（或混入）到另一個(gè)規(guī)則集的方法。假設(shè)我們定義了一個(gè)類（class）如下：

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

如果我們希望在其它規(guī)則集中使用這些屬性呢？沒(méi)問(wèn)題，我們只需像下面這樣輸入所需屬性的類（class）名稱即可，如下所示：

#menu a {
  color: #111;
  .bordered();
}

.post a {
  color: red;
  .bordered();
}

.bordered 類所包含的屬性就將同時(shí)出現(xiàn)在 #menu a 和 .post a 中了。

3.嵌套（Nesting）

Less 提供了使用嵌套（nesting）代替層疊或與層疊結(jié)合使用的能力。假設(shè)我們有以下 CSS 代碼：

#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}

用 Less 語(yǔ)言我們可以這樣書(shū)寫(xiě)代碼：

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

用 Less 書(shū)寫(xiě)的代碼更加簡(jiǎn)潔，并且模仿了 HTML 的組織結(jié)構(gòu)。
你還可以使用此方法將偽選擇器（pseudo-selectors）與嵌套（Nesting）一同使用。下面是一個(gè)經(jīng)典的 clearfix 技巧，重寫(xiě)為一個(gè)嵌套（Nesting） (& 表示當(dāng)前選擇器的父級(jí)）

.clearfix {
  display: block;
  zoom: 1;

  &:after {
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    clear: both;
    visibility: hidden;
  }
}

4.運(yùn)算（Operations）

算術(shù)運(yùn)算符 +、-、、/ 可以對(duì)任何數(shù)字、顏色或變量進(jìn)行運(yùn)算。如果可能的話，算術(shù)運(yùn)算符在加、減或比較之前會(huì)進(jìn)行單位換算。計(jì)算的結(jié)果以最左側(cè)操作數(shù)的單位類型為準(zhǔn)。如果單位換算無(wú)效或失去意義，則忽略單位。無(wú)效的單位換算例如：px 到 cm 或 rad 到 % 的轉(zhuǎn)換。
乘法和除法不作轉(zhuǎn)換。因?yàn)檫@兩種運(yùn)算在大多數(shù)情況下都沒(méi)有意義，一個(gè)長(zhǎng)度乘以一個(gè)長(zhǎng)度就得到一個(gè)區(qū)域，而 CSS 是不支持指定區(qū)域的。Less 將按數(shù)字的原樣進(jìn)行操作，并將為計(jì)算結(jié)果指定明確的單位類型。

calc() 特例

為了與 CSS 保持兼容，calc() 并不對(duì)數(shù)學(xué)表達(dá)式進(jìn)行計(jì)算，但是在嵌套函數(shù)中會(huì)計(jì)算變量和數(shù)學(xué)公式的值。

@var: 50vh/2;
width: calc(50% + (@var - 20px));  // 結(jié)果是 calc(50% + (25vh - 20px))

5.轉(zhuǎn)義（Escaping）

轉(zhuǎn)義（Escaping）允許你使用任意字符串作為屬性或變量值。任何 ~"anything" 或 ~'anything' 形式的內(nèi)容都將按原樣輸出。

@min768: ~"(min-width: 768px)";
.element {
  @media @min768 {
    font-size: 1.2rem;
  }
}

編譯為：

@media (min-width: 768px) {
  .element {
    font-size: 1.2rem;
  }
}

注意，從 Less 3.5 開(kāi)始，可以簡(jiǎn)寫(xiě)為：

@min768: (min-width: 768px);
.element {
  @media @min768 {
    font-size: 1.2rem;
  }
}

在 Less 3.5+ 版本中，許多以前需要“引號(hào)轉(zhuǎn)義”的情況就不再需要了。

6.函數(shù)（Functions）

Less 內(nèi)置了多種函數(shù)用于轉(zhuǎn)換顏色、處理字符串、算術(shù)運(yùn)算等。這些函數(shù)在Less 函數(shù)手冊(cè)中有詳細(xì)介紹。
函數(shù)的用法非常簡(jiǎn)單。下面這個(gè)例子將介紹如何利用 percentage 函數(shù)將 0.5 轉(zhuǎn)換為 50%，將顏色飽和度增加 5%，以及顏色亮度降低 25% 并且色相值增加 8 等用法：

@base: #f04615;
@width: 0.5;

.class {
  width: percentage(@width); // returns `50%`
  color: saturate(@base, 5%);
  background-color: spin(lighten(@base, 25%), 8);
}

7.命名空間和訪問(wèn)符

有時(shí)，出于組織結(jié)構(gòu)或僅僅是為了提供一些封裝的目的，你希望對(duì)混合（mixins）進(jìn)行分組。你可以用 Less 更直觀地實(shí)現(xiàn)這一需求。假設(shè)你希望將一些混合（mixins）和變量置于 #bundle 之下，為了以后方便重用或分發(fā)：

#bundle() {
  .button {
    display: block;
    border: 1px solid black;
    background-color: grey;
    &:hover {
      background-color: white;
    }
  }
  .tab { ... }
  .citation { ... }
}

現(xiàn)在，如果我們希望把 .button 類混合到 #header a 中，我們可以這樣做：

#header a {
  color: orange;
  #bundle.button();  // 還可以書(shū)寫(xiě)為 #bundle > .button 形式
}

注意：如果不希望它們出現(xiàn)在輸出的 CSS 中，例如 #bundle .tab() ，請(qǐng)將()附加到命名空間后面（例如 #bundle().tab）。

8.映射（Maps）

從 Less 3.5 版本開(kāi)始，你還可以將混合（mixins）和規(guī)則集（rulesets）作為一組值的映射（map）使用。

#colors() {
  primary: blue;
  secondary: green;
}

.button {
  color: #colors[primary];
  border: 1px solid #colors[secondary];
}

輸出符合預(yù)期：

.button {
  color: blue;
  border: 1px solid green;
}

9.作用域（Scope）

Less 中的作用域與 CSS 中的作用域非常類似。首先在本地查找變量和混合（mixins），如果找不到，則從“父”級(jí)作用域繼承。

@var: red;

#page {
  @var: white;
  #header {
    color: @var; // white
  }
}

與 CSS 自定義屬性一樣，混合（mixin）和變量的定義不必在引用之前事先定義。因此，下面的 Less 代碼示例和上面的代碼示例是相同的：

@var: red;

#page {
  #header {
    color: @var; // white
  }
  @var: white;
}

10.導(dǎo)入（Importing）

“導(dǎo)入”的工作方式和你預(yù)期的一樣。你可以導(dǎo)入一個(gè) .less 文件，此文件中的所有變量就可以全部使用了。如果導(dǎo)入的文件是 .less 擴(kuò)展名，則可以將擴(kuò)展名省略掉：

@import "library"; // library.less
@import "typo.css";

11.Less和Sass的聯(lián)系和區(qū)別

Less和Sass都是css的預(yù)處理語(yǔ)言，也有很多共性，比如下面這些
1、混入(Mixins)——class中的class；
2、參數(shù)混入——可以傳遞參數(shù)的class，就像函數(shù)一樣；
3、嵌套規(guī)則——Class中嵌套class，從而減少重復(fù)的代碼；
4、運(yùn)算——CSS中用上數(shù)學(xué)；
5、顏色功能——可以編輯顏色；
6、名字空間(namespace)——分組樣式，從而可以被調(diào)用；
7、作用域——局部修改樣式；
8、JavaScript 賦值——在CSS中使用JavaScript表達(dá)式賦值。

當(dāng)然它們也有很多不同之處：

• 1.最明顯的區(qū)別：編譯符不一樣
  Less是@，而Sass是$
• 2.Sass支持if{}else{}作為條件語(yǔ)句，而Less的條件語(yǔ)句使用when；
• 3.編譯環(huán)境不一樣
  Sass需要安裝Ruby，屬于服務(wù)端處理，然而Less是需要引入官網(wǎng)提供和的less.js，屬于客戶端處理。

Less和Sass都使得css更容易維護(hù)和擴(kuò)展，隨著兩者的不斷發(fā)展，很多內(nèi)容也都變得更人性化，我們根據(jù)日常開(kāi)發(fā)的需求選擇使用即可。

注：SCSS 是 Sass 3 引入新的語(yǔ)法，其語(yǔ)法完全兼容 CSS3，并且繼承了 Sass 的強(qiáng)大功能。Sass 和 SCSS 其實(shí)是同一種東西，我們平時(shí)都稱之為 Sass。

12.Less 中的嵌套規(guī)則講解

Less 中嵌套應(yīng)該很容易理解，html 語(yǔ)言中就支持標(biāo)簽的嵌套。我們?cè)谑褂?css 時(shí)，如果想要為多層嵌套的元素設(shè)置樣式，要么給元素加上一個(gè)類選擇器或ID選擇器，要么使用后代選擇器。例如：

.rcdemo{
  font-size: 14px;
}
.rcdemo p{
  line-height: 25px;
}
.rcdemo p span{
  color: #ccc;
}

這樣寫(xiě)雖然也好理解，但是沒(méi)有那么直觀，維護(hù)起來(lái)也不方便。
而 Less 中的嵌套規(guī)則正好可以解決這樣問(wèn)題，嵌套規(guī)則允許在一個(gè)選擇器中嵌套另一個(gè)選擇器，這樣可以使得代碼看起來(lái)一目了然，后期維護(hù)也方便。

12.1.嵌套的使用

例如上面的 css 代碼使用 Less 語(yǔ)言來(lái)寫(xiě)：

.rcdemo{
   font-size: 14px;
   p{
      line-height: 25px;
      span{
         color: #ccc;
      }
   }
}

這樣整體看起來(lái)是不是更直觀一些，一層套一層。但是注意喲，一般我們不會(huì)嵌套太多層，嵌套的層數(shù)越多，性能就越差，建議一般嵌套三層左右。

12.2.&符號(hào)的使用

在我們使用嵌套規(guī)則時(shí)，要特別注意 & 符號(hào)的使用，& 符號(hào)可以表示對(duì)父選擇器的引用。
在一個(gè)內(nèi)層選擇器的前面，如果沒(méi)有 & 符號(hào)，則這個(gè)內(nèi)層選擇器會(huì)被解析為父選擇器的后代。如果內(nèi)層選擇器前面有一個(gè) & 符號(hào)，則內(nèi)層選擇器會(huì)被解析為父選擇器自身或父選擇器的偽類。
例如我們看下面這段代碼：

.rcdemo{
    a{
        color: #eee;
    }
}

編譯成 css 代碼：

.rcdemo a {
  color: #eee;
}

可以看到，標(biāo)簽選擇器 a 前面沒(méi)有加 & 符號(hào)，所以這個(gè)標(biāo)簽選擇器 a 被解析為 .rcdemo 選擇器的后代。
再來(lái)看一下內(nèi)層選擇器前面加 & 符號(hào)：

.rcdemo{
   &one{
      font-size: 12px;
   }
   &:hover{
       color: #fff;
   }
}

編譯成 css 代碼：

.rcdemoone {
  font-size: 12px;
}
.rcdemo:hover {
  color: #fff;
}

上面代碼中，one 前面添加了一個(gè) & 符號(hào)，這個(gè)符號(hào)就表示父選擇器本身，所以解析后為.rcdemoone。當(dāng)然 :hover 偽類前面的 & 符號(hào)也是同理。

12.3.&的重復(fù)使用

通過(guò)使用 & 符號(hào)，可以重復(fù)引用父類選擇器。
例如下面這段 Less 代碼，如果我們希望每個(gè)選擇器名的前綴都為 top，可以像下面這樣簡(jiǎn)寫(xiě)：

.rcdemo{
   &-one{
       font-size: 14px;
   }
   &-two{
       font-size: 16px;
   }
   &-three{
       font-size: 18px;
   }
}

編譯為 css 代碼：

.rcdemo-one {
  font-size: 14px;
}
.rcdemo-two {
  font-size: 16px;
}
.rcdemo-three {
  font-size: 18px;
}

除此之外，還可以同時(shí)使用多個(gè) & 符號(hào)，并使用其他運(yùn)算符連接起來(lái)：

.rcdemo{
   &&-one{
       font-size: 14px;
   }
   &,&-two{
       font-size: 16px;
   }
   &, &er{
       font-size: 18px;
   }
}

編譯為 css 代碼：

.rcdemo.rcdemo-one {
  font-size: 14px;
}
.rcdemo,
.rcdemo-two {
  font-size: 16px;
}
.rcdemo,
.rcdemoer {
  font-size: 18px;
}

12.4.反向嵌套

有些時(shí)候可能我們可能需要將內(nèi)層選擇器放在父選擇器之前，此時(shí)我們可以將 & 放在當(dāng)前選擇器后面來(lái)完成。
例如下面這段代碼，我們希望 .rcdemo 選擇器位于 .nav 選擇器之前，可以在 .rcdemo 選擇器的后面加一個(gè) & 符號(hào)：

.nav{
   font-size: 14px;
   .rcdemo &{
     color: #fff;
   }
}

編譯為 css 代碼：

.nav {
  font-size: 14px;
}
.rcdemo .nav {
  color: #fff;
}

可以看到，編譯之后的 css 代碼中 .rcdemo 選擇器位于 .nav 選擇器前面。
當(dāng)然了，這種方法我們了解即可，在開(kāi)發(fā)中盡量不要去使用。

12.5.@規(guī)則嵌套的冒泡

@ 規(guī)則（例如 @media 或 @supports）可以與選擇器以相同的方式進(jìn)行嵌套。@ 規(guī)則會(huì)被放在前面，同一規(guī)則集中的其它元素的相對(duì)順序保持不變。這叫做冒泡（bubbling）。

.component {
  width: 300px;
  @media (min-width: 768px) {
    width: 600px;
  @media  (min-resolution: 192dpi) {
    background-image: url(/img/retina2x.png);
    }
  }
  @media (min-width: 1280px) {
    width: 800px;
  }
}

編譯為

.component {
  width: 300px;
}
@media (min-width: 768px) {
  .component {
    width: 600px;
  }
}
@media (min-width: 768px) and (min-resolution: 192dpi) {
  .component {
    background-image: url(/img/retina2x.png);
  }
}
@media (min-width: 1280px) {
  .component {
    width: 800px;
  }
}