前言:最近幫一個朋友解決點問題,在查看組件源碼的時候涉及到了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/
歡迎各位轉載,但是未經作者本人同意,轉載文章之后必須在文章頁面明顯位置給出作者和原文連接,否則保留追究法律責任的權利