時間：2014-12-17 13:21:10 瀏覽：2644次
Less是一門CSS預處理語言，它擴充CSS語言，增加了諸如變量、混合（mixin）、函數等功能，讓CSS更易維護、方便制作主題、擴充。Less可以運行 Node、瀏覽器和Rhino平臺上。網上有很多第三方工具幫助你編譯 Less 源碼。現在less.js已經逐步被運用在網站建設中，雖然還是要進行最還是css編寫，但是運用上卻相當便利了。那如何來快速建立Less.js？今天筆者小丹要分享的文章就是這個主題了。
Less.js(或更少)是一個CSS預處理器，可以徹底改變你的寫作方式CSS。并且很容易安裝和設置為web開發(fā)。
有幾種方法可以安裝和配置較少，但對于發(fā)展中在瀏覽器中或者如果你只是感興趣嘗試而不需要一個web服務器上安裝它，最快的方法是引用less.js圖書館在HTML文檔中。讓我告訴你怎么做？
首先，從GitHub下載Less.js。
另外：如果你使用Git、fire up the CLI，導航到您的項目目錄，然后克隆回購越少你的電腦：
git clone https://github.com/less/less.js.git
有很多文件和目錄內 less.js-master目錄，當你打開它但我們只對里面的東西感興趣dist目錄(在開源行話是“分布”的簡稱目錄，生產使用的文件)。
在 dist目錄，你會發(fā)現兩個JavaScript文件： less.js和 less.min.js——你可以任選一個。
less.js評論版，這是偉大的如果你喜歡閱讀源代碼。 less.min.js是一個簡化版，有一個較小的文件大小。
把less.js或less.min.js在您的項目目錄中。
與你的代碼編輯器或文本編輯器：
創(chuàng)建一個HTML文檔。
創(chuàng)建一個樣式表。它應該有一個文件擴展名 .less。例子: styles.less。
在<head>你的HTML文檔,參考減少樣式表和JS文件你放在你的項目目錄：
<head>
<link href="styles.less" type="text/css" rel="stylesheet/less"/>
<script src="less.js" type="text/javascript"></script>
</head>
HTML
<!DOCTYPE html>
<html>
<head>
<title>Less.js: Quick Setup</title>
<link href="styles.less" type="text/css" rel="stylesheet/less"/>
<script src="less.js" type="text/javascript"></script>
</head>
<body>
<h1>Less.js: Quick Setup</h1>
<p><a >Read the tutorial</a></p>
</body>
</html>
LESS
/* 變量*/
@body-bg-color: #83b692; // 綠色
@text-color: #fff; // 白色
@button-bg-color: #f9627d; // 粉紅色
/* LESS CSS */
body {
background: @body-bg-color;
color: @text-color;
font-family: sans-serif;
text-align: center;
}
a:link, a:visited {
background: @button-bg-color;
color: @text-color;
display: inline-block;
padding: 10px 10px;
text-decoration: none;
}
a:hover {
background-color: desaturate(@button-bg-color, 50%);
}
a:active {
background-color: saturate(@button-bg-color, 50%);
}
結果
瀏覽器錯誤提示
默認情況下，不將提醒你每當遇到網頁中的錯誤，這是有用的在web開發(fā)。
編譯部署之前少CSS
開發(fā)完成后，編譯 .less文件定期 .css文件。如果你想做這個快速上手，你可以使用一個少在線編譯器。
上面的少CSS被使用編譯如下LESSTESTER：
/* Variables */
/* LESS CSS */
body {
background: #83b692;
color: #ffffff;
font-family: sans-serif;
text-align: center;
}
a:link,
a:visited {
background: #f9627d;
color: #ffffff;
display: inline-block;
padding: 10px 10px;
text-decoration: none;
}
a:hover {
background-color: #d08b97;
}
a:active {
background-color: #ff5c79;
}
推進少
盡管本教程中描述的方法是最快的方式啟動和運行與少，最好只用于研究，測試和開發(fā)，因為讓JavaScript庫的過程，CSS訪問者每次請求您的web頁面是一個糟糕的性能。
一旦你準備好少承諾，在您的web開發(fā)項目中使用它，最好的選擇是在web服務器上安裝和設置或刪除 less.js庫和編譯您的CSS正常CSS。
(轉載請注明轉自：www.weijushidai.com.cn/news/n1536.htm，謝謝!珍惜別人的勞動成果，就是在尊重自己!）
24小時服務熱線：4000-135-120轉6
業(yè)務 QQ: 444961110
渠道合作： 444961110@qq.com
河北供求互聯信息技術有限公司（河北供求網）誕生于2003年4月，是康靈集團旗下子公司，也是河北省首批從事網站建設、電子商務開發(fā)，并獲得國家工業(yè)和信息化部資質認證的企業(yè)。公司自成立以來，以傳播互聯網文化為已任, 以高科技為起點，以網絡營銷研究與應用為核心，致力于為各企事業(yè)單位提供網絡域名注冊、虛擬主機租用、網站制作與維護、網站推廣和宣傳、網站改版與翻譯、移動互聯網營銷平臺開發(fā)與運營、企業(yè)郵局、網絡支付、系統(tǒng)集成、軟件開發(fā)、電子商務解決方案等優(yōu)質的信息技術服務，與中國科學院計算機網絡信息中心、騰訊、百度、阿里巴巴、搜狗、360、電信、聯通、中國數據、萬網、中資源、陽光互聯、點點客、北龍中網、電信通等達成戰(zhàn)略合作伙伴關系。
