less語法實用手冊

less實用語法、less常用工具方法和API快速查詢手冊

變數

@test_width:300px;
.bod{
    width:@test_width;
}

混合

.box{
    width:100px;
    .border;
}
.border{
    border:5px solid red;
}
.border2{
    .border;
}

不輸出的混合

.my-mixin {
  color: black;
}
.my-other-mixin() {/*加個括號就可以*/
  background: white;
}
.class {
  .my-mixin;
  .my-other-mixin;
}

輸出為：

.my-mixin {  
  color: black;  
}  
.class {  
  color: black;  
  background: white;  
}  

eg3:

.my-hover-mixin() {
  &:hover {
    border: 1px solid red;
  }
}
button {
  .my-hover-mixin();
}

輸出為：

button:hover {
  border: 1px solid red;
}

帶引數[函式]

.border(@border_width){
    border:@border_width solid red;
}

.test_border{
    .border(10px);
}

帶引數[帶預設值]

.border(@border_width:5px){
    border:@border_width solid red;
}

.test_border{
    .border(10px);
}

匹配模式[條件判斷語句]

.triangel(top, @w:5px, @c:#ccc){
    border-width: @w;
    border-color:@c transparent transparent transparent;
    border-style: solid;
}
.triangel(right, @w:5px, @c#ccc){
    border-width: @w;
    border-color:transparent @c transparent transparent;
    border-style: solid;
}
.triangel(bottom, @w:5px, @c:#ccc){
    border-width: @w;
    border-color:transparent transparent @c transparent;
    border-style: solid;
}
.triangel(left, @w:5px, @c:#ccc){
    border-width: @w;
    border-color:transparent transparent transparent @c;
    border-style: solid;
}

eg2:

.mixin(dark; @color) {
  color: darken(@color, 10%);
}
.mixin(light; @color) {
  color: lighten(@color, 10%);
}
.mixin(@_; @color) {//@_匹配任何值
  display: block;
}

程式碼:

@switch: light;

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

輸出為:

.class {
  color: #a2a2a2;
  display: block;
}

模式匹配[過載]

.mixin(@a) {    //一個引數執行這個
  color: @a;
}
.mixin(@a; @b) {    //2個引數執行這個
  color: fade(@a; @b);
}

運算

less中的運算
-任何數字、顏色或者變數都可以參與運算，運算應該被包裹在括號中

@test_width:100px;
@test_height:100px;
.box{
    border:1px solid green;
    width:@test_width;
    height:@test_height + @test_width;
}
.box2{
    border:1px solid green;
    width:@test_width;
    height:@test_height + 200;
}

函式運算

floor(@number); // 向下取整
abs(@number); //絕對值
lighten(@color, 10%); // 亮度增加 10%

巢狀規則

&表示為父選擇器
&對偽類使用
  -hover或focus
對連結的使用
  -&-item

a{
    color: blue;
    &:hover{
        color:red;
    }
    &_span:{
        color: yellow;
    }
}

程式碼:

.button {
  &-ok {
    background-image: url("ok.png");
  }
  &-cancel {
    background-image: url("cancel.png");
  }

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

輸出為:

.button-ok {
  background-image: url("ok.png");
}
.button-cancel {
  background-image: url("cancel.png");
}
.button-custom {
  background-image: url("custom.png");
}

arguments變數

@arguments包含了所有傳遞進來的引數
如果不想單獨處理每一個引數的話就可以這樣寫：

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

避免編譯

.box{
    width:~'calc(300px-30px)';
}

!important關鍵字

-會為所有混合所帶來的樣式，新增上!important

.border(){
    border:1px solid red;
}
.box{
    .border() !important;
}

註釋

/*可以使用這樣的註釋[程式碼中會顯示]*/
//這樣的註釋[程式碼中會自動過濾掉]

引入庫檔案-匯入指令

檔案會被嵌入到最終的檔案當中，有先後順序

#table.less
#a.css
@import 'table';
@import (less) 'css/a.css'; //無論副檔名是什麼，都必須匯入

媒體查詢

.screen-color {
  @media screen {
    color: green;
    @media (min-width: 768px) {
      color: red;
    }
  }
  @media tv {
    color: black;
  }
}

@media screen {
  .screen-color {
    color: green;
  }
}
@media screen and (min-width: 768px) {
  .screen-color {
    color: red;
  }
}
@media tv {
  .screen-color {
    color: black;
  }
}

常用函式

百分比轉換

@width: 0.5;
.class {
  width: percentage(@width); // returns `50%`
}

合併同類項

.my-inline-block {
  display: inline-block;
  font-size: 0;
}
.thing1 {
  &:extend(.my-inline-block);
}
.thing2 {
  &:extend(.my-inline-block);
}

輸出:

.my-inline-block,
.thing1,
.thing2 {
  display: inline-block;
  font-size: 0;
}

相通屬性名稱的合併

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

輸出

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

迴圈

.loop(@counter) when (@counter > 0) {
  .loop((@counter - 1));    // next iteration
  width: (10px * @counter); // code for each iteration
}

div {
  .loop(5); // launch the loop
}

輸出

div {
  width: 10px;
  width: 20px;
  width: 30px;
  width: 40px;
  width: 50px;
}

---

.generate-columns(4);

.generate-columns(@n, @i: 1) when (@i =< @n) {
  .column-@{i} {
    width: (@i * 100% / @n);
  }
  .generate-columns(@n, (@i + 1));
}

輸出

.column-1 {
  width: 25%;
}
.column-2 {
  width: 50%;
}
.column-3 {
  width: 75%;
}
.column-4 {
  width: 100%;
}

SVG漸變梯度gradient

http://lesscss.cn/functions/
方向：
to bottom，
to right，
to bottom right，
to top right

引數列表
color [percentage] 對：第一個顏色和它的相對位置（位置可選）
color percent 對：（可選）第二顏色和它的相對位置
...
color percent 對：（可選）第n個顏色和它的相對位置
color [percentage] 對：最後的顏色和它的相對位置（位置可選）

div {
  @list: red, green 30%, blue;
  background-image: svg-gradient(to right, @list);
}

等價於

div {
  background-image: svg-gradient(to right, red, green 30%, blue);
}