一. 語言特性

1, 變量（變量只定義一次，本質就是常量）

在代碼中，同一個值經常重復出現多次，比如網站定下的基礎顏色，字體大小，很多地方都要使用。將常用的值定義在一個地方，方便修改。

變量除了在css屬性值里使用，還能用于選擇器，屬性名，URL，@import

選擇器: ?@mySelector: banner; ?.@{mySelector}{color : #fff;}

URL: ???@images: "../img"; ? ? body {background : url(@{images}/bg.png) no-repeat center center;}

@import：?@themes: "../../src/themes"; ?@import "@{themes}/tidal-wave.less";

@basefontsize : 14px;.load-mask {font-size : @basefontsize + 2; }

2, 混合（Mixin，相當于繼承，可帶參數，@arguments）

@basefontsize : 14px;.clearfix {display:block;zoom :1;&:after {content : "";display : block;font-size: 0;clear : both;height : 0;visibility : hidden;} } .load-mask {font-size : @basefontsize + 2;.clearfix; }

?3, 嵌套

.load-mask {font-size : @basefontsize + 2;.clearfix;.inner {display : block;}&:before {content:"";} }

3, 運算

　　　　數字，顏色，百分比，變量都能參與運算

　　　　@percent : 5%;

　　　　@color ?: #333;

　　　　div {
　　　　　　width : @percent + 5% ? ? // 10%
　　　　　　width : @percent - 5% ? ? ?// 0%
　　　　　　width : @percent * 5% ? ? // 25%
　　　　　　width : @percent / 5% ? ? // 1%
　　　　　　// 百分比與純數字運算和上述結果一致
　　　　　}

4, 函數（LESS內置了許多函數，如percentage(0.5)轉換成百分比）

5, 作用域

編譯器會在局部查找需要的變量或混合類，如果沒有，編譯器會在其父選擇器作用域內查找

@var: red;#page {@var: white;#header {color: @var; // white} }

6, 導入

可以導入一個?.less?文件，此文件中的所有變量就可以全部使用。如果導入的文件是?.less?擴展名，則可以將擴展名省略掉

@import "library"; // library.less @import "typo.css";

7, Extend

　　.a:extend(.b)）: 僅繼承.b

　　.a:extend(.b all) : 繼承所有和.b關聯的selector，如：.b.c

　　.a:extend(.b,.c) : 繼承.b 和.c

　8, 函數

　　color("#aaa") ?//#aaa

　　convert(9m,cm) ?//900cm

　　default() ?//用在條件里，返回boolean值，是否沒有匹配的其它mixin

　　unit() ?//刪除或更換單位，一個參數為刪除單位，兩個參數為替換單位

　　escape() ?//對字符串中的特殊字符做URL-encoding編碼

　　

?

　　

轉載于:https://www.cnblogs.com/zhaoliner/p/5899822.html

總結

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

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