[目錄]

• Less為什么會(huì)出現(xiàn)诉字？
• 學(xué)習(xí)Less的網(wǎng)站
• Less的安裝環(huán)境
  • 離線的安裝方式
  • 在線的安裝方式
• less轉(zhuǎn)化成css

• 第一步 新建一個(gè)less文件
• 第二步 cmd解析編譯成css
  • GUI編譯工具
  • node.js
  • 使用clean-css 插件
  • 瀏覽器端不經(jīng)編譯直接使用

• Webstorm中l(wèi)ess的使用

• 如何讓less文件直接編譯成css文件
• 如何在Webstorm中配置less文件的模板

• Less語法

• 注釋
• 變量（規(guī)則黄选、使用）
• Minxin混入
  • 類名混入
  • 函數(shù)混入
  • 帶參數(shù)的函數(shù)混入
• 嵌套
• Import（引用）
• 函數(shù)（內(nèi)置函數(shù)和運(yùn)算）
  • less中定義函數(shù)
  • 內(nèi)置函數(shù)
    • 字符串函數(shù)
    • 綜合類函數(shù)
    • 算數(shù)函數(shù)
    • 顏色函數(shù)
    • 判斷函數(shù)

• Bootstrap中l(wèi)ess的定制

• 了解Bootstrap中l(wèi)ess模塊機(jī)制
• 如何定制Bootstrap
  • 線下定制
  • 線上定制
• 版本的更新說明

Less為什么會(huì)出現(xiàn)？

css(層疊樣式表)是一門標(biāo)記性語言橘洞，html和css不是編程語言捌袜，沒有變量，函數(shù)炸枣，作用域等概念虏等。語法簡單，但是看起來非常的繁瑣沒有邏輯适肠，而且很多的樣式都大量的冗余霍衫。
很多后臺(tái)的人員寫出來的css代碼，沒有規(guī)范就非常的凌亂侯养。不方便維護(hù)和擴(kuò)展敦跌。
Less、Sass和Stylus是css的預(yù)編譯語言逛揩，是一種編程語言柠傍，是后臺(tái)人員開發(fā)出來的，是在css的語法基礎(chǔ)之上辩稽，引入了變量惧笛，Mixin，運(yùn)算以及函數(shù)等功能逞泄，降低了維護(hù)成本患整。
以后綴名為.less的稱之為less文件
less可以在多種語言静檬、環(huán)境中使用，瀏覽器端并级、桌面客戶端拂檩、服務(wù)端。

學(xué)習(xí)Less的網(wǎng)站

Less官網(wǎng)（英文）
這個(gè)英文官網(wǎng)是一個(gè)響應(yīng)式站點(diǎn)
Less中文網(wǎng)
上面的英文網(wǎng)站是一個(gè)響應(yīng)式站點(diǎn)的網(wǎng)站嘲碧，下面是一個(gè)原封不動(dòng)照搬的一個(gè)中文網(wǎng)站稻励，但是我們學(xué)習(xí)的時(shí)候，還是要看下面的這個(gè)網(wǎng)站進(jìn)行學(xué)習(xí)
LESSCSS

Less的環(huán)境安裝

如何證明你的機(jī)子上有沒有安裝less愈涩？
要安裝less首先要安裝nodejs

win+R --> cmd --> node -v(如果安裝了node就會(huì)顯示版本號(hào)) -->npm -v(檢測一下npm是否自帶望抽，如果有會(huì)顯示版本號(hào)) --> lessc -v（如果安裝了less也會(huì)顯示版本號(hào)）

lessc.png

離線的安裝方式

C： --> 用戶/user --> 打開自己的用戶 -->AppData（因?yàn)樗请[藏文件，所以要先顯示隱藏文件）-->Roaming --> npm -->如果已經(jīng)安裝了less就會(huì)有兩個(gè)文件（less和less.cmd）履婉、如果沒有東西就把npm.zip進(jìn)行復(fù)制煤篙，如圖：

file.png

在線的安裝方式

打開npm --> npm install -g less --> 回車

install.png

好，這樣就安裝好less了

less轉(zhuǎn)化成css

less是沒有辦法直接使用在瀏覽器上面的毁腿，只有css才能直接使用到瀏覽器的上面辑奈。所以我們要把less轉(zhuǎn)化成css。

第一步 新建一個(gè)less文件

先新建一個(gè)less文件已烤，保存到桌面

@color:red;
a{
    color:@color;
}

第二步 cmd解析編譯成css

GUI編譯工具

初學(xué)者建議使用GUI編譯工具來編譯less文件鸠窗，下面是推薦的幾個(gè)編譯工具

• koala~win/mac/linux
  國人開發(fā)的less和sass編譯工具，界面化
• Codekit~mac
  一款自動(dòng)編譯Less/Sass/Stylus/CoffeeScript/Jade/Haml的工具胯究，要錢哦~~
• WinLess~win
  只是在windows下編譯less稍计，夠?qū)Ｒ坏?/li>
