[目錄]
- Less為什么會出現？
- 學習Less的網站
- Less的安裝環境
- 離線的安裝方式
- 在線的安裝方式
- less轉化成css
- 第一步 新建一個less文件
- 第二步 cmd解析編譯成css
- GUI編譯工具
- node.js
- 使用clean-css 插件
- 瀏覽器端不經編譯直接使用
- Webstorm中less的使用
- 如何讓less文件直接編譯成css文件
- 如何在Webstorm中配置less文件的模板
- Less語法
- 注釋
- 變量（規則、使用）
- Minxin混入
- 類名混入
- 函數混入
- 帶參數的函數混入
- 嵌套
- Import（引用）
- 函數（內置函數和運算）
- less中定義函數
- 內置函數
- 字符串函數
- 綜合類函數
- 算數函數
- 顏色函數
- 判斷函數
- Bootstrap中less的定制
- 了解Bootstrap中less模塊機制
- 如何定制Bootstrap
- 線下定制
- 線上定制
- 版本的更新說明
Less為什么會出現？
css(層疊樣式表)是一門標記性語言，html和css不是編程語言，沒有變量，函數，作用域等概念。語法簡單，但是看起來非常的繁瑣沒有邏輯，而且很多的樣式都大量的冗余。
很多后臺的人員寫出來的css代碼，沒有規范就非常的凌亂。不方便維護和擴展。
Less、Sass和Stylus是css的預編譯語言，是一種編程語言，是后臺人員開發出來的，是在css的語法基礎之上，引入了變量，Mixin，運算以及函數等功能，降低了維護成本。
以后綴名為.less的稱之為less文件
less可以在多種語言、環境中使用，瀏覽器端、桌面客戶端、服務端。
學習Less的網站
Less官網（英文）
這個英文官網是一個響應式站點
Less中文網
上面的英文網站是一個響應式站點的網站，下面是一個原封不動照搬的一個中文網站，但是我們學習的時候，還是要看下面的這個網站進行學習
LESSCSS
Less的環境安裝
如何證明你的機子上有沒有安裝less？
要安裝less首先要安裝nodejs
win+R --> cmd --> node -v(如果安裝了node就會顯示版本號) -->npm -v(檢測一下npm是否自帶，如果有會顯示版本號) --> lessc -v（如果安裝了less也會顯示版本號）
離線的安裝方式
C： --> 用戶/user --> 打開自己的用戶 -->AppData（因為它是隱藏文件，所以要先顯示隱藏文件）-->Roaming --> npm -->如果已經安裝了less就會有兩個文件（less和less.cmd）、如果沒有東西就把npm.zip進行復制，如圖：
在線的安裝方式
打開npm --> npm install -g less --> 回車
好，這樣就安裝好less了
less轉化成css
less是沒有辦法直接使用在瀏覽器上面的，只有css才能直接使用到瀏覽器的上面。所以我們要把less轉化成css。
第一步 新建一個less文件
先新建一個less文件，保存到桌面
@color:red;
a{
color:@color;
}
第二步 cmd解析編譯成css
GUI編譯工具
初學者建議使用GUI編譯工具來編譯less文件，下面是推薦的幾個編譯工具
-
koala~win/mac/linux
國人開發的less和sass編譯工具，界面化 -
Codekit~mac
一款自動編譯Less/Sass/Stylus/CoffeeScript/Jade/Haml的工具，要錢哦~~ -
WinLess~win
只是在windows下編譯less，夠專一的 -
SimpleLess~win/mac/linux
也是一個less編譯的軟件
node.js
安裝了node之后就可以直接用node.js來編譯了。
在桌面目錄中打開cmd，然后執行命令dir（獲取當前目錄的所有文件） --> 在當前目錄上面寫lessc less.less less.css命令
就可以看到在桌面上同時生成了一個less.css的文件
打開之后里面的內容是：
a{
color:red;
}
這樣就可以在瀏覽器中使用了。
（在編譯的過程中，同時會進行檢查，如果有錯就會報錯）
使用clean-css 插件
安裝了這個插件之后，輸出的時候就可以轉化成壓縮過的css
$ lessc --clean-css styles.less styles.min.css
瀏覽器端不經編譯直接使用
- 下載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文件，還有就是部分服務器（IIS居多）會對未知的后綴名的文件返回404，解決方案就是為.less文件配置MIME值為text/css，或者直接將.less文件改名為.css文件即可
Webstorm 中的less的使用
如何讓less文件直接編譯成css文件
每次要修改less，都要修改編譯一下less，比較麻煩。所以在webstorm中進行自動化編譯。
打開webstorm --> 新建一個less文件夾 --> 新建一個文件File --> 名稱是test.less --> 此時在屏幕上會出現一句話
這句話的意思是，要不要監聽less，讓其自動化編譯生成css文件，點擊Add watcher，會彈出一個對話框：
這個對話框中的東西我們只關心畫框的部分就可以了，這個地址是我們剛才進行離線安裝的地址，如果是空的的話就把地址進行手動的復制。點擊ok就可以自動的進行編譯了。
在less中寫語法之后，可以看到右邊的目錄中，less文件有一個箭頭，點開其目錄下自動生成了一個css文件。
那如果沒有出現Add watcher那句話，怎么配置？
文件 --> 設置 --> 工具 --> File Watchers --> 點擊最右邊攔的 "+" 號 --> 有一個less --> 也會彈出剛才的對話框 --> 配置完點擊確定就可以了。
如何在Webstorm中配置less文件的模板
在文件夾中新建 --> 新建 --> 編輯文件模板 --> 點擊上面的 "+" 號 --> 名稱 less file / 擴展（后綴名） less --> 內容寫 @charset "utf-8"; --> 確定
這樣就在新建的文件中配置好了less的文件。
Less語法
注釋
/*這個注釋可以在css中使用，也可以在less中使用*/
// 這個注釋可以在less中使用，但是因為css不支持，所以這種類型的注釋是沒有辦法編譯到css文件中的
變量（variable）
變量允許我們定義一系列通用的樣式，在需要的時候去調用，這樣在修改的時候只需要修改全局的變量就可以了，十分的方便。
規則：
less 變量以@作為前綴，不能以數字開頭， 不能包含特殊字符。
使用：
/*定義了一個變量*/
@mainColor:#ff4400;
a:hover{
color:@mainColor;
}
p{
border: 1px solid @mainColor;
}
/*也可以進行變量的拼接*/
@left:left;
/*拼接使用的時候要大括號包住*/
border-@{left}: 1px solid @mainColor;
Mixin混入
什么是混入，這個是在bootstrap中經常看到的一個東西。混入可以將定義好的class A輕松的引入到class B中，從而簡單實現class B繼承所有class A的屬性。
定義的時候前面要加點。
類名混入
假如我定義了一個按鈕1，按鈕中有一些屬性，我在別的地方又有一個按鈕2，要加上這個按鈕1的屬性，和一些別的屬性，如果按照css的方式我要重新寫一遍，那我就需要進行混入了。
來上代碼：
/*原來的按鈕的一些屬性和別的屬性*/
.btn{
width:200px;
height: 50px;
background: #fff;
}
.btn_border{
border: 1px solid #ccc;
}
.btn_danger{
background: red;
}
.btn_block{
display: block;
width: 100%;
}
/*對css類的樣式進行混入*/
.btn_b_d_b{
.btn();
.btn_border();
.btn_danger();
.btn_block();
}
函數混入
上面的東西有一些不好的地方，就是雖然我寫的時候比較簡潔了，但是編譯的時候還是全部都編譯進去了。這個時候可以混入函數。(具體的函數知識在后面寫的)
.btn(){
width:200px;
height:200px;
background: #fff;
}
.btn_border(){
border:1px solid #ccc;
}
.btn_b{
.btn();
.btn_border();
}
這樣這里面的.btn和.btn_border都不會顯示到css文件之中去，可以降低css中的代碼冗余。但是如果我要對樣式的具體值進行改變呢，就涉及到參數了
帶參數的函數混入
注意：在定義參數要傳入默認值，如果沒有默認值，調用的時候必須要傳入值
/*less這樣會報錯*/
.btn_border(@len){
border:1px solid #ccc;
}
.btn_b{
.btn();
.btn_border();
}
/*兩種解決方案*/
/*1.在定義的時候傳入默認值*/
.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);
}
/*如果調用的時候傳入參數了，最終是20px*/
/*2.定義的時候沒有默認值，在調用的時候傳入值*/
.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);
}
嵌套
嵌套可以增強代碼的層級關系，我們也可以通過嵌套來實現繼承，這樣很大程度減少了代碼量，代碼量看起來更加清晰。
.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;
}
}
}
}
這個時候要注意一個問題，就是如果在寫偽元素、交集選擇器的時候，就會出現問題，直接寫嵌套中間會默認的加上空格。那么如何拼接上去呢？
/*下面就是如何書寫偽元素和交集選擇器的寫法，前面要加&*/
.nav{
font-size:12px;
&:hover{
text-decoration:none;
}
&::before{
content:"";
}
}
Import（引用）
用less寫文件的時候，可以一個模塊寫一個less，但是index里面都要引用，引用那么多個less文件就不合適了，這個時候就要建立一個總的less，這是有一種解耦的開發思想，"高內聚，低耦合"。
下面來梳理一下結構：
<less里面所需要的模塊>
- 變量
- 函數
- 功能模塊（視自己的情況而定）
- 總（引用變量、函數、功能模塊）
如何引入？
@import "variable.less"; /*引入變量，后面可以加后綴*/
@import "mixin"; /*引入函數*/
@import "topBar"; /*引入功能模塊1*/
@import "navBar"; /*引入功能模塊2*/
函數（內置函數和運算）
js中有兩種定義函數的方式
1.function fun(){ }
2.var fun = function(){ }
less中定義函數
a{
color:red/2; /*結果是#800000*/
}
li{
width:100%/7; /*每個li標簽的寬度都是ul的1/7 */
}
.a(@len:12){
width:100%/@len;
color:lighten(#ddd,10%); /*亮度提高10%，結果是#f7f7f7*/
}
col-xs-1{
.a();
}
內置函數
具體的有函數手冊
字符串函數
- escape(@string); // 通過 URL-encoding 編碼字符串
- e(@string); // 對字符串轉義
- %(@string, values...); // 格式化字符串
綜合類函數
- unit(@dimension, [@unit: ""]); // 移除或替換屬性值的單位
- color(@string); // 將字符串解析為顏色值
- data-uri([mimetype,] url); // * 將資源內嵌到css中，可能回退到url()
算數函數
- ceil(@number); // 向上取整
- floor(@number); // 向下取整
- percentage(@number); // 將數字轉換為百分比，例如 0.5 -> 50%
- round(number, [places: 0]); // 四舍五入取整（第二位是精度）
- sqrt(number); // * 計算數字的平方根（參數可以帶單位）
- abs(number); // * 數字的絕對值（參數可以帶單位）
- sin(number); // * sin函數（沒有單位默認弧度值）
sin(1deg); //1角度角的正弦值 0.01745240643728351
sin(1grad); //1百分度角的正弦值 0.015707317311820675
/*百分度是將一個圓周分為400份，每份為一個百分度，英文gradian，簡寫grad*/
- asin(number); // * arcsin函數
- 參數-1到1之間的浮點數，返回值弧度為單位，區間在-PI/2 到 PI/2 之間，超出范圍輸出NaNrad
- cos(number); // * cos函數
- 與sin函數一樣
- acos(number); // * arccos函數
- 參數-1到1之間的浮點數，返回值弧度為單位，區間在 0 在 PI 之間，超出范圍輸出NaNrad
- tan(number); // * tan函數
- 與sin函數一樣
- atan(number); // * arctan函數
- 返回值區間在 -PI/2 到 PI/2 之間，其余和asin一樣
- pi(); // * 返回PI
- pow(@base, @exponent); // * 返回@base的@exponent次方
- 返回值和@base有相同的單位，第二個單位忽略，不符合規則返回NaN
- mod(number, number); // * 第一個參數對第二個參數取余
- 返回值與第一個參數單位相同，可以處理負數和浮點數
- convert(number, units); // * 在數字之間轉換
- unit(number, units); // * 不轉換的情況下替換數字的單位
顏色函數
- color(string); // 將字符串或者轉義后的值轉換成顏色
- 見綜合函數
- rgb(@r, @g, @b); // 轉換為顏色值
- 參數是整數0-255，百分比0-100%，轉化為十六進制
- rgba(@r, @g, @b, @a); // 轉換為顏色值
- 參數前三個是整數0-255，百分比0-100%，第四個是0-1或者百分比0-100%，
- argb(@color); // 創建 #AARRGGBB 格式的顏色值
- 使用在IE濾鏡中，以及.NET和Android開發中
- hsl(@hue, @saturation, @lightness); // 創建顏色值
- 通過色相、飽和度、亮度三種值
- @hue ： 整數0-360 表示度數
- @saturation ： 百分比0-100% 或者數字 0 - 1
- @lightness： 百分比0-100% 或者數字0 - 1
- 返回值十六進制的顏色值
/*如果想使用一種顏色來創建另一種顏色的時候就很方便*/
@new: hsl(hue(@old),45%,90%);
/*這里@new 將使用@old 的色相值，以及它自己的飽和度和亮度*/
- hsla(@hue, @saturation, @lightness, @alpha); // 創建顏色值
- hsv(@hue, @saturation, @value); // 創建顏色值
- @hue 表示色相 ， 整數0-360表示度數
- @saturation 表示飽和度，百分比0-100% 或數字0-1
- @value 表示色調，百分比0-100% 或數字0-1
- 創建不透明的顏色對象
hsv(90,100%,50%)
輸出#408000
- hsva(@hue, @saturation, @value, @alpha); // 創建顏色值
- hue(@color); // 從顏色值中提取 hue 值（色相）
- 返回值0-360的整數
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 的整數
- hsvsaturation(@color); // * 從顏色中提取 saturation 值，以HSV色彩空間表示（飽和度）
- 返回0-100百分比
- hsvvalue(@color); // * 從顏色中提取 value 值，以HSV色彩空間表示（色調）
- 返回0-100百分比
- red(@color); // 從顏色值中提取 'red' 值（紅色）
- 返回整數0-255
- green(@color); // 從顏色值中提取 'green' 值（綠色）
- 返回整數0-255
- blue(@color); // 從顏色值中提取 'blue' 值（藍色）
- 返回整數0-255
- alpha(@color); // 從顏色值中提取 'alpha' 值（透明度）
- 返回浮點數0-1
- luma(@color); // 從顏色值中提取 'luma' 值（亮度的百分比表示法）
- 返回百分比0-100%
顏色運算（Color operations）
顏色值運算有幾點注意事項：
參數必須單位/格式相同
百分比將作為絕對值處理，10%增加10%，是20%而不是11%
參數值只能在限定的范圍內
返回值的時候，除了十六進制外將其他格式做簡化處理
- 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%); // 設定透明度為 50%
- spin(@color, 10); // 色相值增加 10
- 向任意方向旋轉顏色的色相角度，旋轉范圍是0-360，超過將從起點繼續旋轉，比如旋轉360和720是相同的結果。
- 需要注意的是，顏色要通過 RGB 進行格式轉換，這個過程不能保留灰色的色相值（灰色沒有飽和度，色相值也就沒有意義了），因此要通過函數保留顏色的色相值
- 因為顏色值永遠輸出為RGB格式，因此spin()函數對灰色無效
- mix(@color1, @color2, [@weight: 50%]); // 混合兩種顏色
- 第三個參數是平衡兩種顏色的百分比，默認是50%
- greyscale(@color); // 完全移除飽和度，輸出灰色
- 與desaturate(@color, 100%)效果相同
- contrast(@color1, [@darkcolor: black], [@lightcolor: white], [@threshold: 43%]); // 如果 @color1 的 luma 值 > 43% 輸出 @darkcolor，否則輸出 @lightcolor
- 比較顏色的，比較復雜，等用到的時候再說吧
顏色混合（Color blending）
顏色混合的方式與圖像編輯器 Photoshop, Firework 或者 GIMP 的圖層混合模式 (layer blending modes) 相似，因此制作 .psd 文件時處理顏色的方法可以同樣用在 CSS 中。
- multiply(@color1, @color2);
- 分別將兩種顏色的RGB三種值做乘法運算，然后再除以255，輸出的結果是更深的顏色
- 對應ps中的“變暗/正片疊底”
- screen(@color1, @color2);
- 結果是更亮的顏色，對應ps中的“變亮/濾色”
- overlay(@color1, @color2);
- 結合前面兩個函數的效果，讓淺的更淺，深的更深，類似于ps中的“疊加”
- 第一個參數的疊加的對象，第二個參數是被疊加的顏色
- softlight(@color1, @color2);
- 與overlay效果相似，只是當純黑色和純白色作為參數的時候輸出結果不是純黑純白，對應ps中的“柔光”
- 第一個參數是混合色（光源），第二個參數是被混合的顏色
- hardlight(@color1, @color2);
- 與overlay效果相似，不過由第二個顏色參數決定輸出顏色的亮度或黑度，對應ps中的“強光/亮光/線性光/點光”
- 第一個參數是混合色（光源），第二個參數是被混合的顏色
- difference(@color1, @color2);
- 從第一個顏色值中減去第二個，輸出是更深的顏色，對應ps中的“差值/排除”
- 第一個參數是被減的顏色對象，第二個參數是減去的顏色對象
- exclusion(@color1, @color2);
- 效果和difference函數效果相似，只是輸出結果差別更小，ps中的“差值/排除”
- 第一個參數是被減的顏色對象，第二個參數是減去的顏色對象
- average(@color1, @color2);//對RGB三種顏色取平均值
- negation(@color1, @color2);
- 和difference函數效果相反，輸出結果是更亮的顏色
- 注意：效果相反不代表做加法運算
- 第一個參數是被減的顏色對象，第二個參數是減去的顏色對象
判斷函數
- iscolor(@colorOrAnything); // 判斷一個值是否是顏色
- isnumber(@numberOrAnything); // 判斷一個值是否是數字（可含單位）
- isstring(@stringOrAnything); // 判斷一個值是否是字符串
- iskeyword(@keywordOrAnything); // 判斷一個值是否是關鍵字
- isurl(@urlOrAnything); // 判斷一個值是否是url
- ispixel(@pixelOrAnything); // 判斷一個值是否是以px為單位的數值
- ispercentage(@percentageOrAnything); // 判斷一個值是否是百分數
- isem(@emOrAnything); // 判斷一個值是否是以em為單位的數值
- isunit(@numberOrAnything, "rem"); // * 判斷一個值是否是指定單位的數值
含*號的函數只在1.4.0 beta以上版本中可用
Bootstrap中less的定制
了解Bootstrap中less模塊機制
- 在Bootstrap的less文件夾中有一個總文件是bootstrap.less
- 里面有導入的變量、函數、基礎樣式（初始化文件、圖標）、核心樣式、組件、javascript組件等
- 在函數mixins.less中引用了很多的模塊的函數
- 里面有彈出框、有按鈕、有面板等很多的模塊
如何定制Bootstrap
線下定制
找到bootstrap的源碼 --> less文件夾 --> 修改源碼 --> bootstrap.less
比如：
Bootstrap默認的柵格系統有12列，間距15px，如果需要改的時候，修改變量Grid system中的
@grid-columns 12改成18
@grid-gutter-width 15px改成12px
類似于這樣修改完畢之后進行編譯，shift+鼠標右鍵 --> 此處打開命令窗口 --> lessc bootstrap.less bootstrap.css --> 回車
線上定制
定制并下載 -->不要哪個就把勾去掉 --> 修改哪個就修改 --> 點擊編譯并下載
版本的更新說明
在less的1.4.0的版本已經更新了，這個版本中引入了一些新的特性。什么派生啦，新的數學函數啦，還有嚴格運算模式啦，有興趣的可以深入的了解一下。
