Less學(xué)習(xí)

Variables（變量）

  • 概述
    變量通過為你提供一種在一個地方管理這些值的方法讓你的代碼變得更容易維護：
@link-color:        #428bca; // sea blue
@link-color-hover:  darken(@link-color, 10%);
a,.link {
  color: @link-color;
}
a:hover {
  color: @link-color-hover;
}
.widget {
  color: #fff;
  background: @link-color;
}
  • 變量插值
    在上面的例子主要集中于在CSS規(guī)則中使用變量管理值，實際上它們還可以用在其他地方，比如選擇器名稱，屬性名，URLs以及@import語句中。
  1. 選擇器
@mySelector: banner;

.@{mySelector} {
  font-weight: bold;
  line-height: 40px;
  margin: 0 auto;
}
  1. URLs
// Variables
@images: "../img";

// Usage
body {
  color: #444;
  background: url("@{images}/white-sand.png");
}
  1. 屬性
@property: color;

.widget {
  @{property}: #0ee;
  background-@{property}: #999;
}
  1. 變量名
@fnord:  "I am fnord.";

content: @@fnord;
  • 延遲加載
    變量是延遲加載的，在使用前不一定要預(yù)先聲明。在定義一個變量兩次時，只會使用最后定義的變量，Less會從當(dāng)前作用域中向上搜索。這個行為類似于CSS的定義中始終使用最后定義的屬性值。
.lazy-eval-scope {
  width: @var;
  @a: 9%;
}

@var: @a;
@a: 100%;

編譯為

.lazy-eval-scope {
  width: 9%;
}
  • 默認變量

有時候你會用到默認變量-讓你能夠在沒有設(shè)置某些變量的情況下設(shè)置指定的變量。這一特性并不強制要求你這么做，因為你可以很容易通過插入后定義同名變量的方式覆蓋默認變量。比如

// library
@base-color: green;
@dark-color: darken(@base-color, 10%);

// use of library
@import "library.less";
@base-color: red;

因為延遲加載，這上面的代碼能很好的工作 - 其中base-color會被重寫，而dark-color依然是暗紅色。

Extend （擴展）

extend是一個Less偽類，它會合并它所在的選擇其和它所匹配的引用。

nav ul {
  &:extend(.inline);
  background: blue;
}
.inline {
  color: red;
}

在上面設(shè)置的規(guī)則中，:extend選擇器會在.inline類出現(xiàn)的地方在.inline上應(yīng)用"擴展選擇器"(也就是nav ul)。聲明塊保持原樣，不會帶有任何引用擴展(因為擴展并不是CSS)。因此上面代碼輸出：

nav ul {
  background: blue;
}
.inline,nav ul {
  color: red;
}
  • 擴展語法
    extend可以附加給一個選擇器，也可以放入一個規(guī)則集中。它看起來像是一個帶選擇器參數(shù)偽類，也可以使用關(guān)鍵字all選擇相鄰的選擇器。示例：
.a:extend(.b) {}

// 上面的代碼塊與下面這個做一樣的事情
.a {
  &:extend(.b);
}

在 .b出現(xiàn)的地方，會使用“，”擴展出.a

它可以包含多個要擴展的類，使用逗號分割即可。

.e:extend(.f) {}
.e:extend(.g) {}

// 上面的代碼與下面的做一樣的事情
.e:extend(.f, .g) {}
  • 作用域/@media內(nèi)的擴展
  1. 編寫在media聲明內(nèi)的extend也應(yīng)該只匹配同一media聲明內(nèi)的選擇器：
