less即學即用

編譯less

可以使用Koala將less文件編譯成css文件，或者VS-Code安裝Easy LESS插件

註釋

1. 經過 /*內容*/ 註釋（編譯後註釋會保存在css文件中）
2. 經過 //內容 註釋（編譯後註釋不會保存在css文件中）

變量

經過 @ 符號聲明變量

@size: 12px;

div {
  font-size: @size;
}

混合

1. 基本用法

.sty1 {
  width: 100px;
}
.sty2 {
  .sty1; // 繼承 .sty1 中的全部樣式
  height: 100px;
}

1. 可傳參數

.border(@border_wid) {
  border: @border_wid solid #eeeeee;
}
.div {
  .border(1px);
}

1. 默認帶值

.border(@border_wid:2px) {
  border: @border_wid solid #eeeeee;
}
.div {
  .border();
}
.div2 {
  .border(1px);
}

匹配模式

.triangle (top, @w:5px, @c:#ccc) { // 箭頭向上的三角形
  border-width: @w;
  border-color: transparent transparent @c transparent;
  border-style: dashed dashed solid dashed;
}
.triangle (bottom, @w:5px, @c:#ccc) { // 向下
  border-width: @w;
  border-color: @c transparent transparent transparent;
  border-style: dashed dashed solid dashed;
}
.triangle (left, @w:5px, @c:#ccc) { // 向左
  border-width: @w;
  border-color: transparent @c transparent transparent;
  border-style: dashed dashed solid dashed;
}
.triangle (right, @w:5px, @c:#ccc) { // 向右
  border-width: @w;
  border-color: transparent transparent transparent @c;
  border-style: dashed dashed solid dashed;
}
.triangle (@_, @w:5px, @c:#ccc) { // 默認樣式（無論是否匹配到上面的樣式，這裏的樣式都會編譯進去）
  width: 0px;
  height: 0px;
  overflow: hidden;
}

.div {
  .triangle(bottom, @w: 10px, @c: #333);
}

運算

任何數字，顏色或變量均可以參加運算，只要有一個帶單位便可
注： 運算符先後要加空格

@test_01:300px;

.box_02{
  width:@test_01 + 20;
  height: (@test_01 - 200) * 5;
  background:#ccc - 10;
}

嵌套規則

// html
<ul class="list">
  <li><a></a><span></span></li>
</ul>

// less
.list {
  li {
    // ...
  }
  a { // a 的樣式也可寫在 li 裏面，但儘可能減小嵌套，嵌套越多，匹配次數越多，影響加載
    // ...
    &:hover { // & 表明上一層選擇器
      // ...
    }
  }
  span {
    // ...
  }
}

@arguments 變量

@arguments 表明全部傳遞進來的參數

.border (@w:1px, @s: solid, @c: red) {
  border: @arguments;
}

.test_border {
  .border(20px);
}

避免編譯

用引號（單雙引號均可以）包住並在前面加上 ~ 便可防止被編譯

.test1 {
  width: ~'calc(100% -30px)';
}

!important

使用 !important 後，.main() 內全部樣式後面都會加上 !important

.main {
  width: 10px;
  height: 10px;
}

.test2 {
  .main() !important;
}

附錄

• 使用 & 拼接類名

// html
<div class="title">
  <div class="title_nav"></div>
</div>

// less
.title {
  &_nav { // &_nav 至關於 .title_nav
    // ...
  }
}

• 導入 less 文件：@import "less";
• 導入 css：@import "body.css";
• 導入並編譯 css：@import (less) "body.css";

參考資料

• Less 中文網

本做品系原創 採用《署名-非商業性使用-禁止演繹4.0 國際》許可協議