• SimpleLess~win/mac/linux
  也是一個(gè)less編譯的軟件

node.js

安裝了node之后就可以直接用node.js來編譯了。
在桌面目錄中打開cmd裕循，然后執(zhí)行命令dir（獲取當(dāng)前目錄的所有文件） --> 在當(dāng)前目錄上面寫lessc less.less less.css命令

less.png

就可以看到在桌面上同時(shí)生成了一個(gè)less.css的文件
打開之后里面的內(nèi)容是：

a{
    color:red;
}

這樣就可以在瀏覽器中使用了臣嚣。
（在編譯的過程中，同時(shí)會(huì)進(jìn)行檢查剥哑，如果有錯(cuò)就會(huì)報(bào)錯(cuò)）

使用clean-css 插件

安裝了這個(gè)插件之后硅则，輸出的時(shí)候就可以轉(zhuǎn)化成壓縮過的css

$ lessc --clean-css styles.less styles.min.css

瀏覽器端不經(jīng)編譯直接使用

• 下載LESSCSS的.js文件，例如lesscss-1.4.0.min.js
• 在頁面中引入.less文件

<link rel="stylesheet/less" href="example.less" />
注意這里rel里面的值是stylesheet/less星持，不是stylesheet

• 引入js文件

<script src="lesscss-1.4.0.min.js"></script>

特別注意：這里瀏覽器使用的是ajax來拉取.less文件抢埋，所以如果文件是file://開頭和跨域的情況弹灭，就無法拉取less文件督暂，還有就是部分服務(wù)器（IIS居多）會(huì)對(duì)未知的后綴名的文件返回404，解決方案就是為.less文件配置MIME值為text/css穷吮，或者直接將.less文件改名為.css文件即可

Webstorm 中的less的使用

如何讓less文件直接編譯成css文件

每次要修改less逻翁，都要修改編譯一下less，比較麻煩捡鱼。所以在webstorm中進(jìn)行自動(dòng)化編譯八回。
打開webstorm --> 新建一個(gè)less文件夾 --> 新建一個(gè)文件File --> 名稱是test.less --> 此時(shí)在屏幕上會(huì)出現(xiàn)一句話

less1.png

這句話的意思是，要不要監(jiān)聽less，讓其自動(dòng)化編譯生成css文件缠诅，點(diǎn)擊Add watcher溶浴，會(huì)彈出一個(gè)對(duì)話框：

lesswatch.png

這個(gè)對(duì)話框中的東西我們只關(guān)心畫框的部分就可以了，這個(gè)地址是我們剛才進(jìn)行離線安裝的地址管引，如果是空的的話就把地址進(jìn)行手動(dòng)的復(fù)制士败。點(diǎn)擊ok就可以自動(dòng)的進(jìn)行編譯了。
在less中寫語法之后褥伴，可以看到右邊的目錄中谅将，less文件有一個(gè)箭頭，點(diǎn)開其目錄下自動(dòng)生成了一個(gè)css文件重慢。

那如果沒有出現(xiàn)Add watcher那句話饥臂，怎么配置？
文件 --> 設(shè)置 --> 工具 --> File Watchers --> 點(diǎn)擊最右邊攔的 "+" 號(hào) --> 有一個(gè)less --> 也會(huì)彈出剛才的對(duì)話框 --> 配置完點(diǎn)擊確定就可以了似踱。

如何在Webstorm中配置less文件的模板

在文件夾中新建 --> 新建 --> 編輯文件模板 --> 點(diǎn)擊上面的 "+" 號(hào) --> 名稱 less file / 擴(kuò)展（后綴名） less --> 內(nèi)容寫 @charset "utf-8"; --> 確定
這樣就在新建的文件中配置好了less的文件隅熙。

