注釋

/* 我會被編譯 */ // 我不會被編譯 復制代碼

聲明變量

@變量名: 變量值

例如：

@width: 300px;.test {width: @width; } 復制代碼

編譯后的css：

.test {width: 300px; } 復制代碼

混合聲明

混合聲明其實就是把一個選擇器直接當做變量。

例如：

.border {border: solid 5px pink; } #bg {background: red; }.test {.border;#bg;margin-left: 100px; } 復制代碼

編譯后的css：

.border {border: solid 5px pink; } #bg {background: red; }.test {border: solid 5px pink;background: red;margin-left: 100px; } 復制代碼

帶參數的混合聲明

帶參數的混合聲明跟js中的函數很類似，形參是上文所提到的變量，調用混合聲明的時候需要傳實體參數。

例如：

.border(@border_width) {border: solid yellow @border_width; }.test {.border(4px); } 復制代碼

編譯后的css：

.test {border: solid yellow 4px; } 復制代碼

帶默認參數的混合聲明

帶默認參數的混合聲明，是普通混合聲明和帶參混合聲明的結合體。調用的時候可以傳參也可以不傳，如果不傳參數則會編譯成默認參數。

例如：

.border_radius(@radius: 5px) {-webkit-border-radius: @radius;-moz-border-radius: @radius;border-radius: @radius; }.test1 {.border_radius; } .test2 {.border_radius(10px); } 復制代碼

編譯后的css：

.test1 {-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px; } .test2 {-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px; } 復制代碼

匹配模式

匹配模式類似于JS中的if語句，但不完全是。 通過混合模式的第一個參數來篩選調用，只有滿足條件后才能成功匹配。 匹配模式下，第一個參數是必須有的，之后的參數根據具體情況定。

例如：

.triangle(top, @w: 10px, @c: #ccc) {border-width: @w;border-color: transparent transparent @c transparent;border-style: dashed dashed solid dashed; } .triangle(bottom, @w: 10px, @c: #ccc) {border-width: @w;border-color: @c transparent transparent transparent;border-style: solid dashed dashed dashed; } .triangle(left, @w: 10px, @c: #ccc) {border-width: @w;border-color: transparent @c transparent transparent;border-style: dashed solid dashed dashed; } .triangle(right, @w: 10px, @c: #ccc) {border-width: @w;border-color: transparent transparent transparent @c;border-style: dashed dashed dashed solid; } //@_符號代表通配，通配的樣式在每個匹配里面都會編譯 .triangle(@_, @w: 10px, @c: #ccc) {width: 0;height: 0;overflow: hidden; }//調用 .test {.triangle(right, 30px); } 復制代碼

編譯后的css：

.test {border-width: 30px;border-color: transparent transparent transparent #ccc;border-style: dashed dashed dashed solid;width: 0;height: 0;overflow: hidden; } 復制代碼

變量 @arguments

這個是一個特殊變量，它代表了一個混合聲明中的所有參數。

例如：

.border_arg(@w: 30px; @c: red; @xx: solid) {border: @arguments; }.test_arguments {.border_arg(40px); } 復制代碼

編譯后的css：

.test_arguments {border: 40px #ff0000 solid; } 復制代碼

運算

Less可以進行尺寸以及顏色的運算。

例如：

@width: 300px;.box {width: @width - 30 * 2;color: #ccc - 10; //顏色的運算，一般不會用 } 復制代碼

編譯后的css：

.box {width: 240px;color: #c2c2c2; } 復制代碼

嵌套

嵌套功能是Less中最有意思的功能，也是最實用的。

• 有嵌套關系的html元素的樣式，可以直接使用嵌套 例如：

.list {width: 600px;margin: 30px auto;padding: 0;list-style: none;li {height: 30px;line-height: 30px;background-color: lawngreen;margin-bottom: 5px;padding: 0 10px;} } 復制代碼

編譯后的css：

.list {width: 600px;margin: 30px auto;padding: 0;list-style: none; } .list li {height: 30px;line-height: 30px;background-color: lawngreen;margin-bottom: 5px;padding: 0 10px; } 復制代碼

• 偽類可以使用嵌套

這里會用到 & 這個符號，它代表了它的上一層選擇器。

例如：

a {float: left;//& 代表它的上一層選擇器&:hover {color: red;} } 復制代碼

編譯后的css：

a {float: left; } a:hover {color: red; } 復制代碼

變量與字符串的拼接

變量需要放在 @{} 的花括號里，隨后就可以酸意拼接字符串了。

例如：

@baseUrl: '../images'; @bg: '@{baseUrl}/bg.jpg';.test {background: url(@bg); } 復制代碼

編譯后的css：

.test {background: url('../images/bg.jpg'); } 復制代碼

避免被編譯

有時候我們需要輸出一些不正確的css語法或者使用一些Less不認識的專用語法，這時候要輸出這樣的值我們可以在字符串上加上~ 。

例如：

.test {width: ~'calc(300px - 30px)'; } 復制代碼

編譯后的css：

.test {width: calc(300px - 30px); } 復制代碼

!important關鍵字

在混合上加 !important ，會為所有混合所帶來的樣式都添上 !important。

例如：

.border_radius(@radius: 5px) {-webkit-border-radius: @radius;-moz-border-radius: @radius;border-radius: @radius; }.test_important {.border_radius() !important; } 復制代碼

編譯后的css：

.test_important {-webkit-border-radius: 5px !important;-moz-border-radius: 5px !important;border-radius: 5px !important; } 復制代碼

轉載于:https://juejin.im/post/5a9f3e9d518825555d46c59a

總結

以上是生活随笔為你收集整理的Less常用语法整理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。