時(shí)間：2014-12-17 13:21:10 瀏覽：2216次
Less是一門CSS預(yù)處理語言，它擴(kuò)充CSS語言，增加了諸如變量、混合（mixin）、函數(shù)等功能，讓CSS更易維護(hù)、方便制作主題、擴(kuò)充。Less可以運(yùn)行 Node、瀏覽器和Rhino平臺(tái)上。網(wǎng)上有很多第三方工具幫助你編譯 Less 源碼?，F(xiàn)在less.js已經(jīng)逐步被運(yùn)用在網(wǎng)站建設(shè)中，雖然還是要進(jìn)行最還是css編寫，但是運(yùn)用上卻相當(dāng)便利了。那如何來快速建立Less.js？今天筆者小丹要分享的文章就是這個(gè)主題了。
Less.js(或更少)是一個(gè)CSS預(yù)處理器，可以徹底改變你的寫作方式CSS。并且很容易安裝和設(shè)置為web開發(fā)。
有幾種方法可以安裝和配置較少，但對于發(fā)展中在瀏覽器中或者如果你只是感興趣嘗試而不需要一個(gè)web服務(wù)器上安裝它，最快的方法是引用less.js圖書館在HTML文檔中。讓我告訴你怎么做？
首先，從GitHub下載Less.js。
另外：如果你使用Git、fire up the CLI，導(dǎo)航到您的項(xiàng)目目錄，然后克隆回購越少你的電腦：
git clone https://github.com/less/less.js.git
有很多文件和目錄內(nèi) less.js-master目錄，當(dāng)你打開它但我們只對里面的東西感興趣dist目錄(在開源行話是“分布”的簡稱目錄，生產(chǎn)使用的文件)。
在 dist目錄，你會(huì)發(fā)現(xiàn)兩個(gè)JavaScript文件： less.js和 less.min.js——你可以任選一個(gè)。
less.js評論版，這是偉大的如果你喜歡閱讀源代碼。 less.min.js是一個(gè)簡化版，有一個(gè)較小的文件大小。
把less.js或less.min.js在您的項(xiàng)目目錄中。
與你的代碼編輯器或文本編輯器：
創(chuàng)建一個(gè)HTML文檔。
創(chuàng)建一個(gè)樣式表。它應(yīng)該有一個(gè)文件擴(kuò)展名 .less。例子: styles.less。
在<head>你的HTML文檔,參考減少樣式表和JS文件你放在你的項(xiàng)目目錄：
<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%);
}
結(jié)果
瀏覽器錯(cuò)誤提示
默認(rèn)情況下，不將提醒你每當(dāng)遇到網(wǎng)頁中的錯(cuò)誤，這是有用的在web開發(fā)。
編譯部署之前少CSS
開發(fā)完成后，編譯 .less文件定期 .css文件。如果你想做這個(gè)快速上手，你可以使用一個(gè)少在線編譯器。
上面的少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;
}
推進(jìn)少
盡管本教程中描述的方法是最快的方式啟動(dòng)和運(yùn)行與少，最好只用于研究，測試和開發(fā)，因?yàn)樽孞avaScript庫的過程，CSS訪問者每次請求您的web頁面是一個(gè)糟糕的性能。
一旦你準(zhǔn)備好少承諾，在您的web開發(fā)項(xiàng)目中使用它，最好的選擇是在web服務(wù)器上安裝和設(shè)置或刪除 less.js庫和編譯您的CSS正常CSS。
(轉(zhuǎn)載請注明轉(zhuǎn)自：www.theclubhubb.com/news/n1536.htm，謝謝!珍惜別人的勞動(dòng)成果，就是在尊重自己!）
24小時(shí)服務(wù)熱線：400-1180-360
業(yè)務(wù) QQ: 444961110電話： 0311-80740308
渠道合作： 444961110@qq.com
河北供求互聯(lián)信息技術(shù)有限公司（河北供求網(wǎng)）誕生于2003年4月，是康靈集團(tuán)旗下子公司，也是河北省首批從事網(wǎng)站建設(shè)、電子商務(wù)開發(fā)，并獲得國家工業(yè)和信息化部資質(zhì)認(rèn)證的企業(yè)。公司自成立以來，以傳播互聯(lián)網(wǎng)文化為已任, 以高科技為起點(diǎn)，以網(wǎng)絡(luò)營銷研究與應(yīng)用為核心，致力于為各企事業(yè)單位提供網(wǎng)絡(luò)域名注冊、虛擬主機(jī)租用、網(wǎng)站制作與維護(hù)、網(wǎng)站推廣和宣傳、網(wǎng)站改版與翻譯、移動(dòng)互聯(lián)網(wǎng)營銷平臺(tái)開發(fā)與運(yùn)營、企業(yè)郵局、網(wǎng)絡(luò)支付、系統(tǒng)集成、軟件開發(fā)、電子商務(wù)解決方案等優(yōu)質(zhì)的信息技術(shù)服務(wù)，與中國科學(xué)院計(jì)算機(jī)網(wǎng)絡(luò)信息中心、騰訊、百度、阿里巴巴、搜狗、360、電信、聯(lián)通、中國數(shù)據(jù)、萬網(wǎng)、中資源、陽光互聯(lián)、點(diǎn)點(diǎn)客、北龍中網(wǎng)、電信通等達(dá)成戰(zhàn)略合作伙伴關(guān)系。
版權(quán)所有 ? 河北供求互聯(lián)信息技術(shù)有限公司－優(yōu)秀的石家莊網(wǎng)站建設(shè)公司，為您提供石家莊網(wǎng)站建設(shè)、網(wǎng)站推廣等優(yōu)質(zhì)服務(wù).
服務(wù)熱線：400-1180-360 增值電信業(yè)務(wù)經(jīng)營許可證：冀B2-20105159 冀ICP備09010972號(hào)
掃一掃
贈(zèng)送神秘大禮
全國免費(fèi)服務(wù)熱線
400-1180-360
