前言
css預(yù)處理器是一種用來寫css的更加高效且便于管理的方式。目前最流行的css預(yù)處理器有：sass、less、stylus。目前先學(xué)習(xí)less。
簡介
css有以下特點：
語法不夠強大，比如無法嵌套書寫導(dǎo)致模塊化開發(fā)中需要書寫很多重復(fù)的選擇器；選擇父級元素，對子元素選擇的時候還要再寫一次。
沒有變量和合理的樣式復(fù)用機制，使得邏輯上相關(guān)的屬性值必須以字面量的形式重復(fù)輸出，導(dǎo)致難以維護(hù)。頁面中的主色調(diào)就幾個而已，如果使用CSS，假如主色調(diào)改變了，那么要改變css的很多樣式，維護(hù)起來非常麻煩。
然而css的預(yù)處理器剛好給我們提供了一些便利。這里我們主要說明Less。它提供了以下功能。這些用法這里不會完全涉及，可以參考官方文檔。
- 基本語法
- 嵌套語法
- 變量
- @import
- 混入
- 繼承
- 函數(shù)
- 邏輯控制
使用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="http://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="http://cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>
2、less文件的內(nèi)容
@base: #f938ab;
div{
background: red;
h1{
background: yellow;
span{
background: blue;
}
}
p{
background: @base;
}
}
可以這些基本的less寫法，已經(jīng)比css簡單很多了，這里主要涉及到嵌套選擇器，定義顏色變量
3、直接在瀏覽器打開HTML頁面即可
總結(jié)
這篇文章主要介紹了css的劣勢，以及簡單說了css預(yù)處理器的一些特點。最后使用一個案例來說明less的使用。
在生產(chǎn)環(huán)境盡量使用css，可以直接使用命令將less編譯為css文件，再在html頁面里面引入css即可。平時開發(fā)可直接使用less。
