記一只小白的分享
歡迎訪問'’me''的csdn博客園：https://blog.csdn.net/weixin_41871290
安裝 less
$ npm install -g less? ? ?//全局安裝
我們現(xiàn)在要編譯less文件夾下的tess.less文件，編譯時需先定位到項目中的less文件目錄，然后使用如下命令進(jìn)行編譯，這樣就可以將test.less文件編譯成test.css文件了。
$ lessc test.less test.css
$ lessc test.less test.css
還有一種情況就是需要將.less文件和.css文件存放不同目錄，如剛演示的項目目錄，.less 文件位于styles/less/目錄下，我們需要將編譯后得到的.css文件放在styles/css目錄下時，可以這樣處理，首先定位到項目的styles目錄，然后執(zhí)行如下指令即可：
$ lessc less/test.less css/test.css
$lessc less/test.less css/test.css
這和我們平時訪問文件夾的相對路徑是一樣的。
編譯壓縮文件
首先你需要安裝壓縮插件
注意：安裝路徑需放置在less目錄下（/usr/local/lib/node_modules/less）
$ npminstall-gless-plugin-clean-css
$ npm install -g less-plugin-clean-css
然后在編譯的時候添加-clean-css即可，如下嗾使：
$ lessc test.less? test.min.css -clean-css
$ lessc test.less test.min.css -clean-css
這樣，你的less文件就被編譯成壓縮后的css文件了
/* 此注釋方法會編譯 */
// 此注釋方法不會被編譯
聲明語法：@變量名:值;，如：@box_len:300px;
// 定義變量
@boxLen:160px;
@bgColor: #000;
// 使用變量
.box {
width:@boxLen;
height:@boxLen;
background:@bgColor;
}
編譯后的樣式為：
.box{
width:160px;
height:160px;
background:#000;
}
我們先來看一個示例，幫助理解混合。
// 定義變量
@boxLen:160px;
@bgColor: #000;
// 定義.box樣式
.box {
// 使用變量
width:@boxLen;
height:@boxLen;
background:@bgColor;
// 混合使用
? ? .bordered;
}
.bordered {
border:5px solid #808080;
}
運行程序，我們可以發(fā)現(xiàn)黑色視圖多了一個邊框，我們知道，以前要實現(xiàn)這個邊框，我們需要為.box添加一個類.bordered，在 less 中，利用混合這一特性，我們可以直接在.box {}內(nèi)使用.bordered，而無需再到html頁面中為對應(yīng)元素添加類名。
混合還可以帶參數(shù)，假設(shè)我們定義了一個邊框，在后面的盒子中我們都會采用這個邊框，但是每個盒子的邊框粗細(xì)不一樣，這個時候我們可以使用混合參數(shù)來實現(xiàn)這一功能，具體參考下面的示例：
// 定義變量
@boxLen:160px;
@bgColor: #000;
// 定義.box樣式
.box {
// 使用變量
width:@boxLen;
height:@boxLen;
background:@bgColor;
// 混合使用
// 傳入?yún)?shù)
.bordered(10px);
}
.bordered(@borderW) {
border:@borderWsolid #808080;
}
我們也可以為混合指定一個默認(rèn)值，這樣在調(diào)用時就無需傳入?yún)?shù)， 但是切記，括號不能省略。
.box {
? ? .bordered();
}
.bordered(@borderW:10px) {
border:@borderWsolid pink;
}
提示：混合如果定義時，設(shè)置了參數(shù)，那么在調(diào)用時必須有圓括號，否則程序報錯。
.border-radius(@radius:5px) {
-webkit-border-radius:@radius;
-moz-border-radius:@radius;
border-radius:@radius;
}
@arguments包含了所有傳遞進(jìn)來的參數(shù). 如果你不想單獨處理每一個參數(shù)的話就可以像這樣寫:
.box-shadow(@offsetX:0px,@offsetY:0px,@blur:1px,@color: purple) {
-webkit-box-shadow:@arguments;
-moz-box-shadow:@arguments;
box-shadow:@arguments;
}
.box {
.box-shadow(6px,8px);
}
輸出為：
.box{
-webkit-box-shadow:6px8px1pxpurple;
-moz-box-shadow:6px8px1pxpurple;
box-shadow:6px8px1pxpurple;
}
再來看一個示例：
.border(@width:5px; @style: solid; @color:#000) {
? ? // border: @width @style @color;
? ? border: @arguments;
}
相當(dāng)于編程語言中的if語句，即如果滿足條件，則執(zhí)行。我們來看一個示例：
.triangle(top; @border_width:5px; @border_color:#000;) {
? border: @border_width solid transparent;
? border-bottom-color: @border_color;
}
.triangle(bottom; @border_width:5px; @border_color:#000;) {
? border: @border_width solid transparent;
? border-top-color: @border_color;
}
.triangle(left; @border_width:5px; @border_color:#000;) {
? border: @border_width solid transparent;
? border-right-color: @border_color;
}
.triangle(right; @border_width:5px; @border_color:#000;) {
? border: @border_width solid transparent;
? border-left-color: @border_color;
}
// 默認(rèn)執(zhí)行(無論是否匹配，都會執(zhí)行)
.triangle(@_; @border_width:5px; @border_color:#000;) {
? width:? 0px;
? height:? 0px;
? overflow: hidden;
}
.box {
? .triangle(top);
}
上述示例中，調(diào)用 .triangle ，根據(jù)參數(shù)進(jìn)行匹配，選擇不同的樣式。
當(dāng)我們想根據(jù)表達(dá)式進(jìn)行匹配，而非根據(jù)值和參數(shù)匹配時，導(dǎo)引就顯得非常有用。如果你對函數(shù)式編程非常熟悉，那么你很可能已經(jīng)使用過導(dǎo)引。
為了盡可能地保留CSS的可聲明性，LESS通過導(dǎo)引混合而非if/else語句來實現(xiàn)條件判斷，因為前者已在@media query特性中被定義。
以此例做為開始：
.mixin(@a) when (lightness(@a) >=50%) {
background-color:black;
}
.mixin(@a) when (lightness(@a) <50%) {
background-color:white;
}
.mixin(@a) {
color: @a;
}
when關(guān)鍵字用以定義一個導(dǎo)引序列(此例只有一個導(dǎo)引)。接下來我們運行下列代碼：
.class1 { .mixin(#ddd) }
.class2 { .mixin(#555) }
就會得到：
.class1{
background-color: black;
color:#ddd;
}
.class2{
background-color: white;
color:#555;
}
導(dǎo)引中可用的全部比較運算有：> >= = =< <。此外，關(guān)鍵字true只表示布爾真值，下面兩個混合是相同的：
.truth (@a)when(@a) { ... }
.truth (@a)when(@a=true) { ... }
除去關(guān)鍵字true以外的值都被視示布爾假：
.class{
.truth(40);// Will not match any of the above definitions.
}
導(dǎo)引序列使用逗號‘,’—分割，當(dāng)且僅當(dāng)所有條件都符合時，才會被視為匹配成功。
.mixin (@a)when(@a >10), (@a < -10) { ... }
導(dǎo)引可以無參數(shù)，也可以對參數(shù)進(jìn)行比較運算：
@media: mobile;
.mixin (@a)when(@media = mobile) { ... }
.mixin (@a)when(@media = desktop) { ... }
.max (@a, @b)when(@a > @b) { width: @a }
.max (@a, @b)when(@a < @b) { width: @b }
最后，如果想基于值的類型進(jìn)行匹配，我們就可以使用is*函式：
.mixin (@a, @b:0)when(isnumber(@b)) { ... }
.mixin (@a, @b: black)when(iscolor(@b)) { ... }
下面就是常見的檢測函式：
iscolor
isnumber
isstring
iskeyword
isurl
如果你想判斷一個值是純數(shù)字，還是某個單位量，可以使用下列函式：
ispixel
ispercentage
isem
最后再補充一點，在導(dǎo)引序列中可以使用and關(guān)鍵字實現(xiàn)與條件：
.mixin (@a)when(isnumber(@a))and(@a >0) { ... }
使用not關(guān)鍵字實現(xiàn)或條件
.mixin (@b)whennot(@b >0) { ... }
Less 支持加減乘除運算。
@width:100px;
.box {
width:@width-20;
}
Less允許嵌套，我們來看一個示例：
使用css設(shè)計標(biāo)簽樣式時，我們經(jīng)常會這樣寫：
.list{}
.listli{}
.lista{}
.listspan{}
Less引入嵌套之后，我們可以這樣來設(shè)計樣式：
.list{
? ? li {}
? ? a? {}
? ? span {}
}
當(dāng)然Less也允許使用&符號添加偽類，比如，我們要給超鏈接添加一個hover效果，css會這樣寫：
lia{text-decoreation: none;color:#000; }
lia:hover{text-decoreation: underline;color: red;}
這種方法有些復(fù)雜，Less實現(xiàn)則更加簡單一些：
li a {
text-decoreation:none; color: #000;
// & 代表它的上一層選擇器
? ? &:hover { text-decoreation: underline; color: red;}
}
LESS 提供了一系列的顏色運算函數(shù). 顏色會先被轉(zhuǎn)化成HSL色彩空間, 然后在通道級別操作:
lighten(@color,10%);//returna color which is10% *lighter* than @color
darken(@color,10%);//returna color which is10% *darker* than @color
saturate(@color,10%);//returna color10% *more* saturated than @color
desaturate(@color,10%);//returna color10% *less* saturated than @color
fadein(@color,10%);//returna color10% *less* transparent than @color
fadeout(@color,10%);//returna color10% *more* transparent than @color
fade(@color,50%);//return@color with50% transparency
spin(@color,10);//returna color with a10degree largerinhue than @color
spin(@color, -10);//returna color with a10degree smaller hue than @color
mix(@color1, @color2);//returna mix of @color1and@color2
使用起來相當(dāng)簡單:
@base:#f04615;
.class{
color:saturate(@base,5%);
background-color:lighten(spin(@base,8),25%);
}
你還可以提取顏色信息:
hue(@color);//returns the`hue`channel of @color
saturation(@color);//returns the`saturation`channel of @color
lightness(@color);//returns the'lightness'channel of @color
如果你想在一種顏色的通道上創(chuàng)建另一種顏色，這些函數(shù)就顯得那么的好用，例如:
@new: hsl(hue(@old),45%,90%);
@new將會保持@old的色調(diào), 但是具有不同的飽和度和亮度.
LESS提供了一組方便的數(shù)學(xué)函數(shù)，你可以使用它們處理一些數(shù)字類型的值:
round(1.67);//returns`2`
ceil(2.4);//returns`3`
floor(2.6);//returns`2`
如果你想將一個值轉(zhuǎn)化為百分比，你可以使用percentage函數(shù):
percentage(0.5);//returns`50%`
有時候，你可能為了更好組織CSS或者單純是為了更好的封裝，將一些變量或者混合模塊打包起來, 你可以像下面這樣在#bundle中定義一些屬性集之后可以重復(fù)使用:
#bundle {
? .button () {
display:block;
border:1px solid black;
background-color:grey;
&:hover{ background-color:white }
? }
? .tab { ... }
? .citation { ... }
}
你只需要在#header a中像這樣引入.button:
#header a {
? color: orange;
#bundle > .button;
}
LESS 中的作用域跟其他編程語言非常類似，首先會從本地查找變量或者混合模塊，如果沒找到的話會去父級作用域中查找，直到找到為止.
@var: red;
#page {
@var: white;
#header {
color: @var;// white
? }
}
#footer {
color: @var;// red?
}
你可以在main文件中通過下面的形勢引入.less文件,.less后綴可帶可不帶:
@import"lib.less";
@import"lib";
如果你想導(dǎo)入一個CSS文件而且不想LESS對它進(jìn)行處理，只需要使用.css后綴就可以:
@import"lib.css";
這樣LESS就會跳過它不去處理它.
變量可以用類似ruby和php的方式嵌入到字符串中，像@{name}這樣的結(jié)構(gòu):
@base-url:"http://assets.fnord.com";
background-image: url("@{base-url}/images/bg.png");
有時候我們需要輸出一些不正確的CSS語法或者使用一些LESS不認(rèn)識的專有語法。要輸出這樣的值我們可以在字符串前面加上一個：~ 。比如:
width: ~'calc(100% - 35px)'
類似于css中的!important，提升樣式優(yōu)先級。
