目錄

Less 是什么

注釋

?變量

? ?1. 變量的使用

? ?2.變量插值

? ? 3.延遲加載——先加載變量再賦值

嵌套規則

父選擇器

混合(Mixin)

1.普通混合

2.帶參數的混合

?3.命名參數

4.匹配模式

5.@arguments 變量

?運算

繼承

避免編譯

---

Less 快速入門 | Less.js 中文文檔 - Less 中文網

• Less 是什么

Less(Leaner Style Sheets 精簡樣式表) 是一種動態樣式語言，屬于 css 預處理器的范疇，它擴展了 CSS 語言，增加了變量、Mixin、函數等特性，使 CSS 更易維護和擴展，Less 既可以在 客戶端 上運行 ，也可以借助 Node.js 在服務端運行。

Less 編譯工具：

Koala - a gui application for LESS, Sass, Compass and CoffeeScript compilation.

• 注釋

• 多行注釋保留會被保留在編譯生成的 CSS 中
• 單行注釋不會被保留在編譯生成的 CSS 中

/* 
 * 多行注釋
 * style comment! 
*/

// 單行注釋
div {
  color: red;
}

• ?變量

? ?1. 變量的使用

@ 聲明變量，作為普通屬性值使用

/*
less
*/
@width: 50px;
@height: 100px;

div {
  width: @width;
  height: @height;
}

? ?2.變量插值

變量用于選擇器名、屬性名、URL、@import語句

/*
less
*/
@my-selector: banner;

// 需要添加 {}
.@{my-selector} {
  font-weight: bold;
  line-height: 40px;
  margin: 0 auto;
}

/*
less
*/
@property: color;

.widget {
  @{property}: #0ee;
  background-@{property}: #999;
}

/*
less
*/
@images: '../img';

body {
  color: #444;
  background: url('@{images}/white-sand.png');
}

@themes: '../../src/themes';

@import '@{themes}/tidal-wave.less';

? ? 3.延遲加載——先加載變量再賦值

當一個變量被聲明多次，會取最后一次的值，并由內而外，先尋找作用域內的變量，如果沒有在尋找作用域外的變量。

/*
編譯前的less
*/
@var: 0;
.class {
  @var: 1;
  .brass {
    @var: 2;
    three: @var;
    @var: 3;
  }
  one: @var;
}

/*
編譯后的css
*/
.class {
  one: 1;
}
.class .brass {
  three: 3;
}

• 嵌套規則

/*
編譯前的less
*/
#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

/*
編譯后的css
*/
#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}

• 父選擇器

在嵌套規則中，?&?表示父選擇器

/*
編譯前的less
*/
.header {
  a {
    color: blue;
    &:hover {
      color: green;
    }
  }
}

/*
編譯后的css
*/
.header a {
  color: blue;
}
.header a:hover {
  color: green;
}

如果沒有?&，會被編譯成后代選擇器?a :hover 而不是 a:hover 注意空格開了

除此之外，&?還能用于生成重復類名：

/*
編譯前的less
*/
.button {
  &-ok {
    background-image: url('ok.png');
  }

  &-custom {
    background-image: url('custom.png');
  }
}

/*
編譯后的css
*/
.button-ok {
  background-image: url('ok.png');
}

.button-custom {
  background-image: url('custom.png');
}

• 混合(Mixin)

混合(Mixin)是一種將一組屬性從一個規則集包含(或混入)到另一個規則集的方式，可理解為函數或者方法

1.普通混合

/*
編譯前的less
*/
.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

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

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

/*
編譯后的css
*/
.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

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

2.帶參數的混合

帶參數的混合要按順序傳遞，不然會出錯

/*
編譯前的less
*/
.border(@width, @style, @color) {
  border: @width @style @color;
}
div {
  .border(1px, solid, #ccc);
}

/*
編譯后的css
*/
div {
  border: 1px solid #ccc;
}

混合帶參數并有默認值

/*
less
*/
.border(@width, @style, @color: #ccc) {
  border: @width @style @color;
}
div {
  .border(1px, solid);
}

// 會出錯
.border(@width: 1px, @style, @color) {
  border: @width @style @color;
}
div {
  .border(solid, #ccc);
}

?3.命名參數

在向混合傳實參時指定形參，實現不按順序傳入

/*
less
*/
.border(@width, @style, @color: #ccc) {
  border: @width @style @color;
}
div {
  .border(@style: solid,  @width: 100px);
}

4.匹配模式

• 相當于對函數的重寫，根據參數匹配對應的混合
• 匹配模式并不是只會找最適合的一項進行匹配，所有合適的項都會匹配并生成效果

/*
編譯前的less
*/
.mixin(dark, @color) {
  color: darken(@color, 10%);
}
.mixin(light, @color) {
  color: lighten(@color, 10%);
}
// @_ 表示匹配所有
.mixin(@_, @color) {
  display: block;
}

@switch: light;

.class {
  .mixin(@switch, #888);
}

/*
編譯后的css
*/
.class {
  color: #a2a2a2;
  display: block;
}

5.@arguments 變量

@arguments?變量包含了傳入的所有參數

/*
編譯前的less
*/
.border_arg(@w:30px,@c:red,@xx:solid){
    border:@arguments;
}
 
.test_arguments{
    .border_arg();
}

/*
編譯后的css
*/
.test_arguments{
    border:30px red solid;
}

• ?運算

計算結果以操作數最左側的單位類型為準

/*
less
*/
@conversion-1: 5cm + 10mm; // 6cm
@conversion-2: 2 - 3cm - 5mm; // -1.5cm
@conversion-3: 3.1 * 2cm; // 6.2cm
@conversion-4: 4px / 2; // 4px / 2

// conversion is impossible
@incompatible-units: 1cm - 1px; // 0.97354167cm

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

@color: #224488 / 2; // #112244
background-color: #112244 + #111; // #223355

• 繼承

• 繼承可讓多個選擇器應用同一組屬性，最終編譯為并集選擇器
• 其性能比混合高，但靈活性比混合低

/*
編譯前的less
*/
nav ul {
  &:extend(.inline);
  background: blue;
}
.inline {
  color: red;
}

/*
編譯后的css
*/
nav ul {
  background: blue;
}
.inline,
nav ul {
  color: red;
}

加all繼承所有的狀態。

/*
編譯前的less
*/
.test {
  color: orange;
}
.test {
  &:hover {
    color: green;
  }
}

.replacement:extend(.test all) {
    background-color:yellow;
}

/*
編譯后的css
*/
.test,
.replacement {
  color: orange;
}
.test:hover,
.replacement:hover {
  color: green;
}

.replacement {
  background-color:yellow;
}

• 避免編譯

通過加引號可以避免 Less 編譯，直接把內容輸出到 CSS 中

/*
編譯前的less
*/
.banner .inline .header {
  width: '100px + 100px';
  height: 100px + 100px;
}

/*
編譯后的css
*/
.banner .inline .header {
  width: '100px + 100px';
  height: 200px;
}