Less語法

注釋

/*這個(gè)注釋可以在css中使用，也可以在less中使用*/
// 這個(gè)注釋可以在less中使用核芽，但是因?yàn)閏ss不支持猛们，所以這種類型的注釋是沒有辦法編譯到css文件中的

變量（variable）

變量允許我們定義一系列通用的樣式，在需要的時(shí)候去調(diào)用狞洋，這樣在修改的時(shí)候只需要修改全局的變量就可以了弯淘，十分的方便。

規(guī)則：

less 變量以@作為前綴吉懊，不能以數(shù)字開頭庐橙， 不能包含特殊字符。

使用：

/*定義了一個(gè)變量*/
@mainColor:#ff4400;

a:hover{
    color:@mainColor;
}

p{
    border: 1px solid @mainColor;
}

/*也可以進(jìn)行變量的拼接*/
@left:left;
/*拼接使用的時(shí)候要大括號(hào)包住*/
border-@{left}: 1px solid @mainColor;

Mixin混入

什么是混入借嗽，這個(gè)是在bootstrap中經(jīng)程睿看到的一個(gè)東西《竦迹混入可以將定義好的class A輕松的引入到class B中浆竭，從而簡單實(shí)現(xiàn)class B繼承所有class A的屬性。
定義的時(shí)候前面要加點(diǎn)惨寿。

類名混入

假如我定義了一個(gè)按鈕1邦泄，按鈕中有一些屬性，我在別的地方又有一個(gè)按鈕2裂垦，要加上這個(gè)按鈕1的屬性顺囊，和一些別的屬性，如果按照css的方式我要重新寫一遍蕉拢，那我就需要進(jìn)行混入了特碳。
來上代碼：

/*原來的按鈕的一些屬性和別的屬性*/
.btn{
    width:200px;
    height: 50px;
    background: #fff;
}

.btn_border{
    border: 1px solid #ccc;
}

.btn_danger{
    background: red;
}

.btn_block{
    display: block;
    width: 100%;
}

/*對(duì)css類的樣式進(jìn)行混入*/
.btn_b_d_b{
    .btn();
    .btn_border();
    .btn_danger();
    .btn_block();
}

函數(shù)混入

上面的東西有一些不好的地方全蝶，就是雖然我寫的時(shí)候比較簡潔了霉翔，但是編譯的時(shí)候還是全部都編譯進(jìn)去了。這個(gè)時(shí)候可以混入函數(shù)。(具體的函數(shù)知識(shí)在后面寫的)

.btn(){
    width:200px;
    height:200px;
    background: #fff;
}

.btn_border(){
    border:1px solid #ccc;
}

.btn_b{
    .btn();
    .btn_border();
}

這樣這里面的.btn和.btn_border都不會(huì)顯示到css文件之中去函喉，可以降低css中的代碼冗余青责。但是如果我要對(duì)樣式的具體值進(jìn)行改變呢禁偎，就涉及到參數(shù)了

帶參數(shù)的函數(shù)混入

注意：在定義參數(shù)要傳入默認(rèn)值杀怠，如果沒有默認(rèn)值，調(diào)用的時(shí)候必須要傳入值

/*less這樣會(huì)報(bào)錯(cuò)*/
.btn_border(@len){
    border:1px solid #ccc;
}

.btn_b{
    .btn();
    .btn_border();
}

/*兩種解決方案*/
/*1.在定義的時(shí)候傳入默認(rèn)值*/
.btn_border(@len:10px){
    border:1px solid #ccc;
    border-radius:@len;
}

.btn_b{
    .btn();
    .btn_border();
}

/*如果是上面的寫法腕唧，最終的border-radius是10px*/
.btn_b{
    .btn();
    .btn_border(20px);
}
/*如果調(diào)用的時(shí)候傳入?yún)?shù)了或辖，最終是20px*/
/*2.定義的時(shí)候沒有默認(rèn)值，在調(diào)用的時(shí)候傳入值*/
.btn_border(@len){
    border:1px solid #ccc;
    border-radius:@len;
    -webkit-border-radius:@len;
    -moz-border-radius:@len;
    -ms-border-radius:@len;
    -o-border-radius:@len;
}

