LESS是什么？

less是一門CSS預處理語言。由于CSS本身并不是程序式語言，不方便維護和擴展，沒有變量、函數、作用域等概念。而LESS在CSS的基礎語法之上，引入了變量、Mixin混入、運算以及函數等功能，大大簡化了CSS的編寫，降低了CSS的維護成本。
本質上，LESS包含一套自定義的語法及一個解析器，寫好的LESS文件會通過解析器編譯生成CSS文件。LESS并沒有建材CSS原有的特性，更不是用來取代CSS的，而是在現有的語法基礎上，為CSS加入程序式語言的功能特性。所以，標準的CSS文件直接改成.less格式，LESS編譯器可以完全識別。

使用

1.標簽引入。

link標簽rel屬性值一定要為stylesheet/less

<link rel="stylesheet/less" href="style.less"> <script src="less.min.js"></script>

2.命令行使用npm安裝

npm install -g less 編譯： lessc style.less style.css 編譯并壓縮文件： lessc --clean-css styles.less styles.min.css

3.前端服務熱調試（webpack）

需要配置webpack，webpack會幫你編譯less文件，可以在js中Import進.less文件，像使用css那樣使用less

4.在js中調用編譯器調試

var less = require('less'); less.render('.myclass { width: (1 + 1) }', function (e, output) {console.log(output.css); // 輸出 .myclass {width:2} });

語法規則

變量

這里的變量指的是常量，只能定義一次。以@開頭定義，使用時也要鍵入@

1.值變量

@color: #5B83AD; @bgColor: @color + #111; @width: 300px; #wrap {color: @color;width: @width-20;height: @width-20*5;margin: (@width-20)*5;background: @bgColor; }

生成后的CSS：

#wrap {color: #999;width: 50%;background: #6c94be; }

2.選擇器變量

讓選擇器變成動態的變量，使用時必須將變量名用花括號括起來

@mySelector: #wrap; @Wrap: wrap; @{mySelector}{ //變量名 必須使用大括號包裹color: #999;width: 50%; } .@{Wrap}{color:#ccc; } #@{Wrap}{color:#666; }

生成的CSS：

#wrap{color: #999;width: 50%; } .wrap{color:#ccc; } #wrap{color:#666; }

3.屬性變量

將某CSS屬性名當做變量，與選擇器變量一樣，使用時需要{}

@borderStyle: border-style; @Solid: solid; #wrap{@{borderStyle}: @Solid;//變量名 必須使用大括號包裹 }

編譯后：

#wrap{border-style:solid; }

4.url變量

@images: "../img"; //需要加引號 body {background: url("@{images}/dog.png"); //變量名 必須使用大括號包裹 }

編譯后：

body {background: url("../img/dog.png"); }

5.聲明規則集(作用類似于混入)

聲明：@name:{屬性:值};
使用：@name();

@background: {background:red;}; #main{@background(); } @Rules:{width: 200px;height: 200px;border: solid 1px red; }; #con{@Rules(); }

編譯后：

#main{background:red; } #con{width: 200px;height: 200px;border: solid 1px red; }

6.變量的作用域

就近原則，與大多數編程語言的原則一樣

@var: @a; @a: 100%; #wrap {width: @var;@a: 9%; }

編譯后：

#wrap {width: 9%; }

嵌套

&符：代表父選擇器的名字

.boring {display: inline-block;&::after{content:"Hello Less";}.class {width: 100%;}&>.text{height: 10px;} }

編譯后：

.boring{display: inline-block; } .boring::after{content: "Hello Less"; } .boring .class{width: 100%; } .boring>.text{height: 10px; }

混入（Mixin）

?混入就是將一組CSS屬性整體包含入另一個css類中去。提高復用性

1.無參數混入

.bordered {&:hover {color: red;}border-top: dotted 1px black;border-bottom: solid 2px black; } .card {background: #f6f6f6;.bordered; // .bordered()兩種寫法等價 }

編譯后：

.bordered {border-top: dotted 1px black;border-bottom: solid 2px black; } .bordered:hover {color: red; } .card {background: #f6f6f6;border-top: dotted 1px black;border-bottom: solid 2px black; } .card:hover {color: red; }

2.不輸出Mixin

如果只是想創建一個mixin，并不想單獨輸出，可以這樣用

.bordered(){&:hover {color: red;}border-top: dotted 1px black;border-bottom: solid 2px black; } .card {background: #f6f6f6;.bordered; // .bordered()兩種寫法等價 }

編譯后：

.card {background: #f6f6f6;border-top: dotted 1px black;border-bottom: solid 2px black; } .card:hover {color: red; }

3.有參數混入

注意的點：① 默認參數? ② 命名參數? ③ @arguments? ④ @rest

.border-radius(@radius) {border-radius: @radius; } .border(@a:10px, @b:50px, @c:30px, @color:#000) {border:solid 1px @color;box-shadow: @arguments; // 指代的是 全部參數 } .bgColor(@color,@rest...){width: @rest; // @rest參數可以獲得后面違背獲取的值。background: @color; } #main {.border(0px,5px,30px,red);.border-radius(5px); } #main1 {.border(@c: 20px,@color: red); } #main2 {.border(10px); } #main3 {.border; }

4.匹配模式

和面向對象的多態很相似。當調用傳參的時候，會根據參數進行匹配，找到匹配程度更高的，如果匹配程度相同，將全部選擇，并存在樣式覆蓋。

.mixin(@color) {color-1: @color; } .mixin(@color; @padding: 2) {color-2: @color;padding-2: @padding; } .mixin(@color; @padding; @margin: 2) {color-3: @color;padding-3: @padding;margin: @margin @margin @margin @margin; } div {.mixin(#008000); }

編譯后：

div {color-1: #008000; // "color-1"這種寫法對CSS來說是不合法的，在這里只是展示哪些屬性被用上了color-2: #008000;padding-2: 2; }

Demo2：

/* Less */ .triangle(top,@width:20px,@color:#000){border-color:transparent transparent @color transparent ; } .triangle(right,@width:20px,@color:#000){border-color:transparent @color transparent transparent ; }.triangle(bottom,@width:20px,@color:#000){border-color:@color transparent transparent transparent ; } .triangle(left,@width:20px,@color:#000){border-color:transparent transparent transparent @color; } .triangle(@_,@width:20px,@color:#000){ // @_的作用是，無論選擇的是哪個函數，一定運行此函數border-style: solid;border-width: @width; } #main{.triangle(left, 50px, #999) } /* 生成的 CSS */ #main{border-color:transparent transparent transparent #999;border-style: solid;border-width: 50px; }

5.方法的命名空間

不能單獨使用命名空間的方法，必須先引入命名空間，才能使用其中的方法。

#card(){background: #723232;.d(@w:300px){width: @w;#a(@h:300px){height: @h;//可以使用上一層傳進來的方法width: @w;}} } #wrap{#card > .d > #a(100px); // 父元素不能加 括號 } #main{#card .d(); } #con{//不得單獨使用命名空間的方法//.d() 如果前面沒有引入命名空間 #card ，將會報錯#card; // 等價于 #card();.d(20px); //必須先引入 #card }

編譯后：

#wrap{height:100px;width:300px; } #main{width:300px; } #con{width:20px; }

6.條件篩選

沒有邏輯運算符與或非，但是有when not ,（逗號）分別相當于 && ! ||

比較運算符有：?> >= = =< <。=代表的是等于。

#card{// and 運算符 ，相當于 與運算 &&，必須條件全部符合才會執行.border(@width,@color,@style) when (@width>100px) and(@color=#999){border:@style @color @width;}// not 運算符，相當于 非運算 !，條件為 不符合才會執行.background(@color) when not (@color>=#222){background:@color;}// , 逗號分隔符：相當于 或運算 ||，只要有一個符合條件就會執行.font(@size:20px) when (@size>50px) , (@size<100px){font-size: @size;} } #main{#card>.border(200px,#999,solid);#card .background(#111);#card > .font(40px); }

編譯后：

#main{border:solid #999 200px;background:#111;font-size:40px; }

7.使用!important

.border{border: solid 1px red;margin: 50px; } #main{.border() !important; }

編譯后：

#main {border: solid 1px red !important;margin: 50px !important; }

8.循環

less并沒有提供for循環功能，但是可以借助when實現。

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

編譯后：

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

使用循環可以做成CSS網格類的示例：

.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%; }

9.屬性拼接

CSS中有的屬性值是空格隔開，有的是逗號隔開。

①逗號隔開，在LESS中使用 +?

.boxShadow() {box-shadow+: inset 0 0 10px #555; } .main {.boxShadow();box-shadow+: 0 0 20px black; } /* 生成后的 CSS */ .main {box-shadow: inset 0 0 10px #555, 0 0 20px black; }

②空格隔開，在LESS中使用 +_?

/* Less */ .Animation() {transform+_: scale(2); } .main {.Animation();transform+_: rotate(15deg); }/* 生成的 CSS */ .main {transform: scale(2) rotate(15deg); }

繼承

.animation{transition: all .3s ease-out;.hide{transform:scale(0);} } #main{&:extend(.animation); } #con{&:extend(.animation .hide); }

?編譯后：

.animation,#main{transition: all .3s ease-out; } .animation .hide , #con{transform:scale(0); }

all全局搜索替換

#main{width: 200px; } #main {&:after {content:"Less is good!";} } #wrap:extend(#main all) {}

編譯后：

#main,#wrap{width: 200px; } #main:after, #wrap:after {content: "Less is good!"; }

函數

1.類型函數

• isnumber 判定是否是數字
• iscolor　? 判斷值是否是顏色
• isurl? ? ? ? ?判斷是否是url

2.顏色操作

• saturate? ? 增加一定數值的顏色飽和度
• lighteen? ? 增加一定數值的顏色亮度
• darken? ? ? 降低顏色亮度
• fade? ? ? ? ? 給顏色設置一定數值的透明度

3.數學函數

• ceil? ? ? ? ? ?向上取整
• floor? ? ? ? ?向下取整
• round? ? ? ?四舍五入
• percentage? 將浮點數值轉換為百分比字符串
• abs? ? ? ? ? ?計算數值的絕對值
• pow? ? ? ? ? 計算一個數的乘方

更多函數參見官方文檔：

http://lesscss.cn/functions/

其他

1.注釋

/* CSS注釋，會出現在CSS文件中 */

// LESS注釋，不會被編譯在CSS文件中?

2.避免編譯

在CSS屬性被引號包起來，且前面加上~符號

/* Less */ #main{width:~'calc(300px-30px)'; } /* 生成后的 CSS */ #main{width:calc(300px-30px); }

3.使用JS

/* Less */ @content:`"aaa".toUpperCase()`; #randomColor{@randomColor: ~"rgb(`Math.round(Math.random() * 256)`,`Math.round(Math.random() * 256)`,`Math.round(Math.random() * 256)`)"; } #wrap{width: ~"`Math.round(Math.random() * 100)`px";&:after{content:@content;}height: ~"`window.innerHeight`px";alert:~"`alert(1)`";#randomColor();background-color: @randomColor; } /* 生成后的 CSS */ #wrap{width: 隨機值（0~100）px;height: 743px;//由電腦而異background: 隨機顏色; } #wrap::after{content:"AAA"; }

此乃JS in CSS

轉載于:https://www.cnblogs.com/V587Chinese/p/11419587.html

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

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

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