@media print {
  .screenClass:extend(.selector) {} // media內(nèi)的extend
  .selector { // 這個會匹配到-因為在同一的media內(nèi)
    color: black;
  }
}
.selector { // 定義樣式表中的規(guī)則 - extend會忽略它
  color: red;
}
@media screen {
  .selector {  // 另一個media聲明內(nèi)的規(guī)則 - extend也會忽略它
    color: blue;
  }
}`

編譯為：

@media print {
  .selector,
  .screenClass { /*  同一media內(nèi)的規(guī)則擴展成功 */
    color: black;
  }
}
.selector { /* 定義樣式表中的規(guī)則被忽略 */
  color: red;
}
@media screen {
  .selector { /* 其他media中的規(guī)則也被忽略 */
    color: blue;
  }
}
  1. 編寫在media聲明內(nèi)的extend不會匹配嵌套聲明內(nèi)的選擇器：
@media screen {
  .screenClass:extend(.selector) {} // media內(nèi)的extend
  @media (min-width: 1023px) {
    .selector {  // 嵌套media內(nèi)的規(guī)則 - extend會忽略它
      color: blue;
    }
  }
}

編譯為：

@media screen and (min-width: 1023px) {
  .selector { /* 其他嵌套media內(nèi)的規(guī)則被忽略 */
    color: blue;
  }
}
  1. 頂級extend匹配一切，包括media嵌套內(nèi)的選擇器：
@media screen {
  .selector {  /* media嵌套內(nèi)的規(guī)則 - 頂級extend正常工作 */
    color: blue;
  }
  @media (min-width: 1023px) {
    .selector {  /* media嵌套內(nèi)的規(guī)則 - 頂級extend正常工作 */
      color: blue;
    }
  }
}

.topLevel:extend(.selector) {} /* 頂級extend匹配一切 */

編譯為：

@media screen {
  .selector,
  .topLevel { /* media嵌套內(nèi)的規(guī)則被擴展了 */
    color: blue;
  }
}
@media screen and (min-width: 1023px) {
  .selector,
  .topLevel { /* media嵌套內(nèi)的規(guī)則被擴展了 */
    color: blue;
  }
}
  • 擴展用例
    經(jīng)典用于就是避免添加基礎(chǔ)類。比如，如果你有：
.animal {
  background-color: black;
  color: white;
}

如果你想有一個animal子類型，并且要重寫背景顏色。那么你有兩個選擇，首先改變你的HTML

<a class="animal bear">Bear</a>

.animal {
  background-color: black;
  color: white;
}
.bear {
  background-color: brown;
}

或者簡化HTML，然后在你的less中使用extend，比如：

<a class="bear">Bear</a>

.animal {
  background-color: black;
  color: white;
}
.bear:extend(.animal){
  background-color: brown;
}

Mixins (混合)

從現(xiàn)有的樣式混合（mixin）屬性

  • 混合“類”選擇器或者“id”選擇器
    例如：
.a, #b {
  color: red;
}
.mixin-class {
  .a;
}
.mixin-id {
  #b;
}

編譯為：

.a, #b {
  color: red;
}
.mixin-class {
  color: red;
}
.mixin-id {
  color: red;
}
  • 不輸出混合集
    如果你想要創(chuàng)建一個混合集，但是卻不想讓它輸出到你的樣式中，你可以在混合集的名字后面加上一個括號。
.my-mixin {
  color: black;
}
.my-other-mixin() {
  background: white;
}
.class {
  .my-mixin;
  .my-other-mixin;
}

.my-mixin {
  color: black;
}
.class {
  color: black;
  background: white;
}
  • 帶選擇器的混合集
    混合集不僅可以包含各種屬性，而且可以包括各種選擇器。
    例如：
.my-hover-mixin() {
  &:hover {
    border: 1px solid red;
  }
}
button {
  .my-hover-mixin();
}

輸出：

button:hover {
  border: 1px solid red;
}
  • 命名空間
    如果你想要將屬性混合到比較復(fù)雜的選擇器中，你可以通過嵌套多層id或者class。
#outer {
  .inner {
    color: red;
  }
}

.c {
// 下面四種寫法效果是一樣的
    #outer > .inner;
    #outer > .inner();
    #outer.inner;
    #outer.inner();
}
  • !important關(guān)鍵字
    在調(diào)用的混合集后面追加 !important 關(guān)鍵字，可以使混合集里面的所有屬性都繼承 !important：
.foo (@bg: #f5f5f5, @color: #900) {
  background: @bg;
  color: @color;
}
.unimportant {
  .foo();//這里可以去掉()
}
.important {
  .foo() !important;//這里可以去掉()
}

.unimportant {
  background: #f5f5f5;
  color: #900;
}
.important {
  background: #f5f5f5 !important;
  color: #900 !important;
}
  • 帶參數(shù)的混合
  1. mixins也可以接受參數(shù)，在它進行mix in操作時會將變量傳遞給選擇器代碼塊。
.border-radius(@radius: 5px) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}

然后你可以這樣調(diào)用它：

#header {
  .border-radius;//這里仍然會包含一個5px的border-radius。
  .border-radius(4px);
}
  1. Mixins With Multiple Parameters （帶多個參數(shù)的mixins）
    參數(shù)可以用分號分割。
.mixin(@color; @padding; @margin: 2) {
  color-3: @color;
  padding-3: @padding;
  margin: @margin @margin @margin @margin;
}

引用mixin時可以通過參數(shù)名稱而不是參數(shù)的位置來為mixin提供參數(shù)值。任何參數(shù)都已通過它的名稱來引用，這樣就不必按照任意特定的順序來使用參數(shù)：

.mixin(@color: black; @margin: 10px; @padding: 20px) {
  color: @color;
  margin: @margin;
  padding: @padding;
}
.class1 {
  .mixin(@margin: 20px; @color: #33acfe);
}
.class2 {
  .mixin(#efca44; @padding: 40px);
}

編譯為：

.class1 {
  color: #33acfe;
  margin: 20px;
  padding: 20px;
}
.class2 {
  color: #efca44;
  margin: 10px;
  padding: 40px;
}

@arguments在mixins內(nèi)部有特殊意義，調(diào)用mixin時，它包含所有傳入的參數(shù)。如果你不想單個單個的處理參數(shù)，這一特性是很有用的：

.box-shadow(@x: 0; @y: 0; @blur: 1px; @color: #000) {
  -webkit-box-shadow: @arguments;
     -moz-box-shadow: @arguments;
          box-shadow: @arguments;
}
.big-block {
  .box-shadow(2px; 5px);
}

.big-block {
  -webkit-box-shadow: 2px 5px 1px #000;
     -moz-box-shadow: 2px 5px 1px #000;
          box-shadow: 2px 5px 1px #000;
}
  • Import Directives （導(dǎo)入準則）

從其他樣式表中導(dǎo)入樣式
在標準的CSS中，@import必須在所有其他類型的規(guī)則之前。但是Less.js不在乎你把@import語句放在什么位置。示例：

.foo {
  background: #900;
}
@import "this-is-valid.less";

@import語句會通過Less依賴文件擴展名的方式區(qū)別對待不同的文件：

  • 如果文件有一個.css擴展名，則將它作為CSS對象，同時@import語句保持不變（查看下面的inline選項）

  • 如果有其他擴展名，則作為Less對象，然后導(dǎo)入它。

  • 如果沒有擴展名，則插入.less，然后將它作為Less文件導(dǎo)入包含進來
    導(dǎo)入選項用來重寫這一行為

  • 導(dǎo)入選項

Less提供了一系列的CSS擴展來讓你使用@import更靈活的導(dǎo)入第三方CSS文件。
語法：@import (keyword) "filename";

下面導(dǎo)入指令已經(jīng)被實現(xiàn)了：

  • reference：使用Less文件但不輸出
  • inline：在輸出中包含源文件但不加工它
  • less：將文件作為Less文件對象，無論是什么文件擴展名
  • css：將文件作為CSS文件對象，無論是什么文件擴展名
  • once：只包含文件一次（默認行為）
  • multiple：包含文件多次

Mixin Guards

帶條件的mixins。

CSS Guards

Loops （循環(huán)）

Merge （合并）

merge特性可以從多個屬性中將值集合集合到一個單一屬性之下的逗號或空格分割屬性列表中。對于諸如background和transform之類的屬性來說，merge非常有用。

  • Comma （逗號）

通過逗號添加屬性的值
示例：

.mixin() {
  box-shadow+: inset 0 0 10px #555;
}
.myclass {
  .mixin();
  box-shadow+: 0 0 20px black;
}

編譯為：

.myclass {
  box-shadow: inset 0 0 10px #555, 0 0 20px black;
}
  • Space （作用域）

作用域內(nèi)附加屬性

示例:

.mixin() {
  transform+_: scale(2);
}
.myclass {
  .mixin();
  transform+_: rotate(15deg);
}

編譯為：

.myclass {
  transform: scale(2) rotate(15deg);
}

為避免任何非有意的添加，merge需要在每個待加入的聲明中顯示的設(shè)置一個+或者+_標記。

Parent Selectors （父級選擇器）

使用&引用父選擇器，& 運算符表示一個 嵌套規(guī)則的父選擇器，它在應(yīng)用修改類或者應(yīng)用偽類給現(xiàn)有選擇器時最常用：

a {
  color: blue;
  &:hover {
    color: green;
  }
}

編譯為：

a {
  color: blue;
}

a:hover {
  color: green;
}

注意，如果上面的示例沒有使用&，那么它的結(jié)果就是a :hover（一個匹配<a>標簽內(nèi)的hovered元素的后代選擇器），這通常并不是我么想要的嵌套的:hover的結(jié)果。

  • Multiple & （多個 &）
    &可以在一個選擇器中出現(xiàn)不止一次。這就使得它可以反復(fù)引用父選擇器，而不是重復(fù)父選擇器的類名。
.link {
  & + & {
    color: red;
  }

  & & {
    color: green;
  }

  && {
    color: blue;
  }

  &, &ish {
    color: cyan;
  }
}

編譯為：

.link + .link {
  color: red;
}
.link .link {
  color: green;
}
.link.link {
  color: blue;
}
.link, .linkish {
  color: cyan;
}

注意，&代表所有的父選擇器（而不只是最近的長輩），因此下面的例子：

.grand {
  .parent {
    & > & {
      color: red;
    }

    & & {
      color: green;
    }

    && {
      color: blue;
    }

    &, &ish {
      color: cyan;
    }
  }
}

編譯為：

.grand .parent > .grand .parent {
  color: red;
}
.grand .parent .grand .parent {
  color: green;
}
.grand .parent.grand .parent {
  color: blue;
}
.grand .parent,
.grand .parentish {
  color: cyan;
}
  • Changing selector order （改變選擇器順序）

要前置插入一個選擇器給繼承的(父)選擇器時它是很有用的。用過將&放到當(dāng)前選擇器之后就可以做到這一點。

.header {
  .menu {
    border-radius: 5px;
    .no-borderradius & {
      background-image: url('images/button-background.png');
    }
  }
}

選擇器.no-borderradius &會前置插入.no-borderradius給它的父選擇器.header .menu，最后變成.no-borderradius .header .menu形式輸出：

.header .menu {
  border-radius: 5px;
}
.no-borderradius .header .menu {
  background-image: url('images/button-background.png');
}
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容