less使用小結-有解無憂

Less 是一門 CSS 預處理語言，它擴展了 CSS 語言，增加了變數、Mixin（混入）、函式等特性，使 CSS 更易維護和擴展，

Less 可以運行在 Node 或瀏覽器端，

使用之前需要安裝，可以通過npm來進行安裝

$ npm install -g less

1.變數

LESS 允許開發者自定義變數，變數可以在全域樣式中使用，使得樣式修改起來更加簡單，

@mainColor:#E93223;
body{
  color: @mainColor;
}

2.Mixin（混入）

混合（Mixin）是一種將一組屬性從一個規則集包含（或混入）到另一個規則集的方法，

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

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

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

.bordered 類所包含的屬性就將同時出現在 #menu a 和 .post a 中了

3.嵌套

假設我們有以下 CSS 代碼：

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

用 Less 語言我們可以這樣書寫代碼

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

用 Less 書寫的代碼更加簡潔，并且模仿了 HTML 的組織結構，

你還可以使用此方法將偽選擇器（pseudo-selectors）與混合（mixins）一同使用，下面是一個經典的 clearfix 技巧，重寫為一個混合（mixin） (& 表示當前選擇器的父級）

.clearfix {
  display: block;
  zoom: 1;

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

4.匯入

“匯入”的作業方式和你預期的一樣，你可以匯入一個 .less 檔案，此檔案中的所有變數就可以全部使用了，如果匯入的檔案是 .less 擴展名，則可以將擴展名省略掉：

@import "library"; // library.less 
@import "typo.css";
.f_left{
  float: @right;
}

5.運算及函式

算術運算子 +、-、*、/ 可以對任何數字、顏色或變數進行運算，如果可能的話，算術運算子在加、級訓比較之前會進行單位換算，計算的結果以最左側運算元的單位型別為準，如果單位換算無效或失去意義，則忽略單位，無效的單位換算例如：px 到 cm 或 rad 到 % 的轉換，

@back:#333;
.test{
  border: 1px solid @back*2;
  background: lighten(#000, 10%);
  color:darken(#000, 10%);
}

saturate(@color, 10%); // 飽和度增加 10%
desaturate(@color, 10%); // 飽和度降低 10%
lighten(@color, 10%); // 亮度增加 10%
darken(@color, 10%); // 亮度降低 10%
fadein(@color, 10%); // 透明度增加 10%
fadeout(@color, 10%); // 透明度降低 10%
fade(@color, 50%); // 設定透明度為 50%

6.命名空間和訪問符

有時，出于組織結構或僅僅是為了提供一些封裝的目的，你希望對混合（mixins）進行分組，你可以用 Less 更直觀地實作這一需求，假設你希望將一些混合（mixins）和變數置于 #bundle 之下，為了以后方便重用或分發：

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

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

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

7.作用域

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

@var: red;

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

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

@var: red;

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/67731.html

標籤：Html/Css

上一篇：H5新增特性之語意化標簽

下一篇：有序無序串列,div盛放邏輯版塊,table表格