LESS即學即用

時間  2019-11-16
標籤 即用 简体版
原文   原文鏈接

前言

咱們你們都知道HTML和CSS不屬於編程語言而是屬於標記語言，因此很難像JS同樣定義變量、編寫方法、實現模塊化開發等。而目前的CSS編寫模式中，都是定義一些公共的樣式類名，哪一塊的HTML須要這個樣式，就去增長對應的樣式類名，因此咱們常常看到一個標籤上存在不少樣式類名，在這種模式中咱們要時常關注CSS的優先級，避免樣式的重疊覆蓋...javascript

爲了解決CSS的這一困境，CSS預處理預編譯的思想脫穎而出，比較具備表明性的有LESS、SASS、Stylus。它們在傳統的CSS基礎上增長了大量的新的語法，編寫方式，經常使用的函數等，可讓咱們的CSS像JS同樣成爲一門編程語言。本文主要介紹LESS的語法和使用。css

希望文章對你有些許幫助，歡迎在個人GitHub博客點贊和關注，感激涕零！html

1、LESS的編譯

編寫完成的LESS代碼是不能直接在瀏覽器中運行的，須要編譯成正常的CSS代碼。那麼咱們首先就來學習一下經常使用的LESS編譯方式。java

1.在瀏覽器中調用LESS.JS

LESS只支持在現代瀏覽器中運行（最新版本的Chrome, Firefox, Safari 和 IE）。咱們不建議在生產環境中使用LESS客戶端，由於在將LESS編譯成CSS的時候，用戶會看到加載延遲的現象，即使在瀏覽器中有不足一秒的加載延遲，但也會下降性能。node

首先引入咱們設置樣式的LESS文件，注意：這裏的rel='stylesheet/less'git

<link type="text/css" rel="stylesheet/less" href="1.less"/>
複製代碼

而後引入less.js文件github

<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.8.1/less.min.js" ></script>
複製代碼

瀏覽器中調用有個好處:能夠開啓監視模式,只要咱們的LESS改變，在必定時間內，瀏覽器就會從新的編譯，咱們能夠看到想要的效果。具體操做以下:web

<script charset="utf-8" type="text/javascript">
    //->在引入LESS以前設置一個全局的變量less,配置一些參數值(根據狀況自行選擇須要配置的項)
      var less = {
        //->env:設置運行的環境(生產模式仍是開發模式)
        //production:編譯後的CSS緩存到本地localStorage中
        //development:沒有把編譯後的CSS緩存到本地,在URL不是標準的格式下(例如:file://...),自動設置爲development
        env: "development",
        //->poll:在監視模式下，每兩次請求之間的時間間隔(ms)
        poll:500
        }
    </script>     
    <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.8.1/less.min.js" ></script>
    <script charset="utf-8" type="text/javascript">
      //->啓用監視模式(env必需要設置成development)
      less.watch();
    </script>   
複製代碼

須要特別注意的是，因爲瀏覽器端使用時是使用ajax來拉取.less文件，所以直接在本機文件系統打開（即地址是file://開頭）或者是有跨域的狀況下會拉取不到.less文件，致使樣式沒法生效。因此通常less作css預處理，不多采用引用less的方式，通常是把less編譯成css以後，引用生成的css文件。 

// index.html文件
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>less</title>
    <link type="text/css" rel="stylesheet/less" href="css/styles.less">
</head>
<body>
    <header>
        <p>Hello World!</p>
    </header>
<script src="./less.min.js" type="text/javascript"></script>   
</body>
</html>
複製代碼
// styles.less文件
@blue:#5B83AD;
@size:50px;
header {
    color: @blue;
    font-size: @size;
}
複製代碼

若是直接引入less文件，便會出現以下錯誤：ajax

能夠嘗試用一個簡單的web server啓動網站就能解決，譬如lite-server 

npm install -g lite-server
lite-server //to run
複製代碼

二、使用NODE命令編譯LESS(單個文件)

這種方式是目前項目中最經常使用的方式，適用於項目的生產環境，它是把咱們的LESS文件編譯成CSS文件，咱們項目中直接的引入CSS文件便可，基本步驟：安裝->編譯/壓縮編譯->或者使用NODE代碼實現批量編譯等npm

把LESS模塊安裝到全局NODE環境中

npm install less -g
複製代碼

使用命令進行編譯

//->把styles.less文件編譯成styles.css文件(若是沒有這個CSS文件本身會建立)
    lessc styles.less styles.css

    //->編譯完成的CSS文件是通過壓縮的
    lessc styles.less styles.min.css -x或者--compress
複製代碼

通過node命令編譯代碼先後對比:

// styles.less文件(編譯前)
@blue:#5B83AD;
@size:50px;
header {
    color: @blue;
    font-size: @size;
}
複製代碼
// styles.css文件(編譯後)
header {
  color: #5B83AD;
  font-size: 50px;
}
複製代碼

三、在NODE環境中編寫批量編譯的代碼

咱們在上述用NODE命令編譯的時候，一次只能編譯一個文件，這樣，若是頁面中有多個LESS，每一次編譯都是比較耗費時間的，因此咱們結合NODE的FS文件讀寫操做，能夠寫一套批量編譯的代碼。

