less快速入門官方文件

2021-07-27 15:36:23 字數 1931 閱讀 9674

*less 是一門 css 預處理語言,它擴充了 css 語言,增加了諸如變數、混合(mixin)、函式等功能,讓 css 更易維護、方便製作主題、擴充。

less 可以執行在 node、瀏覽器和 rhino 平台上。網上有很多第三方工具幫助你編譯 less 原始碼。*

官方例項:

>@base: #f938ab;

.box-shadow(@style, @c) when (iscolor(@c))

.box-shadow(@style, @alpha: 50

%) when (isnumber(@alpha))

.box

}

編譯結果:

>.box

.box

div

在伺服器端最容易的安裝方式就是通過 npm (node.js 的包管理器),方法

npm install -g

less用法:

安裝 less 後,就可以在命令列上呼叫 less 編譯器了,如下:

lessc styles.less

這將輸出編譯之後的 css **到 stdout,你可以將輸出重定向到乙個檔案:

lessc styles.less > styles.css

若要輸出壓縮過的 css,只需新增-x選項。如果希望獲得更好的壓縮效果,還可以通過--clean-css選項啟用 clean css 進行壓縮。

執行 lessc 且不帶任何引數,就會在命令列上輸出所有可用選項的列表。

var parser = new(less.parser)();

parser.parse(『.class 』, function (e, tree) );

});

在瀏覽器上跑less.js非常方便開發,但是不推薦生產環境中使用。

在客戶端使用 less.js 是最容易的方式,並且在開發階段很方便,但是,在生產環境中,效能和可靠性非常重要, 我們建議最好使用 node.js 或其它第三方工具進行預編譯。

那就開始吧,在頁面中加入.less樣式表的鏈結,並將rel屬性設定為"stylesheet/less"

tips:

之前 定義全域性的less物件就可以為less.js設定引數:

通過轉殖或fork此專案。

通過bower安裝

通過bower安裝less.js專案,可以使用命令:

bower insatll less
less cdn

src="">

script>

快速入門less

less 是一門 css 預處理語言,它擴充套件了 css 語言,增加了變數 mixin 函式等特性,使 css 更易維護和擴充套件。less 可以執行在 node 或瀏覽器端。作用 將less型別的檔案轉換為css型別的檔案。常見的less編譯工具有 winless ss koala 使用 來申明...

Less 語法快速入門

less 是一門 css 預處理語言其可以執行在 node 或瀏覽器端。它將傳統的 css 樣式結構單一的排版順序進行了優化,讓我們可以通過層級巢狀的方式將 css 類名與html結構一一對應起來。這樣的好處不僅僅使得 css 樣式排版更清楚,也可以讓我們在後期的修改中快速查詢,同時減少了 量,一定...

Flink 快速入門案例二(參考官方文件)

具有一定實際意義的流處理程式。結合信用卡欺詐驗證場景,實現的具體demo。package com.sanxiau import org.apache.flink.streaming.api.datastream.datastream import org.apache.flink.streaming...