每一門技術(shù)的出現(xiàn)都是為了解決現(xiàn)存的問題矢腻，同樣的，Less 的出現(xiàn)是為了解決 CSS 中過于呆板的寫法。Less 官方文檔 中對 Less 的使用有詳細的介紹，總結(jié)一下為：Less = 變量 + 混合 + 函數(shù)。如果你對 js 和 css 有所了解璧榄，那么就可以很快的掌握并在你的項目中使用 Less。
一搓蚪、Less 使用初體驗
1. 使用 Less 寫樣式
使用 Npm 全局安裝 Less
$ npm install less -g
創(chuàng)建一個空文件夾，這里命名為：learn-less
在根目錄下創(chuàng)建 index.html 文件，復制內(nèi)容如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>初識 Less</title>
<link href="./main.css" rel="stylesheet">
</head>
<body>
<div class="container">1</div>
<div class="container2">2</div>
<div class="container3">3</div>
</body>
</html>
在根目錄下創(chuàng)建 main.less 文件团驱，復制內(nèi)容如下：
// main.less
@width: 100%;
@height: 100px;
@color: red;
.container{
width: @width;
height: @height;
background-color: @color;
margin-bottom: 5px;
}
.container2{
width: @width;
height: @height;
background-color: @color;
margin-bottom: 5px;
}
.container3{
width: @width;
height: @height;
background-color: @color;
margin-bottom: 5px;
}
現(xiàn)在打開瀏覽器看一下，會發(fā)現(xiàn)并沒有加載樣式。這是因為 index.html 中引入的樣式文件是 main.css 而不是 main.less。所以接下來，我們需要將 main.less 轉(zhuǎn)換為 main.css，不用擔心东囚，這一步驟并不需要你手動操作植兰，僅僅是運行一條命令就會自動完成轉(zhuǎn)換钉跷。
$ lessc main.less
操作完以上步驟就會發(fā)現(xiàn)在根目錄下生成了一個 main.css 文件膝晾，此時再打開瀏覽器看看幻赚，樣式已經(jīng)出現(xiàn)了。
main.css 轉(zhuǎn)義內(nèi)容為：
.container {
width: 100%;
height: 100px;
background-color: red;
margin-bottom: 5px;
}
.container2 {
width: 100%;
height: 100px;
background-color: red;
margin-bottom: 5px;
}
.container3 {
width: 100%;
height: 100px;
background-color: red;
margin-bottom: 5px;
}
如果你使用了 Webstorm 作為開發(fā)工具臊旭，那么連手動輸入命令行這一步都可以跳過落恼，因為 Webstorm 會在你的 .less 文件被修改后自動生成對應的 .css 文件，具體配置跳轉(zhuǎn)：Webstorm 配置 Less 自動轉(zhuǎn)譯成 css
2. 感受 Less 的便利
現(xiàn)在有一個新的需求离熏，需要將三個 div 的背景顏色改成藍色（blue）佳谦，如果是之前 css 的寫法需要依次找到 container、container2滋戳、container3钻蔑，對應修改里面的 background-color 屬性，但是使用 less 我們僅僅修改前面定義過的變量值即可奸鸯。
// main.less
@width: 100%;
@height: 100px;
@color: blue;
...
使用 lessc main.less 進行轉(zhuǎn)譯后打開瀏覽器可以看到三個 div 的背景顏色已經(jīng)被改變了咪笑。
二、變量
在前面介紹的案例中已經(jīng)使用了“變量”的概念娄涩，是不是感覺和 js 很像窗怒，事實上 less 就是用 js 的寫法來寫 css。
官網(wǎng)在介紹變量的時候會給出很多應用場景蓄拣，總結(jié)一下就是使用 @ 符號定義變量兜粘，使用 @ 符號獲取變量，僅僅將 @變量名 看成是一個字符串弯蚜。
@classname: main;
@color: red;
.@classname{
background-color: @color;
}
從上面例子中可以看到孔轴，變量不僅僅可以作為樣式屬性值：background-color: @color;，還可以作為類名：.@classname 表示的就是 .main碎捺。這也就是為什么說僅僅將 @變量名 看成是一個字符串路鹰。
三、混合
先看一個 example.css 文件：
#menu a {
color: #111;
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
#menu span {
height: 16px;
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
#menu p {
color: red;
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
可以看到上面三個樣式中都有 border-top 和 border-bottom 兩個屬性收厨，并且內(nèi)容完全相同晋柱；在傳統(tǒng) CSS 寫法中只能這樣一遍有一遍的去書寫重復的內(nèi)容，在 Less 中通過將公共屬性抽取出來作為一個公共類的方式規(guī)避這一點诵叁。
// example2.less
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
#menu a {
color: #111;
.bordered;
}
#menu span {
height: 16px;
.bordered;
}
#menu p {
color: red;
.bordered();
}
將以上 example2.less 進行轉(zhuǎn)譯成 example2.css 文件為：
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
#menu a {
color: #111;
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
#menu span {
height: 16px;
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
#menu p {
color: red;
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
可以看到 examle2.css 與 example.css 很相似雁竞，只是多了一個 .bordered 樣式。
修改 example2.less，將 .bordered 寫成 .bordered()碑诉，此時在進行轉(zhuǎn)譯之后會看到 example2.css 和 example.css 文件就完全一樣了彪腔，使用 less 書寫更加簡單。
// example2.less
.bordered() {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
...
總結(jié)：
混合也是減少代碼書寫量的一個方法进栽；
混合的類名在定義的時候加上
小括弧 ()德挣，那么在轉(zhuǎn)譯成 css 文件時就不會出現(xiàn)；-
混合的類名在被調(diào)用的時候加上
小括弧 ()和不加上小括弧 ()是一樣的效果快毛，看個人習慣格嗅，如：第三行和第八行轉(zhuǎn)譯成 css 是一樣的。1 #menu span { 2 height: 16px; 3 .bordered; 4 } 5 6 #menu p { 7 color: red; 8 .bordered(); 9 }
四唠帝、函數(shù)
曾幾何時屯掖，在書寫呆板的 css 時有沒有想過讓類名動態(tài)化，根據(jù)不同的參數(shù)生成不同的樣式襟衰√看下面的示例：
// func.less
.border-radius(@radius) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
#header {
.border-radius(4px);
}
.button {
.border-radius(6px);
}
使用 $ lessc func.less 進行轉(zhuǎn)譯 func.css 文件內(nèi)容如下：
#header {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.button {
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
可以看到，這里就用到了函數(shù)的概念右蒲，在 #header 和 .button 中分別傳入不同的參數(shù)阀湿，結(jié)果也就生成不同的代碼。
關(guān)于 less 中函數(shù)的寫法還有以下幾種：
// 函數(shù)的參數(shù)設(shè)置默認值：
.border-radius(@radius: 5px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
// 函數(shù)有多個參數(shù)時用分號隔開
.mixin(@color; @padding:2) {
color-2: @color;
padding-2: @padding;
}
// 函數(shù)如果沒有參數(shù)瑰妄，在轉(zhuǎn)譯成 css 時就不會被打印出來陷嘴，詳見上面混合中的示例
.wrap() {
text-wrap: wrap;
}
// 函數(shù)參數(shù)如果有默認，調(diào)用時就是通過變量名稱间坐，而不是位置
.mixin(@color: black; @margin: 10px; @padding: 20px) {
color: @color;
margin: @margin;
padding: @padding;
}
.class1 {
.mixin(@margin: 20px; @color: #33acfe);
}
// 函數(shù)參數(shù)有個內(nèi)置變量 @arguments灾挨，相當于 js 中的 arguments
.box-shadow(@x: 0; @y: 0; @blur: 1px; @color: #000) {
-webkit-box-shadow: @arguments;
-moz-box-shadow: @arguments;
box-shadow: @arguments;
}
// 函數(shù)名允許相同，但參數(shù)不同竹宋，類似于 java 中多態(tài)的概念
.mixin(@color: black) {
.mixin(@color: black; @margin: 10px) {
當然劳澄，上面是開發(fā)人員自定義的函數(shù)，Less 也為我們定義了很多好用的內(nèi)置函數(shù)蜈七。關(guān)于內(nèi)置函數(shù)秒拔，如果掌握，可以在開發(fā)過程中節(jié)約很多時間飒硅，由于內(nèi)置函數(shù)數(shù)量很多砂缩，這里就不一一介紹庵芭，傳送門：Less 內(nèi)置函數(shù)官方文檔双吆。
五匾竿、父子元素的寫法
在 css 中父子元素的寫法通常如下：
.container {
padding: 0;
}
.container .article {
background-color: red;
}
在 Less 寫法如下曹宴，父子嵌套關(guān)系一目了然歉提。
.container {
padding: 0;
.article {
background-color: red;
}
}
當然，父子元素還要一種是偽類的寫法喘垂，在 css 中寫法如下：
#header :after {
content: " ";
display: block;
font-size: 0;
height: 0;
clear: both;
visibility: hidden;
}
在 less 中寫法如下礁芦，可以看到引入了新的符號 &，以 & 來代替主類 #header未状。
#header {
&:after {
content: " ";
display: block;
font-size: 0;
height: 0;
clear: both;
visibility: hidden;
}
}
六、神奇 @import
在傳統(tǒng) css 文件中泡仗，每個文件都是獨立的埋虹。在 less 中可以像 js 的模塊那樣在一個 less 文件中引入另一個 less 文件搔课。
創(chuàng)建 one.less 文件：
.container {
width: 100px;
height: 200px;
}
創(chuàng)建 two.less 文件：
@import "one";
使用 $ lessc two.less 轉(zhuǎn)譯成 two.css 文件急灭，可以看到內(nèi)容如下：
.container {
width: 100px;
height: 200px;
}
@import 的作用可以看成是將 one.less 的內(nèi)容復制一份到當前 .less 文件中。
那么如果 two.less 中也有一個類名叫 container 的畴嘶，使用 @import 之后會變成什么樣子呢区匣？這個留給自行測試好啦欺旧。
