使用CSS预处理器Less
前天寫了一篇文章，關于如何使用Harp來加快人的開發效率，在Mac系統和Linux系統上測試是沒有問題的，但沒有在Windows上測試，使用Windows的剛入門的前端工程師，安裝Harp失敗后，不知道怎么解決問題。不管學習什么，解決問題的能力是最重要的，學會自己動手。
簡介
css有以下特點：
語法不夠強大，比如無法嵌套書寫導致模塊化開發中需要書寫很多重復的選擇器；選擇父級元素，對子元素選擇的時候還要再寫一次。
沒有變量和合理的樣式復用機制，使得邏輯上相關的屬性值必須以字面量的形式重復輸出，導致難以維護。頁面中的主色調就幾個而已，如果使用CSS，假如主色調改變了，那么要改變css的很多樣式，維護起來非常麻煩。
然而css的預處理器剛好給我們提供了一些便利。這里我們主要說明Less。它提供了以下功能。這些用法這里不會完全涉及，可以參考官方文檔。
- 基本語法
- 嵌套語法
- 變量
- @import
- 混入
- 繼承
- 函數
- 邏輯控制
使用Less
這里主要說的是在客戶端使用less
1、新建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頁面即可
效果圖總結
這篇文章主要介紹了css的劣勢，以及簡單說了css預處理器的一些特點。最后使用一個案例來說明less的使用。
在生產環境盡量使用css，可以直接使用命令將less編譯為css文件，再在html頁面里面引入css即可。平時開發可直接使用less。
注意： harp現在在windows不好用
附錄
- 再談CSS預處理器
- Less中文文檔
- 天貓前端
總結
以上是生活随笔為你收集整理的使用CSS预处理器Less的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： iTerm，让你的Mac OS命令行也能
- 下一篇： 不炫技，SVG+CSS3 旋转动画属性就