溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
幾個學習Less的網站：（主體內容都差不多）
http://www.bootcss.com/p/lesscss/
http://www.lesscss.net/
http://www.css88.com/doc/less/features/
關于Less的安裝方法有很多介紹，這里出于學習方便，使用 Koala 工具
今天主要學習的是Less中的變量，與其他語言中的變量一樣，Less中的變量允許我們單獨定義一系列的通用樣式，然后在需要的時候調用，給代碼維護也帶來了方便。
需要注意的是，由于Less中的變量只能定義一次，實際上相當于是一個常量。
Less代碼：
@charset "UTF-8"; @nice-blue:#5b83ad; //這是一個變量 @light-blue:@nice-blue + #111; /*這也是一個變量*/
CSS代碼編譯：
@charset "UTF-8"; /*這也是一個變量*/
這里需要指出的就是Less中有關注釋的兩種不同用法，注釋方法和Javascript中一樣，所不同的是以//注釋的注釋內容不會編譯成CSS內容，而以/**/注釋的內容會自動編譯成CSS的編譯內容。
HTML代碼：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="header">我就是我，顏色不一樣的水果</div> <p class="text">My name is Li Lei!</p> <div id="menu"></div> <div id="img"></div> </body> </html>
Less代碼
@nice-blue:#5b83ad;
@aWidth:200px;
@aHeight:200px;
//引用定義好的變量
#header{color:@light-blue;}
#menu{width:@aWidth; height:@aHeight; background:@nice-blue+#f00;}CSS代碼
#header {
color: #6c94be;
}
#menu {
width: 200px;
height: 200px;
background: #5b83ad;
}這里需要特別提出對文件路徑的引入，變量是怎么寫的
Less代碼
@p_w_picpaths:'../p_w_picpaths';
#img{width:@aWidth+300; height:@aHeight+300; background:url('@{p_w_picpaths}/1.jpg');}CSS代碼
#img {
width: 500px;
height: 500px;
background: url('../p_w_picpaths/1.jpg');
}免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