.btn_b{
    .btn();
    .btn_border(10px);
}

嵌套

嵌套可以增強(qiáng)代碼的層級(jí)關(guān)系枣接，我們也可以通過嵌套來實(shí)現(xiàn)繼承颂暇，這樣很大程度減少了代碼量，代碼量看起來更加清晰但惶。

.nav{
    border-bottom: 1px solid #ccc;
    font-size: 12px;
    color:#666;
    a {
        color:#666;
    }
    > .container{
        line-height: 40px;
        text-align: center;
        > div{
        height:40px;
            ~ div{
            border-left:1px solid #ccc;
            }
        }
    }
}

這個(gè)時(shí)候要注意一個(gè)問題耳鸯，就是如果在寫偽元素、交集選擇器的時(shí)候膀曾，就會(huì)出現(xiàn)問題县爬，直接寫嵌套中間會(huì)默認(rèn)的加上空格。那么如何拼接上去呢添谊？

/*下面就是如何書寫偽元素和交集選擇器的寫法财喳，前面要加&*/
.nav{
      font-size:12px;
      &:hover{
            text-decoration:none;
      }
      &::before{
            content:"";
      }
}

Import（引用）

用less寫文件的時(shí)候，可以一個(gè)模塊寫一個(gè)less斩狱，但是index里面都要引用耳高，引用那么多個(gè)less文件就不合適了，這個(gè)時(shí)候就要建立一個(gè)總的less所踊，這是有一種解耦的開發(fā)思想泌枪，"高內(nèi)聚，低耦合"秕岛。
下面來梳理一下結(jié)構(gòu)：
<less里面所需要的模塊>

• 變量
• 函數(shù)
• 功能模塊（視自己的情況而定）
• 總（引用變量碌燕、函數(shù)、功能模塊）

如何引入继薛？

@import "variable.less";      /*引入變量修壕，后面可以加后綴*/
@import "mixin";              /*引入函數(shù)*/
@import "topBar";             /*引入功能模塊1*/
@import  "navBar";            /*引入功能模塊2*/

函數(shù)（內(nèi)置函數(shù)和運(yùn)算）

js中有兩種定義函數(shù)的方式

1.function fun(){ }
2.var fun = function(){ }

less中定義函數(shù)

a{
    color:red/2;     /*結(jié)果是#800000*/
}

li{
    width:100%/7;  /*每個(gè)li標(biāo)簽的寬度都是ul的1/7 */
}

