CSS系列——前端進階之路：初涉Less

時間 2019-11-06

標籤 css 系列前端進階之路欄目 CSS 简体版

原文原文鏈接

前言：最近幫一個朋友解決點問題，在查看組件源碼的時候涉及到了less語法，這可難倒博主了。沒辦法，既然用到就要學唄，誰讓咱是無所不能的程序猿呢！因此今天來學習下Less，算是筆記，也但願給初學less的園友提供參考，若是你是前端大神，此文就不必看了哈。算了，扯遠了哈，進入正題。javascript

本文原創地址：http://www.cnblogs.com/landeanfen/p/6047031.htmlcss

1、Less介紹

一、官方介紹

Less 是一門 CSS 預處理語言，它擴充了 CSS 語言，增長了諸如變量、混合（mixin）、函數等功能，讓 CSS 更易維護、方便製做主題、擴充。Less 能夠運行在 Node 或瀏覽器端。html

二、本身理解

Less是一門動態CSS語言，使得CSS樣式更加靈活地做用於Html標籤。試想若是沒有Less，咱們要對樣式作一些邏輯計算的時候只能依靠Js去實現，有了Less以後，能夠方便地動態給Html標籤設置樣式。好比一個最多見的需求，在當前瀏覽器的寬度小於500px的時候，給某一個div設置一個樣式，使用less+css3就能很簡單的解決問題。固然，這只是其中一個場景，less裏面還能進行一些常見的條件和邏輯判斷。總的來講，Less賦予了CSS邏輯運算的能力。前端

除此以外，動態CSS語法還有一個重要的做用就是提升樣式代碼的可維護性。好比一個最簡單的，咱們能夠定義一個全局的顏色變量@aaa:#222，系統裏面全部的默認顏色用的@aaa來寫的，這個時候若是須要修改這個全局顏色，咱們只須要改下@aaa變量的值就行了，其餘地方不用作任何修改，這點，做爲編程人員應該很容易理解。java

說一千道一萬，實踐纔是王道，下面跟着博主一塊兒來看看一些Less最基礎的用法吧。css3

三、Less、Sass、Stylus

說到Less，可能又有人不服了，可能有人要說：Less過期了，Sass是趨勢，你看bootstrap3用的是less，怎麼bootstrap4就改用sass了等等。博主想，它們三者做爲Css的預處理技術，確定都有本身的優點吧。今天在這裏不想討論三者的優缺點，先來學習Less吧，想那麼多幹嗎！git

2、Less使用入門

關於Less的入門教程，網上也是一搜一大把，基本都和Less中文網上面差很少。Less既能夠運行在Node服務端，也能夠運行在瀏覽器客戶端。博主對Node不熟，因此這篇仍是看看其在瀏覽器端的使用，其實沒有關係，無論在哪裏使用，其基礎的用法都是同樣的。github

通常來講，客戶端運行Less分爲兩種狀況：web

第一種方式是直接在html頁面引用.less文件，而後藉助less.js去編譯less文件動態生成css樣式而存在於當前頁面，這種方式適用於開發模式。
第二種方式是咱們首先寫好.less文件的語法，而後藉助工具生成對應的.css文件，而後客戶端直接引用.css文件便可。好比咱們經常使用的bootstrap.css就是經過工具編譯而成，這種方式更適合運行環境。

一、開發模式下使用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，博主就是這麼作的。ajax

<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以下

二、運行模式下使用Less

若是是運行環境，最好是將less.less編譯成.css文件，而後直接引用生成的.css文件便可，博主不熟悉Node的環境，這裏，博主介紹一款less生成css的工具：Koala。首先去官網下載安裝文件，安裝運行以後獲得以下界面：

而後將less所在的目錄拖到界面中間

點擊Compile按鈕。將會在less.less的同級目錄下生成一個less.css文件

而後直接引用這個css文件便可。有了工具是否是很easy~~

3、常見用法示例

初初入門，咱們仍是從最基礎的開始吧！

一、從第一個Less變量開始

@base: #f938ab;

div{
    background-color:@base;
    padding:50px;
}

頁面html代碼：

<body>
    <div>
        第一個Less樣式
    </div>
</body>

編譯以後的Css樣式以下：

效果預覽：

以上是一個最基礎的Less變量，在.less文件裏面定義一個全局的@base變量，那麼在該文件裏面全部地方都可調用。

須要說明的是（1）Less裏面的變量都是以@做爲變量的起始標識，變量名由字母、數字、_和-組成；（2）在一個文件裏面定義的同名變量存在全局變量和局部變量的區別（後面介紹）；

二、變量計算

@nice-blue: #f938ab;
@light-blue: @nice-blue + #333;

div {
  background-color: @light-blue;
}

編譯獲得結果：

div {
  background-color: #ff6bde;
}

這說明，在Less裏面，變量能夠動態計算。

三、變量混合

混合能夠將一個定義好的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>

四、嵌套規則

在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代碼量。但博主猜測確定有人會不習慣這種寫法，就是由於這種結構層級深，因此在閱讀上面仍是會有人不習慣，無論怎麼樣，且用且珍惜吧。

五、函數的使用

在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;
}

以上不難理解，就是一個簡單的邏輯判斷。

六、條件判斷

在上述「函數的使用」裏面，咱們看到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;
 }

七、變量做用域

Less的做用域很好理解，就是咱們常說的全局變量和局部變量的區別，記住Less裏面變量名能夠重複。

@aaa: red;

#div1 {
  @aaa: green;
  #header {
    color: @aaa; 
  }
}

#div2 {
  color: @aaa;   
}

相信你已經猜到結果了吧。編譯以後

#div1 #header {
  color: green;
}
#div2 {
  color: red;
}

八、不得不說的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) "文件路徑"; 　　表示對同一資源可引入屢次。

九、綜合實例

對於上文提到的屏幕變化的時候動態去設置樣式的問題，使用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;
  }
}