less的幾種編譯成css的方法

時間 2019-11-30

標籤幾種編譯 css 方法欄目 CSS 简体版

原文原文鏈接

當你在寫CSS代碼時，面對成百上千的CSS代碼項目，遇到須要改變一些顏色時都須要進行替換操做既費時效率也不高。須要你花費不少的精力去維護CSS。javascript

很是幸運的是，網站開發社區已經解決了這個問題，如今咱們擁有諸如 Less, Sass 和 Stylus 之類的預處理器，它們給咱們提供了許多優於純 CSS 的好處。css

變量 - 它可讓你更輕鬆的在整個樣式表中定義和更改值（這個功能 CSS 在將來某一天也有可能會實現）。
動態計算值 - CSS 中最近出了一個cal()，但它只適合用於長度的計算。
Mixins - 可讓你重用或者組合樣式，並且支持傳遞參數。
函數 - 它爲你提供了一些方便的程序去操縱顏色，轉換圖像等

使用預處理器的惟一缺點就是，你須要將代碼轉換爲純 CSS 代碼，讓它可以在瀏覽器中工做。html

1.用Node.js編譯(推薦)

在使用less以前請確保你的主機安裝了Node.js，而且可以正常運行前端

若是你已經安裝了 Node ，那麼只須要window + R輸入cmd打開命令行工具。安裝 less 用如下語句：java

npm install -g less
複製代碼

安裝完成後，用命令行切換到你須要轉換的目標目錄下，在當前目錄命令行窗口輸入lessc + less文件名稱和後綴 > css文件名稱和後綴(名稱自定)像下面這樣：git

lessc style.less > style.css
複製代碼

成功後會在當前目錄生成一個css文件,這個就是用Node.js 編譯後的css文件,直接在HTML中引入便可使用.github

2.瀏覽器使用

在瀏覽器中使用Less.js是開始開發的最簡單方法，並且使用較少的開發也很方便，可是在生產中，當性能和可靠性很是重要時，建議使用Node.js或許多可用的第三方工具之一進行預編譯。npm

第一將你寫的less樣式表.經過link鏈進HTML而且將rel屬性設置爲stylesheet/less瀏覽器

<link rel="stylesheet/less" type="text/css" href="styles.less"/>
<!-- 下面這種寫法也行，自行選擇 -->
<link rel="stylesheet" type="text/less" href="styles.less"/>
複製代碼

接下來下載less.js並將script標記在head元素中:sass

<head>
<link rel="stylesheet" type="text/less" href="styles.less"/>
<script src="less.js" type="text/javascript"></script>
</head>
複製代碼

點擊less.js下載後在dist文件夾裏面就是less.js

3.下載koala軟件編譯less

koala是款很是實用非圖形編譯工具。koala能夠幫助用戶快速進行主流計算機語言編譯，而且支持less使用能跨平臺操做完美兼容目前全部電腦操做系統，是用戶進行前端語言圖形編譯好幫手。koala這個由國人編寫的，用於編譯sass、less、coffee利器。在此先感謝koala的做者們，感謝大家給咱們帶來這麼棒的免費工具。

下載地址:koala-app.com/ 官網要是下載不了用下面這個

百度網盤：pan.baidu.com/s/155uHKO8H…
提取碼：2w8r

使用方法很簡單,下載安裝好後打開koala軟件，會顯示當前頁面