.a(@len:12){
    width:100%/@len;
    color:lighten(#ddd,10%);   /*亮度提高10%，結(jié)果是#f7f7f7*/
}

col-xs-1{
    .a();
}

內(nèi)置函數(shù)

具體的有函數(shù)手冊(cè)

函數(shù)手冊(cè)

字符串函數(shù)

• escape(@string); // 通過 URL-encoding 編碼字符串
• e(@string); // 對(duì)字符串轉(zhuǎn)義
• %(@string, values...); // 格式化字符串

綜合類函數(shù)

• unit(@dimension, [@unit: ""]); // 移除或替換屬性值的單位
• color(@string); // 將字符串解析為顏色值
• data-uri([mimetype,] url); // * 將資源內(nèi)嵌到css中惋增，可能回退到url()

算數(shù)函數(shù)

• ceil(@number); // 向上取整
• floor(@number); // 向下取整
• percentage(@number); // 將數(shù)字轉(zhuǎn)換為百分比叠殷，例如 0.5 -> 50%
• round(number, [places: 0]); // 四舍五入取整（第二位是精度）
• sqrt(number); // * 計(jì)算數(shù)字的平方根（參數(shù)可以帶單位）
• abs(number); // * 數(shù)字的絕對(duì)值（參數(shù)可以帶單位）
• sin(number); // * sin函數(shù)（沒有單位默認(rèn)弧度值）

sin(1deg);   //1角度角的正弦值   0.01745240643728351
sin(1grad);  //1百分度角的正弦值   0.015707317311820675
/*百分度是將一個(gè)圓周分為400份改鲫，每份為一個(gè)百分度诈皿，英文gradian林束，簡寫grad*/

• asin(number); // * arcsin函數(shù)
  • 參數(shù)-1到1之間的浮點(diǎn)數(shù)，返回值弧度為單位稽亏，區(qū)間在-PI/2 到 PI/2 之間壶冒，超出范圍輸出NaNrad
• cos(number); // * cos函數(shù)
  • 與sin函數(shù)一樣
• acos(number); // * arccos函數(shù)
  • 參數(shù)-1到1之間的浮點(diǎn)數(shù)，返回值弧度為單位截歉，區(qū)間在 0 在 PI 之間胖腾，超出范圍輸出NaNrad
• tan(number); // * tan函數(shù)
  • 與sin函數(shù)一樣
• atan(number); // * arctan函數(shù)
  • 返回值區(qū)間在 -PI/2 到 PI/2 之間，其余和asin一樣
• pi(); // * 返回PI
• pow(@base, @exponent); // * 返回@base的@exponent次方
  • 返回值和@base有相同的單位瘪松，第二個(gè)單位忽略咸作，不符合規(guī)則返回NaN
• mod(number, number); // * 第一個(gè)參數(shù)對(duì)第二個(gè)參數(shù)取余
  • 返回值與第一個(gè)參數(shù)單位相同，可以處理負(fù)數(shù)和浮點(diǎn)數(shù)
• convert(number, units); // * 在數(shù)字之間轉(zhuǎn)換
• unit(number, units); // * 不轉(zhuǎn)換的情況下替換數(shù)字的單位

顏色函數(shù)

• color(string); // 將字符串或者轉(zhuǎn)義后的值轉(zhuǎn)換成顏色
  • 見綜合函數(shù)
• rgb(@r, @g, @b); // 轉(zhuǎn)換為顏色值
  • 參數(shù)是整數(shù)0-255宵睦，百分比0-100%记罚，轉(zhuǎn)化為十六進(jìn)制
• rgba(@r, @g, @b, @a); // 轉(zhuǎn)換為顏色值
  • 參數(shù)前三個(gè)是整數(shù)0-255，百分比0-100%壳嚎，第四個(gè)是0-1或者百分比0-100%桐智，
• argb(@color); // 創(chuàng)建 #AARRGGBB 格式的顏色值
  • 使用在IE濾鏡中，以及.NET和Android開發(fā)中
• hsl(@hue, @saturation, @lightness); // 創(chuàng)建顏色值
  • 通過色相烟馅、飽和度说庭、亮度三種值
  • @hue ： 整數(shù)0-360 表示度數(shù)
  • @saturation ： 百分比0-100% 或者數(shù)字 0 - 1
  • @lightness： 百分比0-100% 或者數(shù)字0 - 1
  • 返回值十六進(jìn)制的顏色值

/*如果想使用一種顏色來創(chuàng)建另一種顏色的時(shí)候就很方便*/
@new: hsl(hue(@old),45%,90%);

/*這里@new 將使用@old 的色相值，以及它自己的飽和度和亮度*/

• hsla(@hue, @saturation, @lightness, @alpha); // 創(chuàng)建顏色值
• hsv(@hue, @saturation, @value); // 創(chuàng)建顏色值
  • @hue 表示色相 郑趁， 整數(shù)0-360表示度數(shù)
  • @saturation 表示飽和度刊驴，百分比0-100% 或數(shù)字0-1
  • @value 表示色調(diào)，百分比0-100% 或數(shù)字0-1
  • 創(chuàng)建不透明的顏色對(duì)象

hsv(90,100%,50%)

輸出#408000

• hsva(@hue, @saturation, @value, @alpha); // 創(chuàng)建顏色值
• hue(@color); // 從顏色值中提取 hue 值（色相）
  • 返回值0-360的整數(shù)

hue(hsl(90,100%,50%))

輸出  90

• saturation(@color); // 從顏色值中提取 saturation 值（飽和度）
  • 返回值 百分比0-100

saturation(hsl(90,100%,50%))

輸出  100%

• lightness(@color); // 從顏色值中提取 'lightness' 值（亮度）
  • 返回0-100的百分比值

lightness(hsl(90,100%,50%))

輸出  50%

• hsvhue(@color); // * 從顏色中提取 hue 值寡润，以HSV色彩空間表示（色相）
  • 返回0-360 的整數(shù)
• hsvsaturation(@color); // * 從顏色中提取 saturation 值缺脉，以HSV色彩空間表示（飽和度）
  • 返回0-100百分比
• hsvvalue(@color); // * 從顏色中提取 value 值，以HSV色彩空間表示（色調(diào)）
  • 返回0-100百分比
• red(@color); // 從顏色值中提取 'red' 值（紅色）
  • 返回整數(shù)0-255
• green(@color); // 從顏色值中提取 'green' 值（綠色）
  • 返回整數(shù)0-255
• blue(@color); // 從顏色值中提取 'blue' 值（藍(lán)色）
  • 返回整數(shù)0-255
• alpha(@color); // 從顏色值中提取 'alpha' 值（透明度）
  • 返回浮點(diǎn)數(shù)0-1
• luma(@color); // 從顏色值中提取 'luma' 值（亮度的百分比表示法）
  • 返回百分比0-100%

顏色運(yùn)算（Color operations）

顏色值運(yùn)算有幾點(diǎn)注意事項(xiàng)：
參數(shù)必須單位/格式相同
百分比將作為絕對(duì)值處理悦穿，10%增加10%攻礼，是20%而不是11%
參數(shù)值只能在限定的范圍內(nèi)
返回值的時(shí)候，除了十六進(jìn)制外將其他格式做簡化處理

• saturate(@color, 10%); // 飽和度增加 10%
• desaturate(@color, 10%); // 飽和度降低 10%
• lighten(@color, 10%); // 亮度增加 10%
• darken(@color, 10%); // 亮度降低 10%
• fadein(@color, 10%); // 不透明度增加 10%栗柒，更不透明
• fadeout(@color, 10%); // 不透明度降低 10%礁扮，更透明
• fade(@color, 50%); // 設(shè)定透明度為 50%
• spin(@color, 10); // 色相值增加 10
  • 向任意方向旋轉(zhuǎn)顏色的色相角度，旋轉(zhuǎn)范圍是0-360瞬沦，超過將從起點(diǎn)繼續(xù)旋轉(zhuǎn)太伊，比如旋轉(zhuǎn)360和720是相同的結(jié)果。
  • 需要注意的是逛钻，顏色要通過 RGB 進(jìn)行格式轉(zhuǎn)換僚焦，這個(gè)過程不能保留灰色的色相值（灰色沒有飽和度，色相值也就沒有意義了）曙痘，因此要通過函數(shù)保留顏色的色相值
  • 因?yàn)轭伾涤肋h(yuǎn)輸出為RGB格式芳悲，因此spin()函數(shù)對(duì)灰色無效
