Less基礎知識

Posted 2020-10-09 獨行者

建議在流覽器中使用Less僅用於開發，或者當您需要動態編譯較少的代碼並且無法做到這一點。這是因為less.js是一個大型的javascript檔，並且在用戶可以看到該頁面意味著用戶的延遲之前編譯Less。另外，考慮到移動設備編譯速度會更慢。對於開發考慮如果使用觀察者和活重新載入（例如與咕嚕聲或gulp）將更適合。

引入：less引入後需要在服務器上運行才有效果，在本地的話只有Firefox和IE支持，Chrome不支持。

客戶端使用Less,一定要注意，“Less樣式檔一定要放在less腳本檔之前”。

<link rel="stylesheet/less" type="text/css" href="less.less">

<script src="less.js" type="text/javascript"></script>

https://raw.githubusercontent.com/less/less.js/v2.5.3/dist/less.min.js

1、變量（Variables）：

@color: #4d926f;

@nice-blue: #5b83ad;

@light-blue: @nice-blue + #111; //可以計算

引用：h2 { color: @color; background:@light-blue; }

注：在Less中的變量實際上就是一個“常量”，因為它們只能被定義一次。

@color: #253636;

@highlight: "color";

@color: #ff3636;

#header {color: @@highlight;} //編譯後為：#header {color: #ff3636;}

後面的@color覆蓋前面的@color

2、混入（Mixin）：

自定義一個類：

.roundedCorners(@radius:5px) { //帶默認值，不帶也可

-moz-border-radius: @radius;

-webkit-border-radius: @radius;

border-radius: @radius;

}

引用： #header { .roundedCorners; }

#footer { .roundedCorners(10px); }

不帶參數，不傳參的類：

.wrap(){

text-wrap: wrap;

white-space: pre-wrap;

white-space: -moz-pre-wrap;

word-wrap: break-word;

}

引用：pre { .wrap; }

特殊參數：@argument表示所有參數

.boxShadow(@x:0,@y:0,@blur:1px,@color:#000){

-moz-box-shadow: @arguments;

-webkit-box-shadow: @arguments;

box-shadow: @arguments;

}

引用： #header { .boxShadow(2px,2px,3px,#f36); }

3、嵌套規則：

<div id="header">

<h1><a href="">W3cplus</a></h1>

<p>記述前端那些事——引領Web前沿</p>

</div>

Less Code:

#header{display: inline; float: left;

h1{font-size: 26px;font-weight: bold;

a{text-decoration: none;color: #f36;

&:hover{text-decoration: underline;color: #63f;} //偽類寫法

}

}

p{font-size: 12px;}

}

注釋：有&時解析的是同一個元素或此元素的偽類，沒有&解析是後代元素

4、Functions & Operations

支持四則運算+、-、*、/、和()

@var: 20px;

#header {

width: @var + 5 * 2;/* 先算5 * 2 = 10 然後在算了 @var + 10 = 30px,其實就是"@var+(5*2)"*/

height: (@var + 5 ) * 2;/*先算(@var + 5) = 25px,又算了25*2=50px，因為括弧更具有優先權*/

}

Color Fuctions：

lighten(@color, 10%); // 返回顏色亮度比@color亮10%

darken(@color, 10%); // 返回顏色亮度比@color暗10%

saturate(@color, 10%); // 返回顏色飽和度比@color多10%

desaturate(@color, 10%); // 返回顏色飽和度比@color少10%

fadein(@color, 10%); // 返回顏色透明度比@color少10%

fadeout(@color, 10%); // 返回顏色透明度比@color多10%

spin(@color, 10); // 返回顏色色調比@color高10度

spin(@color, -10); // 返回顏色色調比@color低10度

提取顏色值：

hue(@color); // 獲取@colorの色調(hue)

saturation(@color); // 獲取@colorの飽和度(saturation)

lightness(@color); // 獲取@colorの亮度(lightness)

例如： @color: #f36;

#header { }

5、命名空間

#bundle {

.button () {display: block;border: 1px solid black;

&:hover { background-color: white }

}

.tab { ... }

.citation { ... }

}

外部引用：#header a { color: orange; #bundle > .button; } //將#bundle中的.button的樣式套用給#headerのa

6、變量範圍和注釋：

Less中採取的是就近原則，換句話說，元素先找本身有沒有這個變量存在，如果本身存在，就取本身中的變量，如果本身不存在，就尋找父元素，依此類推，直到尋找到相對應的變量。

注釋：單行：// 多行：/*注釋內容*/