less 常用方法

介紹

Less 是 CSS 的預處理語言之一，爲 CSS 增添了變量、Mixin、函數等特性，使CSS更易於維護擴展。

嵌套（Nesting）

.header {
    .navgation: {
        font-size: 30px;
    }
}

編譯結果：

.header .navgation: {
    font-size: 30px;
}

 

&符號

&符號用於對父級選擇器的引用

.demo {
    &:hover {
        color: red;
    }
}

編譯結果：

.demo:hover{
    color: red;
}

一個&符號和兩個&符號的區別：

一個&符號是對父級選擇器的引用，並沒有嵌套關係

兩個&符號會增加一個demo的層級，即引用了選擇器，又增加了嵌套關係

.demo {
  &-title {
    color: red;
  }
}
.demo {
  &&-title {
    color: red;
  }
}

編譯結果：

.demo-title {
  color: red;
}
.demo.demo-title {
  color: red;
}

 

變量（Variables）

使用@操作符聲明變量

@width: 100px;
@height: @width + 100px;

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

編譯結果：

#header {
  width: 100px;
  height: 200px;
}

 

混入（Mixins）

// 聲明一個屬性
.border-style{
    border: 1px dashed red;
}
// 使用
.demo {
    border-style()
}

編譯結果：

.demo{
    border: 1px dashed red;
}

 參數化

可以加默認值，可以不加

// 聲明
.border-style(@width: 10px, @type: dotted, @color: red){
    border: @width @type @color;
}
//使用
.demo{
    .border-style()
}

編譯結果：

.demo{
    border: 1px dashed red;
}

!important關鍵詞

.size {
    width: 100px;
    height: 100px;
}
.demo {
    .size()!important;
}

 編譯結果：

.demo {
    width: 100px!important;
    height: 100px!important;
}

 

繼承 （Extend）

1. Extend 是 Less 語法中的一個僞類，它可以繼承所匹配的全部樣式。
2. Extend 是爲了解決樣式表中重複的樣式，這一點與其它語言中的繼承功能相似。
3. Extend 主要用於複用重複的樣式類，可附加在選擇器上或放置到樣式集中。

使用&:extend()實現繼承

.button {
    width: 100px;
    height: 50px;
    text-align: center;
}
.primary-button{
    &:extend(.button);
    background-color: #409eff;
}

編譯結果：

.button,
.primary-button {
  width: 100px;
  height: 50px;
  text-align: center;
}

.primary-button {
  background-color: #409eff;
}

繼承多個樣式類

.a {
  color: red;
}
.b {
  font-size: 16px;
}

.c {
  &:extend(.a, .b);
}

編譯結果： 

.a,
.c {
  color: red;
}
.b,
.c {
  font-size: 16px;
}

all關鍵字

不加all的情況下，只繼承樣式表的第一層，

加了all，可以理解爲繼承了樣式表的所有，進行一個深度的繼承

.a {
  .b {
    font-size: 16px;
  }
}
.c{
  &:extend(.a all);
}

以上樣式是有嵌套結構的，

看下編譯結果：

.a .b,
.c .b {
  font-size: 16px;
}

接下來看下不加all的編譯結果：

.a,
.c {
  color: red;
}

對比兩者：不加all，.c不會繼承.a下面嵌套的樣式

減小css代碼體積

平常我們遇到重複的代碼可能會這樣寫，將.a的樣式粘貼到.b中，然後代碼成了下面這樣：

.a{
  color: #fff;
}

.b{
  color: #fff;
}

使用:extend()

.a, .b{
  color: #fff;
}

 

繼承和混入的區別

相同點：兩者都可以將classA的樣式引入到classB中

不同點：

• 混入可以帶參數調用，缺點是會有冗餘代碼
• 繼承不會有冗餘代碼

 

 

映射（Maps）

// 聲明一組map
#colors {
    primary: #409eff;
    success: #67c23a;
}
// 使用
.demo {
    color: #colors[primary]
}

 編譯結果：

.demo {
    color: #409eff;
}

 

轉義字符（Escaping）

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

@min768: ~"(min-width: 768px)";

.demo {
  width: 100px;
  height: 100px;
  background-color: aqua;

  @media @min768 {
    background-color: red;
  }
}

編譯結果：

.demo {
  width: 100px;
  height: 100px;
  background-color: aqua;
}
@media (min-width: 768px) {
  .demo {
    background-color: red;
  }
}

less 3.5 之後可以簡寫爲：

@min768: (min-width: 768px);