• mix(@color1, @color2, [@weight: 50%]); // 混合兩種顏色
  • 第三個(gè)參數(shù)是平衡兩種顏色的百分比立肘，默認(rèn)是50%
• greyscale(@color); // 完全移除飽和度，輸出灰色
  • 與desaturate(@color, 100%)效果相同
• contrast(@color1, [@darkcolor: black], [@lightcolor: white], [@threshold: 43%]); // 如果 @color1 的 luma 值 > 43% 輸出 @darkcolor名扛，否則輸出 @lightcolor
  • 比較顏色的谅年，比較復(fù)雜，等用到的時(shí)候再說吧

顏色混合（Color blending）

顏色混合的方式與圖像編輯器 Photoshop, Firework 或者 GIMP 的圖層混合模式 (layer blending modes) 相似肮韧，因此制作 .psd 文件時(shí)處理顏色的方法可以同樣用在 CSS 中融蹂。

• multiply(@color1, @color2);
  • 分別將兩種顏色的RGB三種值做乘法運(yùn)算，然后再除以255弄企，輸出的結(jié)果是更深的顏色
  • 對(duì)應(yīng)ps中的“變暗/正片疊底”
• screen(@color1, @color2);
  • 結(jié)果是更亮的顏色超燃，對(duì)應(yīng)ps中的“變亮/濾色”
• overlay(@color1, @color2);
  • 結(jié)合前面兩個(gè)函數(shù)的效果，讓淺的更淺拘领，深的更深淋纲，類似于ps中的“疊加”
  • 第一個(gè)參數(shù)的疊加的對(duì)象，第二個(gè)參數(shù)是被疊加的顏色
• softlight(@color1, @color2);
  • 與overlay效果相似院究，只是當(dāng)純黑色和純白色作為參數(shù)的時(shí)候輸出結(jié)果不是純黑純白洽瞬，對(duì)應(yīng)ps中的“柔光”
  • 第一個(gè)參數(shù)是混合色（光源），第二個(gè)參數(shù)是被混合的顏色