//->定義編譯文件目錄和目標導出目錄
    var dirPath = "./less/", tarPath = "./css/";
    //->導入NODE中須要使用的模塊
    var fs = require("fs"),
        less = require("less");
    //->讀取dirPath中的全部文件,檢查文件的類型,只有LESS文件咱們才進行存儲
    var ary = [],
        files = fs.readdirSync(dirPath);
    files.forEach(function (file, index) {
        /\.(LESS)/i.test(file) ? ary.push(file) : null;
    });
    //->把目錄下的全部文件進行編譯,把編譯完成的結果保存在指定的目錄中
    ary.forEach(function (file) {
        var newFile = file.replace(".less", ".css"),
            conFile = fs.readFileSync(dirPath + file, "utf-8");
        less.render(conFile, {compress: true}, function (error, output) {
            fs.writeFileSync(tarPath + newFile, output.css, "utf-8");
        });
    });
複製代碼

四、使用工具編譯LESS

目前經常使用的編譯工具備：Koala(聽說目前最流行的)、在線編譯(tool.oschina.net/less)、SimpLESS等。本篇文章不作過多的說明。

2、LESS的語法

LESS的基礎語法基本上分爲如下幾個方面：變量、混合(Mixins)、嵌套規則、運算、函數、做用域等。

1.變量

和JS中的變量同樣，只是LESS的變量定義不是使用VAR而是使用@。

//->LESS代碼
    @link-color: #428bca;
    @link-color-hover: darken(@link-color, 10%);
    a {
        color: @link-color;
        &:hover {
            color: @link-color-hover;
        }
    }
  //->編譯爲CSS的結果
    a {
        color: #428bca;
    }
    a:hover {
        color: #3071a9;
    }
複製代碼

除了上述用變量存儲公用的屬性值，咱們還能夠用變量存儲公用的URL、選擇器等等

//->LESS代碼
    .@{selector} {
        width: 100px;
        height: 100px;
        @{property}: #000;
        background: url("@{bgImg}/test.png");
    }
    @selector: box;
    @bgImg: "../img";
    @property: color;
複製代碼

2.混合(Mixins)

① 基本使用

混合能夠將一個定義好的class A輕鬆的引入到另外一個class B中，從而簡單實現class B繼承class A中的全部屬性。咱們還能夠帶參數地調用，就像使用函數同樣。

//->LESS代碼
    .public {
        width: 100px;
        height: 100px;
    }
    nav ul {
        .public;
        list-style: none;
    }
    //->編譯爲CSS的結果
    .public {
        width: 100px;
        height: 100px;
    }
    nav ul {
        width: 100px;
        height: 100px;
        list-style: none;
    }
複製代碼

上述的代碼，nav ul是把public中設定的樣式屬性值copy了一份到本身的樣式中。若是你想在編譯完成的結果中不輸出public這個樣式的結果，只須要按照下述的代碼編寫便可：

//->LESS代碼
    .public() {//->在選擇器後面加上()就能夠不編譯這個樣式了
        width: 100px;
        height: 100px;
    }
    nav ul {
        .public;//若是public有子孫元素的樣式，一樣也會被複制過來
        list-style: none;
    }
    //->編譯爲CSS的結果
    nav ul {
        width: 100px;
        height: 100px;
        list-style: none;
    }
複製代碼

② extend

雖然在上述的案例中，nav ul把public中的樣式繼承了過來，可是原理倒是把代碼copy一份過來，這樣編譯後的CSS中依然會存留大量的冗餘CSS代碼，爲了不這一點，咱們可使用extend僞類來實現樣式的繼承使用。和原來的選擇器共用一套樣式，但要保證原來的選擇器不加括號。

//->LESS代碼
    .public {
        width: 100px;
        height: 100px;
    }
    nav ul {
        &:extend(.public);
        list-style: none;
    }
    //->編譯爲CSS的結果
    .public, nav ul {
        width: 100px;
        height: 100px;
    }
    nav ul {
        list-style: none;
    }
複製代碼

3.嵌套規則

咱們能夠在一個選擇器中嵌套另外一個選擇器來實現繼承，這樣很大程度減小了代碼量，而且代碼看起來更加的清晰。

//->LESS代碼
#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
    &:hover { text-decoration: none }
  }
}
複製代碼
//->編譯爲CSS的結果
#header { color: black; }
#header .navigation {
  font-size: 12px;
}
#header .logo { 
  width: 300px; 
}
#header .logo:hover {
  text-decoration: none;
}
複製代碼

4.函數 & 運算

運算提供了加，減，乘，除操做；咱們能夠作屬性值和顏色的運算，這樣就能夠實現屬性值之間的複雜關係。LESS中的函數一一映射了JavaScript代碼，若是你願意的話能夠操做屬性值。

任何數字、顏色或者變量均可以參與運算. 來看一組例子:

@base: 5%;
@filler: @base * 2;
@other: @base + @filler;
color: #888 / 4;
background-color: @base-color + #111;
height: 100% / 2 + @filler;
複製代碼

LESS 提供了一系列的顏色運算函數. 顏色會先被轉化成 HSL 色彩空間, 而後在通道級別操做:

lighten(@color, 10%);     // return a color which is 10% *lighter* than @color
darken(@color, 10%);      // return a color which is 10% *darker* than @color
複製代碼

LESS提供了一組方便的數學函數，你可使用它們處理一些數字類型的值:

round(1.67); // returns `2`
ceil(2.4);   // returns `3`
floor(2.6);  // returns `2`
複製代碼

5.命名空間和做用域

LESS 中的做用域跟其餘編程語言很是相似，首先會從本地查找變量或者混合模塊，若是沒找到的話會去父級做用域中查找，直到找到爲止。

@var: red;
#page {
  @var: white;
  #header {
    color: @var; // white
  }
}
#footer {
  color: @var; // red  
}
複製代碼

參考文章

LESS學習:瞭解LESS和編譯LESS

LESS學習:LESS的基礎語法

LESS一種動態樣式語言

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程