CSS系列——前端进阶之路：初涉Less
閱讀目錄
- 一、Less介紹
- 1、官方介紹
- 2、自己理解
- 3、Less、Sass、Stylus
- 二、Less使用入門
- 1、開發模式下使用Less
- 2、運行模式下使用Less
- 三、常見用法示例
- 1、從第一個Less變量開始
- 2、變量計算
- 3、變量混合
- 4、嵌套規則
- 5、函數的使用
- 6、條件判斷
- 7、變量作用域
- 8、不得不說的import指令
- 9、綜合實例
- 四、總結
?
正文
前言：最近幫一個朋友解決點問題，在查看組件源碼的時候涉及到了less語法，這可難倒博主了。沒辦法，既然用到就要學唄，誰讓咱是無所不能的程序猿呢！所以今天來學習下Less，算是筆記，也希望給初學less的園友提供參考，如果你是前端大神，此文就沒必要看了哈。算了，扯遠了哈，進入正題。
本文原創地址：http://www.cnblogs.com/landeanfen/p/6047031.html
回到頂部一、Less介紹
回到頂部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;} } 回到頂部四、總結
?一些基礎的用法暫時先介紹這么多，更多高級用法還有待研究再發出。由于博主接觸less語法的時間并不長，如果有理解有誤之處，還望園友們指出。
本文轉自懶得安分博客園博客，原文鏈接：http://www.cnblogs.com/landeanfen/p/6047031.html，如需轉載請自行聯系原作者
總結
以上是生活随笔為你收集整理的CSS系列——前端进阶之路：初涉Less的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： OpenNebula 入门安装配置
- 下一篇： 设置IE安全并打开自动仿冒网站筛选器和I