预处理器less
文章目錄
- 預處理器less
- 一、less的使用環境
- 1.運行時編譯
- 2.預編譯
- (1).借助考拉編譯less
- (2). vscode 插件 Easy LESS
- (3). vscode 插件 Easy LESS
- 二、less的語法
- 1. less中的注釋
- 2. less中的變量
- 3. 作用域（Scope）
- 4. less中的嵌套規則
- 5.導入（Importing）
- 6. less中的混合
- (1).普通混合
- (2).不帶輸出的混合
- (3).帶參數的混合
- (4).帶參數并且有默認值的混合
- (5).帶多個參數的混合
- (6).命名參數
- (7).匹配模式
- (8).arguments變量
- 7.映射（Maps）
- 8.less運算
- 9. less繼承
- (1)基本用法
- (2)****繼承嵌套（nested）選擇器****
- (3)**精確匹配（exactly matching）**
- (4)extend的選擇器替代問題
- (5)媒體查詢@media內的繼承范圍（scope）問題
- (6)Duplication（重復）問題
- (7)繼承的經典使用情況
- (8)**all 的使用**
- 10. less避免編譯
預處理器less
less官方網站
bootstrap中less教程
less是一種動態樣式語言，屬于css預處理器的范疇，它擴展了 CSS 語言，
增加了變量、Mixin、函數等特性，使 CSS 更易維護和擴展
LESS 既可以在 客戶端 上運行 ，也可以借助Node.js在服務端運行。
less能干啥
舉個例子
這是css寫法，如果寫的太多搞不清楚嵌套層級
* {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寫法
*{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的使用環境
1.運行時編譯
在瀏覽器環境中使用 Less
不建議使用這種方式，應該預編譯
運行時編譯(html中樣式是less代碼，在運行的時候編譯【通過引用相關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文件也可以下載下來，然后引用本地文件<script src="less/less.min.js"></script>
-
style文件若為單獨的.less文件 <link rel="stylesheet/less" type="text/less" href="styles.less" /> 但此時需要考慮跨域的問題
2.預編譯
預編譯(開發的時候寫less文件，然后轉化為css文件后引用)
(1).借助考拉編譯less
koala 官網
這個不太好用
(2). vscode 插件 Easy LESS
保存拓展名為less 的文件 ，自動編譯為css文件
這個太香了
(3). vscode 插件 Easy LESS
二、less的語法
1. less中的注釋
以//開頭的注釋，不會被編譯到css文件中 以/**/包裹的注釋會被編譯到css文件中2. less中的變量
使用@來申明一個變量：@pink：pink;
3. 作用域（Scope）
塊級作用域
Less 中的作用域與 CSS 中的作用域非常類似。首先在本地查找變量和混合（mixins），如果找不到，則從“父”級作用域繼承。
@var: red;#page {@var: white;#header {color: @var; // white} }與 CSS 自定義屬性一樣，混合（mixin）和變量的定義不必在引用之前事先定義。因此，下面的 Less 代碼示例和上面的代碼示例是相同的：
@var: red;#page {#header {color: @var; // white}@var: white; }4. less中的嵌套規則
5.導入（Importing）
“導入”的工作方式和你預期的一樣。你可以導入一個 .less 文件，此文件中的所有變量就可以全部使用了。如果導入的文件是 .less 擴展名，則可以將擴展名省略掉：
@import "library"; // library.less @import "typo.css";6. less中的混合
混合就是將一系列屬性從一個規則集引入到另一個規則集的方式
混合名以 “.”開頭
(1).普通混合
混合名{規則集}
編譯時該混合也被當類選擇器編譯出去
當然類選擇器也可以當普通混合使用
#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).不帶輸出的混合
混合名(){規則集}
編譯時該混合不被編譯
使用該混合時也需要加()
(3).帶參數的混合
混合名(變量){規則集}
編譯時該混合不被編譯
(4).帶參數并且有默認值的混合
混合名(變量有默認值){規則集}
編譯時該混合不被編譯
.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).帶多個參數的混合
上方演示的就帶多個參數
(6).命名參數
傳參時指定傳給某個形參值，其他使用默認值
若不指定，實參只會傳給第一形參
.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).匹配模式
先設置一個被引用的匹配模式的相關代碼
triangle.less
//把幾種模式的相同屬性放在這里，減少代碼量 //第一個參數為@_,調用其他模式會自動引入該混合中的屬性集 .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 版本開始，你還可以將混合（mixins）和規則集（rulesets）作為一組值的映射（map）使用。
#colors() {primary: blue;secondary: green; }.button {color: #colors[primary];border: 1px solid #colors[secondary]; }輸出符合預期：
.button {color: blue;border: 1px solid green; }8.less運算
在less中可以進行加減乘除的運算
一般只有一個數帶單位就行
算術運算符 +、-、*、/ 可以對任何數字、顏色或變量進行運算。如果可能的話，算術運算符在加、減或比較之前會進行單位換算。計算的結果以最左側操作數的單位類型為準。如果單位換算無效或失去意義，則忽略單位。無效的單位換算例如：px 到 cm 或 rad 到 % 的轉換。
// 所有操作數被轉換成相同的單位 @conversion-1: 5cm + 10mm; // 結果是 6cm @conversion-2: 2 - 3cm - 5mm; // 結果是 -1.5cm// conversion is impossible @incompatible-units: 2 + 5px - 3cm; // 結果是 4px// example with variables @base: 5%; @filler: @base * 2; // 結果是 10% @other: @base + @filler; // 結果是 15%乘法和除法不作轉換。因為這兩種運算在大多數情況下都沒有意義，一個長度乘以一個長度就得到一個區域，而 CSS 是不支持指定區域的。Less 將按數字的原樣進行操作，并將為計算結果指定明確的單位類型。
@base: 2cm * 3mm; // 結果是 6cm你還可以對顏色進行算術運算：
@color: #224488 / 2; //結果是 #112244 background-color: #112244 + #111; // 結果是 #223355現在除法算式需要加上括號，或./強制運算，否則不編譯
9. less繼承
- 性能比混合高
- 靈活度比混合低
(1)基本用法
繼承被附在選擇器后面或放置在規則集（即具體定于樣式處），它看起來就像是一個在關鍵字extend后具有可選參數的偽類（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中，關鍵字extend里面的選擇器必須與已定義的樣式選擇器嚴格一致，如div .a{}樣式只能通過extend（div .a）繼承，而不能是extend（.a），盡管這兩者在CSS中并沒太多區別
.a.class, .class.a, .class > .a {color: blue; } .test:extend(.class) {} // this will NOT match the any selectors above編譯將提示：extend ‘.class’ has no matches錯誤。此外，通配符也不能用于此情況。
(4)extend的選擇器替代問題
此處即針對《less筆記-變量》文中選擇器名字被變量替代的情況。只需extend繼承的選擇器名不包含變量，或在被參考的地方不是變量即可。
@myClass:.redColor;@{myClass}{color:red; } .class{color:red; } .subClass:extend(.redColor){} //extend參考的選擇器名在參考處為變量，錯誤 .subClass:extend(@{myClass}){} //extend內選擇器名為變量，錯誤。 @myClass:extend(.class){} //不是上面兩種情況，無錯。(5)媒體查詢@media內的繼承范圍（scope）問題
同一個媒體查詢（@media）內可被繼承，
@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;} }說明：并非內外部優先級問題，實際編譯可知，若將媒體查詢print內部的.selector去掉，仍然無法繼承外部的.selector。
(6)Duplication（重復）問題
.class1,.class2{color:red; } .class3:extend(.class1,.class2){}注意：class1與class2是用逗號隔開，屬于分組查詢，所有不會有上面的第2條。編譯為：
.class1, .class2, .class3, .class3 {color: red; }可見繼承于分組選擇器將是每個都單獨繼承。對于此處class1與class2完全一樣的情況，extend內只寫一個即可，不存在匹配問題。
(7)繼承的經典使用情況
extend的經典使用情況在于，用于減少基類的使用。
如：現在有個默認字體樣式類baseStyle，此外有個與baseStyle稍有差別的類specialStyle。則使css較少的css與html分別可為：
css：
.baseStyle{color:gray;font-weight:500; } .specialStyle{color:blue; }html：
<p class="baseStyle">我是默認的段落樣式</p> <p class="baseStyle specialStyle">我是默認樣式上加了特殊樣式的段落</p>而思路相同，卻更好的做法是使用Less的繼承：
.baseStyle{color:gray;font-weight:500; } .specialStyle:extend(.baseStyle){color:blue; }效果雖一樣，但使用less將使html結構信息更加直觀，也更便于日后修改。
繼承實際上是將當前的選擇器名以分組形式添加到被繼承的選擇器處，所以當既有繼承又有自身樣式時，應注意被繼承的選擇器的位置。
情況一：被繼承的選擇器在前面
.parentClass{color:red; } .subClass{color:blue;&:extend(.parentClass);border:1px solid blue; }編譯結果，與預期一致，使用了自身的特殊color：
.parentClass, .subClass {color: red; } .subClass {color: blue;border: 1px solid blue; }情況二：被繼承的選擇器在后面
.subClass{color:blue;&:extend(.parentClass);border:1px solid blue; } .parentClass{color:red; }編譯結果，因為位置原因，與預期不一致，此時此例中繼承沒達到目的：
.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() 并不對數學表達式進行計算，但是在嵌套函數中會計算變量和數學公式的值。
@var: 50vh/2; width: calc(50% + (@var - 20px)); // 結果是 calc(50% + (25vh - 20px))//~"" 里面的任何內容都不進行計算 padding: ~"calc(50% + (@var - 20px))";// 結果是 calc(50% + (@var - 20px))總結
- 上一篇： 【经验分享】Typora如何添加数学公式
- 下一篇： [LeetCode] 871. Mini