less 學習筆記

這個筆記原本是想寫成私密的，畢竟不是什麼好難懂的東西，並且主要是我想熟悉下語法，整理成我習慣的文檔！不過思否的記筆記功能不能貼圖！-_-!就只有發成這個了 個人文章如今都沒有什麼質量！見諒

---

LESS 作爲 CSS 的一種形式的擴展，它並無閹割 CSS 的功能，而是在現有的 CSS 語法上，添加了不少額外的功能

變量

@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;

#header { color: @light-blue; }

輸出：

#header { color: #6c94be; }

注意：LESS 中的變量爲徹底的 ‘常量’ ，因此只能定義一次.

混合

在 LESS 中咱們能夠定義一些通用的屬性集爲一個class，而後在另外一個class中去調用這些屬性。例如：

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

#menu a {
  color: #111;
  .bordered;
}
.post a {
  color: red;
  .bordered;
}

輸出：

#menu a {
  color: #111;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
.post a {
  color: red;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

注意： 任何 CSS class, id 或者 元素 屬性集均可以以一樣的方式引入

嵌套

less中能夠以嵌套的方式編寫層疊樣式。例如：

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

輸出：

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

串聯嵌套

& 符號的使用—若是你想寫串聯選擇器，而不是寫後代選擇器，就能夠用到&了. 這點對僞類尤爲有用如 :hover 和 :focus
例如：

.bordered {
  &.float {
    float: left; 
  }
  .top {
    margin: 5px; 
  }
}

輸出：

.bordered.float {
  float: left;  
}
.bordered .top {
  margin: 5px;
}

At-Rules 的嵌套

at-rule 是CSS樣式聲明，以@開頭，緊跟着是標識符（charset），最後以分號（;）結尾。
at-rule 規則的嵌套和普通選擇器的嵌套是類似的，不一樣點在於at-rule規則會像冒泡同樣輸出時在最頂層。例如：

.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;
  }
}

運算

任何數字、顏色或者變量均可以參與運算。例如：

// numbers are converted into the same units
@conversion-1: 5cm + 10mm; // result is 6cm
@conversion-2: 2 - 3cm - 5mm; // result is -1.5cm

// conversion is impossible
@incompatible-units: 2 + 5px - 3cm; // result is 4px

// example with variables
@base: 5%;
@filler: @base * 2; // result is 10%
@other: @base + @filler; // result is 15%

顏色的運算：

@color: #224488 / 2; //results in #112244
background-color: #112244 + #111; // result is #223355

calc() 特例

爲了與 CSS 保持兼容，calc() 並不對數學表達式進行計算，可是在嵌套函數中會計算變量和數學公式的值。

@var: 50vh/2;
width: calc(50% + (@var - 20px));  // result is calc(50% + (25vh - 20px))

Escaping

例如：

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

輸出：

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

　函數

Less 內置了多種函數用於轉換顏色、處理字符串、算術運算等，可參考函數手冊。
例子：

@base: #f04615;
@width: 0.5;

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

命名空間

有時候，你可能爲了更好組織CSS或者單純是爲了更好的封裝，將一些變量或者混合模塊打包起來, 你能夠像下面這樣在#bundle中定義一些屬性集以後能夠重複使用：

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

你只須要在 #header a中像這樣引入 .button:

#header a {
  color: orange;
  #bundle > .button;  // can also be written as #bundle.button
}

做用域

LESS 中的做用域跟其餘編程語言很是相似，首先會從本地查找變量或者混合模塊，若是沒找到的話會去父級做用域中查找，直到找到爲止.

@var: red;

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

#footer {
  color: @var; // red  
}

@var: red;

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

註釋

塊註釋和行註釋均可以使用：

/* 一個塊註釋
 * style comment! */
@var: red;

// 這一行被註釋掉了！
@var: white;

導入（Importing）

「導入」的工做方式和你預期的同樣。你能夠導入一個 .less 文件，此文件中的全部變量就能夠所有使用了。若是導入的文件是 .less 擴展名，則能夠將擴展名省略掉：

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

字符串插值

變量能夠用相似ruby和php的方式嵌入到字符串中，像@{name}這樣的結構:

@base-url: "http://assets.fnord.com";
background-image: url("@{base-url}/images/bg.png");

避免編譯

有時候咱們須要輸出一些不正確的CSS語法或者使用一些 LESS不認識的專有語法.
要輸出這樣的值咱們能夠在字符串前加上一個 ~, 例如:

.class {
  filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()";
}

咱們能夠將要避免編譯的值用 「」包含起來，輸出結果爲:

.class {
  filter: ms:alwaysHasItsOwnSyntax.For.Stuff();
}

JavaScript 表達式

JavaScript 表達式也能夠在.less 文件中使用. 能夠經過反引號的方式使用:

@var: `"hello".toUpperCase() + '!'`;

輸出：

@var: "HELLO!";

可訪問javascript環境

@height: `document.body.clientHeight`;

若是你想將一個JavaScript字符串解析成16進制的顏色值, 你可使用 color 函數:

@color: color(`window.colors.baseColor`);
@darkcolor: darken(@color, 10%);