Less入門與安裝(轉)

時間 2019-11-10

標籤入門安裝简体版

原文原文鏈接

Less 是一門 CSS 預處理語言，它擴充了 CSS 語言，增長了諸如變量、混合（mixin）、函數等功能，讓 CSS 更易維護、方便製做主題、擴充。javascript

Less 能夠運行在 Node、瀏覽器和 Rhino 平臺上。網上有不少第三方工具幫助你編譯 Less 源碼。css

例如：html

@base: #f938ab; .box-shadow(@style, @c) when (iscolor(@c)) { -webkit-box-shadow: @style @c; box-shadow: @style @c; } .box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) { .box-shadow(@style, rgba(0, 0, 0, @alpha)); } .box { color: saturate(@base, 5%); border-color: lighten(@base, 30%); div { .box-shadow(0 0 5px, 30%) } }

編譯爲：java

.box { color: #fe33ac; border-color: #fdcdea; } .box div { -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); }

Improve this section.

Less 能夠經過 npm 在命令行上運行；在瀏覽器上做爲腳本文件下載；或者集成在廣大的第三方工具內。請參考用法。node

安裝

在服務器端最容易的安裝方式就是經過 npm （node.js 的包管理器），方法以下：git

$ npm install -g less

命令行用法

安裝 Less 後，就能夠在命令行上調用 Less 編譯器了，以下：github

$ lessc styles.less

這將輸出編譯以後的 CSS 代碼到 stdout，你能夠將輸出重定向到一個文件：web

$ lessc styles.less > styles.css

若要輸出壓縮過的 CSS，只需添加 -x 選項。若是但願得到更好的壓縮效果，還能夠經過 --clean-css 選項啓用 Clean CSS 進行壓縮。npm

執行 lessc 且不帶任何參數，就會在命令行上輸出全部可用選項的列表。瀏覽器

在代碼中調用 Less

能夠像下面這樣在代碼中調用 Less 編譯器（Node 平臺）。

var less = require('less'); less.render('.class { width: (1 + 1) }', function (e, css) { console.log(css); });

輸出爲

.class { width: 2; }

你還能夠手動調用分析器（paser）和編譯器：

var parser = new(less.Parser); parser.parse('.class { width: (1 + 1) }', function (err, tree) { if (err) { return console.error(err) } console.log(tree.toCSS()); });

配置

能夠給編譯器傳遞多個參數：

var parser = new(less.Parser)({ paths: ['.', './lib'], // Specify search paths for @import directives filename: 'style.less' // Specify a filename, for better error messages }); parser.parse('.class { width: (1 + 1) }', function (e, tree) { tree.toCSS({ // Minify CSS output compress: true }); });

Grunt

Less 還和流行的 Grunt 構建工具進行了集成，能夠參考 grunt-contrib-less 插件。

第三方工具

請參考用法一節瞭解其它工具的細節。

客戶端用法

在瀏覽器上跑 less.js 很是方便開發，可是不推薦用於生產環境。

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

那就開始吧，在頁面中加入 .less 樣式表的連接，並將 rel 屬性設置爲 "stylesheet/less"：

<link rel="stylesheet/less" type="text/css" href="styles.less" />

接下來，下載 less.js 並經過 <script></script> 標籤將其引入，放置於頁面的 <head> 元素內：

<script src="less.js" type="text/javascript"></script>

提示

務必確保在 less.js 以前加載你的樣式表。
若是加載多個 .less 樣式表文件，每一個文件都會被單獨編譯。所以，一個文件中所定義的任何變量、mixin 或命名空間都沒法在其它文件中訪問。

瀏覽器端設置參數

在 <script src="less.js"></script> 以前定義全局的 less 對象就能夠爲 Less.js 設置參數：

<!-- set options before less.js script --> <script> less = { env: "development", async: false, fileAsync: false, poll: 1000, functions: {}, dumpLineNumbers: "comments", relativeUrls: false, rootpath: ":/a.com/" }; </script> <script src="less.js"></script>

Improve this section.

瀏覽器端下載

下載源碼

直接從 GitHub 上下載最新的 Less.js 源碼。

經過 GitHub 克隆或 fork 本項目

經過 Bower 安裝

經過 Bower 安裝 Less.js 項目。

bower install less

Less CDN 加速

CDN.

<script src="http://cdn.bootcss.com/less.js/1.7.0/less.min.js"></script>本文轉自：http://less.bootcss.com/

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。