文章地址：https://www.cnblogs.com/sandraryan/
之前就了解過less，但項目一直用的是css，所以，重新做一次系統的了解，順便寫個博客Orz
簡介
less和sass都是css的預處理語言，最常用於bootstrap
less 是基於js的，在客戶端處理（編譯less文件）
sass基於ruby，在服務器端處理
less安裝引入
另一種引入方法是直接下載 （指路：官網），或者cdn引入
舉個例子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="index.css"> </head> <body> <div class="box"> <p class="p1">test p</p> </div> <script src="https://cdn.bootcss.com/less.js/3.10.3/less.js"></script> <script></script> </body> </html>
html文件里引入css文件（這個css文件是less文件編譯產生的，vscode自動編譯），引入cdn的less文件
less 文件
@blue: lightblue; .p1 { background-color: @blue; }
less文件（具體后續再解釋~）
編譯后的css文件：
.p1 { background-color: lightblue; }
以上 一個簡單的demo~~~~
變量
普通變量
@blue: lightblue; .p1 { background-color: @blue; }
👆 @blue 是定義的一個新變量，名字為blue，值為lightblue
在調用的時候，直接用變量名調用
選擇器變量
選擇器可以被聲明為變量，調用時在前面加類型（.或者#），調用的時候要加上{}
@blue: lightblue; @p1 : p1; .@{p1}{ color: @blue; }
聲明選擇器變量的時候也可以直接聲明某種類型的選擇器
@p2 : .p2; @{p2} { color: red; }
屬性變量
屬性名也可以被聲明為變量，也要用{}調用
@b: border; .p3 { @{b}: 1px solid red; }
url變量
我怕覺得這個超好用der， 把一個路徑給一個變量，如果整個項目和img的相對路徑發生變化，直接修改變量就可以了
舉個栗子
@img : '../../img'; .p1 { background-image : url('@{img}/1.jpg'); } .p1 { background-image : url('@{img}/2.jpg'); }
申明變量
我的理解是，可以利用申明變量定義多條樣式，調用時加上()
@pre: { width: 100px; height: 100px; border: 1px solid red; } .p1 { @pre(); }
變量的計算
在計算的時候，加減法以第一個數據的單位為基准，稱出務必保持單位統一
顏色也可以計算~~~
@w : 200px; @c : #333; .p2 { width: 200px * 2; color: @c * 2; border: 1px solid green; }
轉換為css樣式是
.p2 { width: 400px; color: #666666; border: 1px solid green; }
可見注釋 隱藏注釋
也就是說 //后面的代碼注釋僅在less文件中可見，轉換為css文件不可見
/* you can see me */ // u can't see me
轉換為css
/* you can see me */
變量套娃😁
@c1 : 'hi,c1'; @c2 : 'c1'; .p3::before{ content : @@c2; }
轉為css
.p3::before { content: 'hi,c1'; }
less嵌套
less選擇器是可以嵌套的，可以根據不同的塊，使用不同樣式，有利於代碼維護，使css不容易互相影響
嵌套的時候，內層選擇器前面的 & 符號就表示對父選擇器的引用。 （& === 父元素）
在一個內層選擇器的前面，如果沒有 & 符號，則它被解析為父選擇器的后代；如果有 & 符號，它就被解析為父元素自身或父元素的偽類。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="index.css"> </head> <body> <div class="box1 box1_f"> <p class="p1">111</p> <p class="p2">222</p> <p class="p3">333</p> <p class="p4">444</p> </div> <div class="box2"> <p class="p1 box1_f">111</p> <p class="p2">222</p> <p class="p3">333</p> <p class="p4">444</p> </div> <script src="https://cdn.bootcss.com/less.js/3.10.3/less.js"></script> </body> </html>
less
.box1 { .p1 { // p1 被解析為box1 的后代p1 color: red; } } .box1 { // 在box1 后插入content內容 &:after{ content: 'hello, after box1'; } &_f { font-size: 20px; text-decoration: underline; } }
css
.box1 .p1 { color: red; } .box1:after { content: 'hello, after box1'; } .box1_f { font-size: 20px; text-decoration: underline; }
嵌套的less樣式會覆蓋為嵌套的（原理和cs選擇器一樣）
.box1 { .p1 { // p1 被解析為box1 的后代p1 color: red; } } .p1 { color: yellow; }
box1下的p1 紅色， box2 下的p1黃色 👆
媒體查詢
@media screen { @media (max-width : 768px){ .box1 { width: 700px; border: 1px solid green; } } @media (min-width: 770px){ .box1 { width: 100%; border: 2px solid red; } } }
css:
@media screen and (max-width: 768px) { .box1 { width: 700px; border: 1px solid green; } } @media screen and (min-width: 770px) { .box1 { width: 100%; border: 2px solid red; } }
↑ 在屏幕狀態下，寬度小於768px，box1 使700px且1px綠色邊框，屏幕大於770， 100%寬度，紅色邊框
less方法
less聲明的方法可以傳參，聲明方法可以用.和#，聲明的方法可以傳參，也可以有默認參數，調用時加上()，使用默認形參的話，不加也可以
舉個例子
.wh(@w:10px,@h:10px){ width :@w; height:@h; } .b(@a:1px,@b:solid,@c:red){ border: @a @b @c; } .box1 { .wh(60px,30px); .b(); } .box2 { .wh(60px,40px); .b(3px,dotted,green); }
css：
.box1 { width: 60px; height: 30px; border: 1px solid red; } .box2 { width: 60px; height: 40px; border: 3px dotted green; }
less方法還是很好用的~~~
less方法同時支持不定參
在定義這個方法之前，只有上帝知道后期要傳幾個參數
@arguments 是當前方法的參數列表 不定參用...表示
.e (...){ box-shadow : @arguments; } .box3 { .e(1px,4px,10px,blue); }
轉換后 css
.box3 { box-shadow: 1px 4px 10px blue; }
吃個飯
回來再寫。。。。