1、官方介紹
Less 是一門 CSS 預先處理語言，它擴充了 CSS 語言，增加了諸如變數、混合（mixin）、函數等功能，讓 CSS 更易維護、方便製作主題、擴充。Less 可以運行在 Node 或瀏覽器端。
回到頂部
2、自己理解
Less是一門動態CSS語言，使得CSS樣式更加靈活地作用於Html標籤。試想如果沒有Less，我們要對樣式做一些邏輯計算的時候只能依靠Js去實現，有了Less之後，可以方便地動態給Html標籤設定樣式。比如一個最常見的需求，在當前瀏覽器的寬度小於500px的時候，給某一個div設定一個樣式，使用less+css3就能很簡單的解決問題。當然，這隻是其中一個情境，less裡面還能進行一些常見的條件和邏輯判斷。總的來說，Less賦予了CSS邏輯運算的能力。
除此之外，動態CSS文法還有一個重要的作用就是提高樣式代碼的可維護性。比如一個最簡單的，我們可以定義一個全域的顏色變數@aaa:#222，系統裡面所有的預設顏色用的@aaa來寫的，這個時候如果需要修改這個全域顏色，我們只需要改下@aaa變數的值就好了，其他地方不用做任何修改，這點，作為編程人員應該很容易理解。
說一千道一萬，實踐才是王道，下面跟著博主一起來看看一些Less最基礎的用法吧。
回到頂部
3、Less、Sass、Stylus
說到Less，可能又有人不服了，可能有人要說：Less過時了，Sass是趨勢，你看bootstrap3用的是less，怎麼bootstrap4就改用sass了等等。博主想，它們三者作為Css的預先處理技術，肯定都有自己的優勢吧。今天在這裡不想討論三者的優缺點，先來學習Less吧，想那麼多幹嘛！
回到頂部
二、Less使用入門
關於Less的入門教程，網上也是一搜一大把，基本都和Less中文網上面差不多。Less既可以運行在Node服務端，也可以運行在瀏覽器用戶端。博主對Node不熟，所以這篇還是看看其在瀏覽器端的使用，其實沒有關係，不管在哪裡使用，其基礎的用法都是一樣的。
一般來說，用戶端運行Less分為兩種情況：
第一種方式是直接在html頁面引用.less檔案，然後藉助less.js去編譯less檔案動態產生css樣式而存在於當前頁面，這種方式適用於開發模式。
第二種方式是我們首先寫好.less檔案的文法，然後藉助工具產生對應的.css檔案，然後用戶端直接引用.css檔案即可。比如我們常用的bootstrap.css就是通過工具編譯而成，這種方式更適合運行環境。
回到頂部
1、開發模式下使用Less
（1）首先我們在項目下面建立一個less檔案，命名為less.less，裡面寫入最簡單的文法
@base: #f938ab;div{ background-color:@base; padding:50px;}
（2）然後在html頁面head裡面引用該less檔案
<link rel="stylesheet/less" type="text/css" href="~/Content/less.less" />
（3）去 less開源地址 下載less.js檔案，然後引入該檔案。
<script src="less.js" type="text/javascript"></script>
或者你如果不想去下載less.js檔案，也可以直接使用CDN的方式引用less.js，博主就是這麼做的。
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>
需要說明的是，less.js的作用就是編譯less.less檔案，使它成為瀏覽器能讀懂的css樣式。
（4）在引用less.js之前，需要一個less變數，聲明編譯less的環境參數，所以最終所有引用檔案如下：
<link rel="stylesheet/less" type="text/css" href="~/Content/less.less" /> <script type="text/javascript"> less = { env: "development", async: false, fileAsync: false, poll: 1000, functions: {}, dumpLineNumbers: "comments", relativeUrls: false, rootpath: ":/a.com/" }; </script> <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>
這裡要強調的是，less變數的聲明必須要在less.js的引用之前。
（5）調試運行
我們直接運行項目，得到如下結果
如果你的調試環境不是Visual Studio，就不會有這個問題！對於上述問題，需要在web.config裡面配置如下節點
<system.webServer> <staticContent> <mimeMap fileExtension=".less" mimeType="text/css" /> </staticContent ></system.webServer>
然後再次運行，可以看到編譯產生的css如下
2、運行模式下使用Less
如果是運行環境，最好是將less.less編譯成.css檔案，然後直接引用產生的.css檔案即可，博主不熟悉Node的環境，這裡，博主介紹一款less產生css的工具：Koala。首先去官網下載安裝檔案，安裝運行之後得到如下介面：
然後將less所在的目錄拖到介面中間
點擊Compile按鈕。將會在less.less的同級目錄下產生一個less.css檔案
然後直接引用這個css檔案即可。有了工具是不是很easy~~
回到頂部
三、常見用法樣本
初初入門，我們還是從最基礎的開始吧！
回到頂部
1、從第一個Less變數開始
@base: #f938ab;div{ background-color:@base; padding:50px;}
頁面html代碼：
<body> <div> 第一個Less樣式 </div></body>
編譯之後的Css樣式如下：
效果預覽：
以上是一個最基礎的Less變數，在.less檔案裡面定義一個全域的@base變數，那麼在該檔案裡面所有地方均可調用。
需要說明的是（1）Less裡面的變數都是以@作為變數的起始標識，變數名由字母、數字、_和-組成；（2）在一個檔案裡面定義的同名變數存在全域變數和局部變數的區別（後面介紹）；
回到頂部
2、變數計算
@nice-blue: #f938ab;@light-blue: @nice-blue + #333;div { background-color: @light-blue;}
編譯得到結果：
div { background-color: #ff6bde;}
這說明，在Less裡面，變數可以動態計算。
3、變數混合
混合可以將一個定義好的class A輕鬆的引入到另一個class B中，從而簡單實現class B繼承class A中的所有屬性。我們還可以帶參數地調用，就像使用函數一樣。我們來看下面的例子：
.rounded-corners (@radius: 15px) { border-radius: @radius; -webkit-border-radius: @radius; -moz-border-radius: @radius;}#div1 { padding:20px; width:200px; height:100px; border:2px solid red; .rounded-corners;}#div2 { padding:20px; width:200px; height:100px; border:2px solid green; .rounded-corners(30px);}
編譯後的結果你是否猜到了呢：
#div1 { padding: 20px; width: 200px; height: 100px; border: 2px solid red; border-radius: 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px;}#div2 { padding: 20px; width: 200px; height: 100px; border: 2px solid green; border-radius: 30px; -webkit-border-radius: 30px; -moz-border-radius: 30px;}
原理解析：最上面的 @radius 變數可以理解為一個方法的參數，然後“15px”可以理解為參數的預設值。首先我們定義一個動態樣式 .rounded-corners ，這個樣式有一個動態參數 @radius ，這個參數的預設值是“15px”。我們調用的時候如果不傳參數，那麼 @radius 就等於15px，如果我們傳了30px，那麼@radius就是我們傳的參數值。如果這樣理解是否會好一點呢，是不是有點類似我們編程裡面的“方法”的概念。如果按照物件導向的原理也很好理解，#div1和#div2繼承.rounded-corners這個樣式，所以可以直接使用，然後如果“子類”(#div2)有不同於“父類”的屬性，可以“重寫”，是不是一樣一樣的。
既然做了測試，我們還是來看看測試結果：
<div id="div1">div1</div> <div id="div2">div2</div>
4、嵌套規則
在CSS裡面，我們也經常可以見到標籤樣式嵌套的寫法，那麼在Less裡面它是怎麼實現的呢？我們來下下面的Less代碼
#div1 { h1 { font-size: 26px; font-weight: bold; } span { font-size: 12px; a { text-decoration: none; &:hover { border-width: 1px; } } }}
編譯後的CSS：
#div1 h1 { font-size: 26px; font-weight: bold;}#div1 span { font-size: 12px;}#div1 span a { text-decoration: none;}#div1 span a:hover { border-width: 1px;}
Less的這種寫法好處是顯而易見，標籤層級結構清晰可見，並且能減少css代碼量。但博主猜想肯定有人會不習慣這種寫法，就是因為這種結構層級深，所以在閱讀上面還是會有人不習慣，不管怎麼樣，且用且珍惜吧。
5、函數的使用
在Less裡面函數的概念還是比較容易理解的。比如我們有這麼一段定義：
.mixin (dark, @color) { color: darken(@color, 10%);}.mixin (light, @color) { color: lighten(@color, 10%);}.mixin (@_, @color) { display: block;}
然後有這麼一句調用
@switch: light;.class { .mixin(@switch, #888); }
編譯得到
.class { color: #a2a2a2; display: block;}
以上不難理解，就是一個簡單的邏輯判斷。
回到頂部
6、條件判斷
在上述“函數的使用”裡面，我們看到Less支援“等於”的匹配方式，除此之外，Less裡面還支援大於、小於等條件判斷的文法，此之所謂“導引混合”。先來看看它的文法：
首先定義幾個條件判斷的“方法”
.mixin (@a) when (lightness(@a) >= 50%) { background-color: black;}.mixin (@a) when (lightness(@a) < 50%) { background-color: white;}.mixin (@a) { color: @a;}
然後調用該“方法”
.class1 { .mixin(#ddd) }.class2 { .mixin(#555) }
你猜結果是什嗎？編譯結果如下：
.class1 { background-color: black; color: #ddd;}.class2 { background-color: white; color: #555;}
原理解析：不知道你有沒有猜對結果，反正最開始博主是猜錯了的。when的文法不難理解，就是一個條件判斷，關鍵是下面的color從哪裡來的。原來在Less裡面是一種混合調用的方式，也就是說，如果定義了三個函數mixin，分別對應有三個不同的條件，那麼我們調用mixin函數的時候如果三個的條件都滿足，那麼它三個的結果都會得到。這就是為什麼我們class1和class2得到如上結果。在Less裡面所有的運算子有： >、 >=、 =、 =<、 <，除了這5個運算子，Less還提供了基於實值型別進行判斷的方法：iscolor()、isnumber()、isstring()、iskeyword()、isurl()等。用法如下：
.mixin (@a, @b: 0) when (isnumber(@b)) { ... }.mixin (@a, @b: black) when (iscolor(@b)) { ... }
除了上述條件運算式以外，Less還提供了and、not等邏輯運算式。基礎用法如：
.mixin (@b) when not (@b > 0) { background-color:blue; }
7、變數範圍
Less的範圍很好理解，就是我們常說的全域變數和局部變數的區別，記住Less裡面變數名可以重複。
@aaa: red;#div1 { @aaa: green; #header { color: @aaa; }}#div2 { color: @aaa; }
相信你已經猜到結果了吧。編譯之後
#div1 #header { color: green;}#div2 { color: red;}
8、不得不說的import指令
less裡面使用import將外部的less引入到本地less檔案裡面來。比如A.less裡面定義了一個變數@aaa:red，而B.less檔案裡面也需要使用@aaa這個變數，這個時候怎麼辦呢？import派上用場了。
A.less內容如下：
@aaa:red;
B.less內容如下：
@import 'A.less';div{ color:@aaa;}
然後再html頁面引入B.less檔案，編譯最終可以得到如下結果
div{ color:@aaa;}
有人可能要說，不就是引用其他less檔案裡面的變數嗎，沒啥用。可是你想過沒有，由於項目裡面模組很多，每個模組都有自己的less檔案，如果沒有import，怎麼去統一調度呢。這點從bootstrap就可以看出來，當我們下載bootstrap3的源碼，你會發現有很多的less檔案，放在less檔案夾裡面，這些less檔案分別對應著各個模組的樣式。形如
各個模組的樣式寫完後，會有一個bootstrap.less檔案，將其他所有的less檔案都import進來，其內容如下：
// Core variables and mixins@import "variables.less";@import "mixins.less";// Reset and dependencies@import "normalize.less";@import "print.less";@import "glyphicons.less";// Core CSS@import "scaffolding.less";@import "type.less";@import "code.less";@import "grid.less";@import "tables.less";@import "forms.less";@import "buttons.less";// Components@import "component-animations.less";@import "dropdowns.less";@import "button-groups.less";@import "input-groups.less";@import "navs.less";@import "navbar.less";@import "breadcrumbs.less";@import "pagination.less";@import "pager.less";@import "labels.less";@import "badges.less";@import "jumbotron.less";@import "thumbnails.less";@import "alerts.less";@import "progress-bars.less";@import "media.less";@import "list-group.less";@import "panels.less";@import "responsive-embed.less";@import "wells.less";@import "close.less";// Components w/ JavaScript@import "modals.less";@import "tooltip.less";@import "popovers.less";@import "carousel.less";// Utility classes@import "utilities.less";@import "responsive-utilities.less";
然後我們編譯bootstrap.less，就能將所有模組的less檔案引入進來。
為了證明這點，我們來測試一把，在A.less裡面加入如下內容：
@aaa:red;@widthtest:200px;.class2{ background-color:green; border:5px solid red;}
B.less內容如下：
@import 'A.less';div{ color:@aaa; width:@widthtest; height:50px;}
然後編譯B.less得到的B.css檔案內容如下：
.class2 { background-color: green; border: 5px solid red;}div { color: #ff0000; width: 200px; height: 50px;}
另外，import指令還包含了多種參數類型：
1. @import (reference) "檔案路徑"; 將引入的檔案作為樣式庫使用，因此檔案中樣式不會被直接編譯為css樣式規則。當前樣式檔案通過extend和mixins的方式引用樣式庫的內容。
2. @import (inline) "檔案路徑"; 用於引入與less不相容的css檔案，通過inline配置告知編譯器不對引入的檔案進行編譯處理，直接輸出到最終輸出。
3. @import (less) "檔案路徑"; 預設使用該配置項，表示引入的檔案為less檔案。
4. @import (css) "檔案路徑"; 表示當前操作為CSS中的@import操作。當前檔案會輸出一個樣式檔案，而被引入的檔案自身為一個獨立的樣式檔案
5. @import (once) "檔案路徑"; 預設使用該配置項，表示對同一個資源僅引入一次。
6. @import (multiple) "檔案路徑"; 表示對同一資源可引入多次。
回到頂部
9、綜合執行個體
對於上文提到的螢幕變化的時候動態去設定樣式的問題，使用less結合css3的@media就能輕鬆處理，比如有下面一段less代碼：
@base: #f938ab;div{ background-color:@base; padding:50px;}.divcolor { @media (max-width: 400px) { background-color: green; } @media (min-width: 400px) and (max-width: 800px) { background-color: red; } @media (min-width: 800px) { background-color: #f938ab; }}
介面html如下：
<body> <div id="div1" class="divcolor">div1</div> <div id="div2">div2</div></body>
使用這種嵌套的寫法就能實現多個條件的預設樣式，所以最終編譯得到的css如下：
/* line 4, http://localhost:34512/Content/less.less */div { background-color: #f938ab; padding: 50px;}@media (max-width: 400px) { .divcolor { background-color: green; }}@media (min-width: 400px) and (max-width: 800px) { .divcolor { background-color: red; }}@media (min-width: 800px) { .divcolor { background-color: #f938ab; }}
表示當前文檔的寬度小於400的時候，背景色為green；大於400小於800時背景色為red；大約800時背景色為#f938ab。來看看是不是這樣：
這裡只是一個簡單的測試，實際應用中肯定不可能只是設定一個簡單的背景色。對於響應式布局的情況，這種寫法非常多。
對於條件判斷，less支援嵌套的寫法，比如：
@base: #f938ab;div{ background-color:@base; padding:50px;}.class1{ width:550px; margin:10px;}.class2{ width:150px; margin:auto; display:block;}.divcolor { @media (max-width: 800px) { background-color: green; .class1; @media (min-width: 400px){ background-color: red; .class2 } }}
編譯得到的css如下：
div { background-color: #f938ab; padding: 50px;}.class1 { width: 550px; margin: 10px;}.class2 { width: 150px; margin: auto; display: block;}@media (max-width: 800px) { .divcolor { background-color: green; width: 550px; margin: 10px; }}@media (max-width: 800px) and (min-width: 400px) { .divcolor { background-color: red; width: 150px; margin: auto; display: block; }}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
