预处理器less
文章目錄
- 預(yù)處理器less
- 一、less的使用環(huán)境
- 1.運(yùn)行時(shí)編譯
- 2.預(yù)編譯
- (1).借助考拉編譯less
- (2). vscode 插件 Easy LESS
- (3). vscode 插件 Easy LESS
- 二、less的語(yǔ)法
- 1. less中的注釋
- 2. less中的變量
- 3. 作用域（Scope）
- 4. less中的嵌套規(guī)則
- 5.導(dǎo)入（Importing）
- 6. less中的混合
- (1).普通混合
- (2).不帶輸出的混合
- (3).帶參數(shù)的混合
- (4).帶參數(shù)并且有默認(rèn)值的混合
- (5).帶多個(gè)參數(shù)的混合
- (6).命名參數(shù)
- (7).匹配模式
- (8).arguments變量
- 7.映射（Maps）
- 8.less運(yùn)算
- 9. less繼承
- (1)基本用法
- (2)****繼承嵌套（nested）選擇器****
- (3)**精確匹配（exactly matching）**
- (4)extend的選擇器替代問(wèn)題
- (5)媒體查詢@media內(nèi)的繼承范圍（scope）問(wèn)題
- (6)Duplication（重復(fù)）問(wèn)題
- (7)繼承的經(jīng)典使用情況
- (8)**all 的使用**
- 10. less避免編譯
預(yù)處理器less
less官方網(wǎng)站
bootstrap中l(wèi)ess教程
less是一種動(dòng)態(tài)樣式語(yǔ)言，屬于css預(yù)處理器的范疇，它擴(kuò)展了 CSS 語(yǔ)言，
增加了變量、Mixin、函數(shù)等特性，使 CSS 更易維護(hù)和擴(kuò)展
LESS 既可以在 客戶端 上運(yùn)行 ，也可以借助Node.js在服務(wù)端運(yùn)行。
less能干啥
舉個(gè)例子
這是css寫(xiě)法，如果寫(xiě)的太多搞不清楚嵌套層級(jí)
* {margin: 0;padding: 0; } #wrap {position: relative;width: 300px;height: 400px;border: 1px solid;margin: 0 auto; } #wrap .inner {position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;background: pink;height: 100px;width: 100px; }less寫(xiě)法
*{margin: 0;padding: 0;#wrap{position: relative;width: 300px;height: 400px;border: 1px solid;margin: 0 auto;.inner{position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;background: pink;height: 100px;width: 100px;}} }一、less的使用環(huán)境
1.運(yùn)行時(shí)編譯
在瀏覽器環(huán)境中使用 Less
不建議使用這種方式，應(yīng)該預(yù)編譯
運(yùn)行時(shí)編譯(html中樣式是less代碼，在運(yùn)行的時(shí)候編譯【通過(guò)引用相關(guān)js文件】
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style type="text/less">*{margin: 0;padding: 0;}#wrap{position: relative;width: 300px;height: 400px;border: 1px solid;margin: 0 auto;.inner{position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;background: pink;height: 100px;width: 100px;}}</style></head><body><div id="wrap"><div class="inner"></div></div></body><script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js" ></script> </html>-
less文件也可以下載下來(lái)，然后引用本地文件<script src="less/less.min.js"></script>
-
style文件若為單獨(dú)的.less文件 <link rel="stylesheet/less" type="text/less" href="styles.less" /> 但此時(shí)需要考慮跨域的問(wèn)題
2.預(yù)編譯
預(yù)編譯(開(kāi)發(fā)的時(shí)候?qū)憀ess文件，然后轉(zhuǎn)化為css文件后引用)
(1).借助考拉編譯less
koala 官網(wǎng)
這個(gè)不太好用
(2). vscode 插件 Easy LESS
保存拓展名為less 的文件 ，自動(dòng)編譯為css文件
這個(gè)太香了
(3). vscode 插件 Easy LESS
二、less的語(yǔ)法
1. less中的注釋
以//開(kāi)頭的注釋，不會(huì)被編譯到css文件中 以/**/包裹的注釋會(huì)被編譯到css文件中2. less中的變量
使用@來(lái)申明一個(gè)變量：@pink：pink;
3. 作用域（Scope）
塊級(jí)作用域
Less 中的作用域與 CSS 中的作用域非常類似。首先在本地查找變量和混合（mixins），如果找不到，則從“父”級(jí)作用域繼承。
@var: red;#page {@var: white;#header {color: @var; // white} }與 CSS 自定義屬性一樣，混合（mixin）和變量的定義不必在引用之前事先定義。因此，下面的 Less 代碼示例和上面的代碼示例是相同的：
@var: red;#page {#header {color: @var; // white}@var: white; }4. less中的嵌套規(guī)則
5.導(dǎo)入（Importing）
“導(dǎo)入”的工作方式和你預(yù)期的一樣。你可以導(dǎo)入一個(gè) .less 文件，此文件中的所有變量就可以全部使用了。如果導(dǎo)入的文件是 .less 擴(kuò)展名，則可以將擴(kuò)展名省略掉：
@import "library"; // library.less @import "typo.css";6. less中的混合
混合就是將一系列屬性從一個(gè)規(guī)則集引入到另一個(gè)規(guī)則集的方式
混合名以 “.”開(kāi)頭
(1).普通混合
混合名{規(guī)則集}
編譯時(shí)該混合也被當(dāng)類選擇器編譯出去
當(dāng)然類選擇器也可以當(dāng)普通混合使用
#wrap{position: relative;width: 300px;height: 400px;border: 1px solid;margin: 0 auto;.inner{position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;}.inner2{.inner;} }(2).不帶輸出的混合
混合名(){規(guī)則集}
編譯時(shí)該混合不被編譯
使用該混合時(shí)也需要加()
(3).帶參數(shù)的混合
混合名(變量){規(guī)則集}
編譯時(shí)該混合不被編譯
(4).帶參數(shù)并且有默認(rèn)值的混合
混合名(變量有默認(rèn)值){規(guī)則集}
編譯時(shí)該混合不被編譯
.juzhong(@w:10px,@h:10px,@c:pink){position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;background: @c;height: @h;width: @w; }#wrap{position: relative;width: 300px;height: 400px;border: 1px solid;margin: 0 auto;.inner{.juzhong(100px ,100px,pink);}.inner2{.juzhong();} }(5).帶多個(gè)參數(shù)的混合
上方演示的就帶多個(gè)參數(shù)
(6).命名參數(shù)
傳參時(shí)指定傳給某個(gè)形參值，其他使用默認(rèn)值
若不指定，實(shí)參只會(huì)傳給第一形參
.juzhong(@w:10px,@h:10px,@c:pink){position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;background: @c;height: @h;width: @w; }#wrap{position: relative;width: 300px;height: 400px;border: 1px solid;margin: 0 auto;.inner{.juzhong(100px ,100px,pink);}.inner2{.juzhong(@c:black);} }(7).匹配模式
先設(shè)置一個(gè)被引用的匹配模式的相關(guān)代碼
triangle.less
//把幾種模式的相同屬性放在這里，減少代碼量 //第一個(gè)參數(shù)為@_,調(diào)用其他模式會(huì)自動(dòng)引入該混合中的屬性集 .triangle(@_,@wwww,@ccccc){width: 0px;height: 0px;overflow: hidden; }//三角方向向左 .triangle(L,@w,@c){border-width: @w;border-style:dashed solid dashed dashed;border-color:transparent @c transparent transparent ; } //三角方向向右 .triangle(R,@w,@c){border-width: @w;border-style:dashed dashed dashed solid;border-color:transparent transparent transparent @c; } //三角方向向上 .triangle(T,@w,@c){border-width: @w;border-style:dashed dashed solid dashed;border-color:transparent transparent @c transparent ; } //三角方向向下 .triangle(B,@w,@c){border-width: @w;border-style:solid dashed dashed dashed;border-color:@c transparent transparent transparent ; }3.less
@import "./triangle.less"; #wrap .sjx{.triangle(R,40px,yellow) }編譯后
#wrap .sjx {width: 0px;height: 0px;overflow: hidden;border-width: 40px;border-style: dashed dashed dashed solid;border-color: transparent transparent transparent #ffff00; }(8).arguments變量
.border(@w:1px,@style:solid,@c:black){width: 20px;height: 50px;border: @arguments; }#wrap .sjx{.border() }編譯后：
#wrap .sjx {width: 20px;height: 50px;border: 1px solid black; }7.映射（Maps）
從 Less 3.5 版本開(kāi)始，你還可以將混合（mixins）和規(guī)則集（rulesets）作為一組值的映射（map）使用。
#colors() {primary: blue;secondary: green; }.button {color: #colors[primary];border: 1px solid #colors[secondary]; }輸出符合預(yù)期：
.button {color: blue;border: 1px solid green; }8.less運(yùn)算
在less中可以進(jìn)行加減乘除的運(yùn)算
一般只有一個(gè)數(shù)帶單位就行
算術(shù)運(yùn)算符 +、-、*、/ 可以對(duì)任何數(shù)字、顏色或變量進(jìn)行運(yùn)算。如果可能的話，算術(shù)運(yùn)算符在加、減或比較之前會(huì)進(jìn)行單位換算。計(jì)算的結(jié)果以最左側(cè)操作數(shù)的單位類型為準(zhǔn)。如果單位換算無(wú)效或失去意義，則忽略單位。無(wú)效的單位換算例如：px 到 cm 或 rad 到 % 的轉(zhuǎn)換。
// 所有操作數(shù)被轉(zhuǎn)換成相同的單位 @conversion-1: 5cm + 10mm; // 結(jié)果是 6cm @conversion-2: 2 - 3cm - 5mm; // 結(jié)果是 -1.5cm// conversion is impossible @incompatible-units: 2 + 5px - 3cm; // 結(jié)果是 4px// example with variables @base: 5%; @filler: @base * 2; // 結(jié)果是 10% @other: @base + @filler; // 結(jié)果是 15%乘法和除法不作轉(zhuǎn)換。因?yàn)檫@兩種運(yùn)算在大多數(shù)情況下都沒(méi)有意義，一個(gè)長(zhǎng)度乘以一個(gè)長(zhǎng)度就得到一個(gè)區(qū)域，而 CSS 是不支持指定區(qū)域的。Less 將按數(shù)字的原樣進(jìn)行操作，并將為計(jì)算結(jié)果指定明確的單位類型。
@base: 2cm * 3mm; // 結(jié)果是 6cm你還可以對(duì)顏色進(jìn)行算術(shù)運(yùn)算：
@color: #224488 / 2; //結(jié)果是 #112244 background-color: #112244 + #111; // 結(jié)果是 #223355現(xiàn)在除法算式需要加上括號(hào)，或./強(qiáng)制運(yùn)算，否則不編譯
9. less繼承
- 性能比混合高
- 靈活度比混合低
(1)基本用法
繼承被附在選擇器后面或放置在規(guī)則集（即具體定于樣式處），它看起來(lái)就像是一個(gè)在關(guān)鍵字extend后具有可選參數(shù)的偽類（pseudoclass）。
.parentClass{color:red; } .subClassOne{&:extend(.parentClass); } .subClassTwo:extend(.parentClass){}編譯為：
.parentClass, .subClassOne, .subClassTwo {color: red; }(2)繼承嵌套（nested）選擇器
.parentClass{span{color:red} } .subClassOne{&:extend(.parentClass span); }編譯為：
.parentClass span, .subClassOne {color: red; }(3)精確匹配（exactly matching）
Less中，關(guān)鍵字extend里面的選擇器必須與已定義的樣式選擇器嚴(yán)格一致，如div .a{}樣式只能通過(guò)extend（div .a）繼承，而不能是extend（.a），盡管這兩者在CSS中并沒(méi)太多區(qū)別
.a.class, .class.a, .class > .a {color: blue; } .test:extend(.class) {} // this will NOT match the any selectors above編譯將提示：extend ‘.class’ has no matches錯(cuò)誤。此外，通配符也不能用于此情況。
(4)extend的選擇器替代問(wèn)題
此處即針對(duì)《less筆記-變量》文中選擇器名字被變量替代的情況。只需extend繼承的選擇器名不包含變量，或在被參考的地方不是變量即可。
@myClass:.redColor;@{myClass}{color:red; } .class{color:red; } .subClass:extend(.redColor){} //extend參考的選擇器名在參考處為變量，錯(cuò)誤 .subClass:extend(@{myClass}){} //extend內(nèi)選擇器名為變量，錯(cuò)誤。 @myClass:extend(.class){} //不是上面兩種情況，無(wú)錯(cuò)。(5)媒體查詢@media內(nèi)的繼承范圍（scope）問(wèn)題
同一個(gè)媒體查詢（@media）內(nèi)可被繼承，
@media print {.screenClass:extend(.selector) {} // extend inside media.selector { // this will be matched - it is in the same mediacolor: black;} } .selector { // ruleset on top of style sheet - extend ignores itcolor: red; } @media screen {.selector { // ruleset inside another media - extend ignores itcolor: blue;} }編譯為：
@media print {.selector,.screenClass {color: black;} } .selector {color: red; } @media screen {.selector {color: blue;} }說(shuō)明：并非內(nèi)外部?jī)?yōu)先級(jí)問(wèn)題，實(shí)際編譯可知，若將媒體查詢print內(nèi)部的.selector去掉，仍然無(wú)法繼承外部的.selector。
(6)Duplication（重復(fù)）問(wèn)題
.class1,.class2{color:red; } .class3:extend(.class1,.class2){}注意：class1與class2是用逗號(hào)隔開(kāi)，屬于分組查詢，所有不會(huì)有上面的第2條。編譯為：
.class1, .class2, .class3, .class3 {color: red; }可見(jiàn)繼承于分組選擇器將是每個(gè)都單獨(dú)繼承。對(duì)于此處class1與class2完全一樣的情況，extend內(nèi)只寫(xiě)一個(gè)即可，不存在匹配問(wèn)題。
(7)繼承的經(jīng)典使用情況
extend的經(jīng)典使用情況在于，用于減少基類的使用。
如：現(xiàn)在有個(gè)默認(rèn)字體樣式類baseStyle，此外有個(gè)與baseStyle稍有差別的類specialStyle。則使css較少的css與html分別可為：
css：
.baseStyle{color:gray;font-weight:500; } .specialStyle{color:blue; }html：
<p class="baseStyle">我是默認(rèn)的段落樣式</p> <p class="baseStyle specialStyle">我是默認(rèn)樣式上加了特殊樣式的段落</p>而思路相同，卻更好的做法是使用Less的繼承：
.baseStyle{color:gray;font-weight:500; } .specialStyle:extend(.baseStyle){color:blue; }效果雖一樣，但使用less將使html結(jié)構(gòu)信息更加直觀，也更便于日后修改。
繼承實(shí)際上是將當(dāng)前的選擇器名以分組形式添加到被繼承的選擇器處，所以當(dāng)既有繼承又有自身樣式時(shí)，應(yīng)注意被繼承的選擇器的位置。
情況一：被繼承的選擇器在前面
.parentClass{color:red; } .subClass{color:blue;&:extend(.parentClass);border:1px solid blue; }編譯結(jié)果，與預(yù)期一致，使用了自身的特殊color：
.parentClass, .subClass {color: red; } .subClass {color: blue;border: 1px solid blue; }情況二：被繼承的選擇器在后面
.subClass{color:blue;&:extend(.parentClass);border:1px solid blue; } .parentClass{color:red; }編譯結(jié)果，因?yàn)槲恢迷?#xff0c;與預(yù)期不一致，此時(shí)此例中繼承沒(méi)達(dá)到目的：
.subClass {color: blue;border: 1px solid blue; } .parentClass, .subClass {color: red; }(8)all 的使用
*{margin: 0;padding: 0; }.juzhong{position: absolute;left: 0;right: 0;bottom: 0;top: 0;margin: auto; }.juzhong:hover{background: red!important; }#wrap{position: relative;width: 300px;height: 300px;border: 1px solid;margin: 0 auto;.inner{&:extend(.juzhong all);&:nth-child(1){width: 100px;height: 100px;background: pink;}&:nth-child(2){width: 50px;height: 50px;background: yellow;}} }編譯后
* {margin: 0;padding: 0; } .juzhong, #wrap .inner {position: absolute;left: 0;right: 0;bottom: 0;top: 0;margin: auto; } .juzhong:hover, #wrap .inner:hover {background: red!important; } #wrap {position: relative;width: 300px;height: 300px;border: 1px solid;margin: 0 auto; } #wrap .inner:nth-child(1) {width: 100px;height: 100px;background: pink; } #wrap .inner:nth-child(2) {width: 50px;height: 50px;background: yellow; }10. less避免編譯
為了與 CSS 保持兼容，calc() 并不對(duì)數(shù)學(xué)表達(dá)式進(jìn)行計(jì)算，但是在嵌套函數(shù)中會(huì)計(jì)算變量和數(shù)學(xué)公式的值。
@var: 50vh/2; width: calc(50% + (@var - 20px)); // 結(jié)果是 calc(50% + (25vh - 20px))//~"" 里面的任何內(nèi)容都不進(jìn)行計(jì)算 padding: ~"calc(50% + (@var - 20px))";// 結(jié)果是 calc(50% + (@var - 20px))總結(jié)
- 上一篇： 【经验分享】Typora如何添加数学公式
- 下一篇： [LeetCode] 871. Mini