使用CSS前處理器Less

weixin_33782386發表於2017-08-23
CSS

前天寫了一篇文章，關於如何使用Harp來加快人的開發效率，在Mac系統和Linux系統上測試是沒有問題的，但沒有在Windows上測試，使用Windows的剛入門的前端工程師，安裝Harp失敗後，不知道怎麼解決問題。不管學習什麼，解決問題的能力是最重要的，學會自己動手。

簡介

css有以下特點：

  • 語法不夠強大，比如無法巢狀書寫導致模組化開發中需要書寫很多重複的選擇器；選擇父級元素，對子元素選擇的時候還要再寫一次。

  • 沒有變數和合理的樣式複用機制，使得邏輯上相關的屬性值必須以字面量的形式重複輸出，導致難以維護。頁面中的主色調就幾個而已，如果使用CSS，假如主色調改變了，那麼要改變css的很多樣式，維護起來非常麻煩。

然而css的前處理器剛好給我們提供了一些便利。這裡我們主要說明Less。它提供了以下功能。這些用法這裡不會完全涉及，可以參考官方文件。

  • 基本語法
  • 巢狀語法
  • 變數
  • @import
  • 混入
  • 繼承
  • 函式
  • 邏輯控制

使用Less

這裡主要說的是在客戶端使用less
1、新建html頁面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello Less</title>
    <link rel="stylesheet/less" type="text/css" href="css/my.less">
    <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>

</head>
<body>

<div>
    <p>你好啊</p>
    <h1>
        我正在使用<span>Less</span>
    </h1>
</div>

</body>
</html>

注意裡面要先引入自己寫的less檔案。
<link rel="stylesheet/less" type="text/css" href="css/my.less" />

再引入less的js檔案，可以使用CDN，也可以下載到本地引入
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>

2、less檔案的內容


@base: #f938ab;

div{
  background: red;
  h1{
    background: yellow;
    span{
      background: blue;
    }
  }

  p{
    background: @base;
  }
}

可以這些基本的less寫法，已經比css簡單很多了，這裡主要涉及到巢狀選擇器，定義顏色變數

3、直接在瀏覽器開啟HTML頁面即可

426671-f78fddb2f2e645cc.png
效果圖

總結

這篇文章主要介紹了css的劣勢，以及簡單說了css前處理器的一些特點。最後使用一個案例來說明less的使用。

在生產環境儘量使用css，可以直接使用命令將less編譯為css檔案，再在html頁面裡面引入css即可。平時開發可直接使用less。

注意： harp現在在windows不好用

附錄

相關文章