• hardlight(@color1, @color2);
  • 與overlay效果相似业汰，不過由第二個(gè)顏色參數(shù)決定輸出顏色的亮度或黑度伙窃，對(duì)應(yīng)ps中的“強(qiáng)光/亮光/線性光/點(diǎn)光”
  • 第一個(gè)參數(shù)是混合色（光源），第二個(gè)參數(shù)是被混合的顏色
• difference(@color1, @color2);
  • 從第一個(gè)顏色值中減去第二個(gè)样漆，輸出是更深的顏色为障，對(duì)應(yīng)ps中的“差值/排除”
  • 第一個(gè)參數(shù)是被減的顏色對(duì)象，第二個(gè)參數(shù)是減去的顏色對(duì)象
• exclusion(@color1, @color2);
  • 效果和difference函數(shù)效果相似放祟，只是輸出結(jié)果差別更小鳍怨，ps中的“差值/排除”
  • 第一個(gè)參數(shù)是被減的顏色對(duì)象，第二個(gè)參數(shù)是減去的顏色對(duì)象
• average(@color1, @color2);//對(duì)RGB三種顏色取平均值
• negation(@color1, @color2);
  • 和difference函數(shù)效果相反跪妥，輸出結(jié)果是更亮的顏色
  • 注意：效果相反不代表做加法運(yùn)算
  • 第一個(gè)參數(shù)是被減的顏色對(duì)象鞋喇，第二個(gè)參數(shù)是減去的顏色對(duì)象

判斷函數(shù)

• iscolor(@colorOrAnything); // 判斷一個(gè)值是否是顏色
• isnumber(@numberOrAnything); // 判斷一個(gè)值是否是數(shù)字（可含單位）
• isstring(@stringOrAnything); // 判斷一個(gè)值是否是字符串
• iskeyword(@keywordOrAnything); // 判斷一個(gè)值是否是關(guān)鍵字
• isurl(@urlOrAnything); // 判斷一個(gè)值是否是url
• ispixel(@pixelOrAnything); // 判斷一個(gè)值是否是以px為單位的數(shù)值
• ispercentage(@percentageOrAnything); // 判斷一個(gè)值是否是百分?jǐn)?shù)
• isem(@emOrAnything); // 判斷一個(gè)值是否是以em為單位的數(shù)值
• isunit(@numberOrAnything, "rem"); // * 判斷一個(gè)值是否是指定單位的數(shù)值

含*號(hào)的函數(shù)只在1.4.0 beta以上版本中可用

Bootstrap中l(wèi)ess的定制

了解Bootstrap中l(wèi)ess模塊機(jī)制

• 在Bootstrap的less文件夾中有一個(gè)總文件是bootstrap.less
  • 里面有導(dǎo)入的變量、函數(shù)眉撵、基礎(chǔ)樣式（初始化文件侦香、圖標(biāo)）、核心樣式纽疟、組件罐韩、javascript組件等
• 在函數(shù)mixins.less中引用了很多的模塊的函數(shù)
  • 里面有彈出框、有按鈕污朽、有面板等很多的模塊

如何定制Bootstrap

線下定制

找到bootstrap的源碼 --> less文件夾 --> 修改源碼 --> bootstrap.less
比如：
Bootstrap默認(rèn)的柵格系統(tǒng)有12列散吵，間距15px，如果需要改的時(shí)候，修改變量Grid system中的
@grid-columns 12改成18
@grid-gutter-width 15px改成12px
類似于這樣修改完畢之后進(jìn)行編譯矾睦，shift+鼠標(biāo)右鍵 --> 此處打開命令窗口 --> lessc bootstrap.less bootstrap.css --> 回車

線上定制

定制并下載 -->不要哪個(gè)就把勾去掉 --> 修改哪個(gè)就修改 --> 點(diǎn)擊編譯并下載

版本的更新說明

在less的1.4.0的版本已經(jīng)更新了晦款，這個(gè)版本中引入了一些新的特性。什么派生啦顷锰，新的數(shù)學(xué)函數(shù)啦柬赐，還有嚴(yán)格運(yùn)算模式啦亡问，有興趣的可以深入的了解一下官紫。