Less學(xué)習(xí)筆記 -- Variables （變量）

發(fā)布時間：2020-07-30 17:57:23 來源：網(wǎng)絡(luò) 閱讀：357 作者：frwupeng517 欄目：開發(fā)技術(shù)

幾個學(xué)習(xí)Less的網(wǎng)站：（主體內(nèi)容都差不多）

http://www.bootcss.com/p/lesscss/

http://www.lesscss.net/

http://www.css88.com/doc/less/features/

關(guān)于Less的安裝方法有很多介紹，這里出于學(xué)習(xí)方便，使用 Koala 工具

Less學(xué)習(xí)筆記 -- Variables （變量）

今天主要學(xué)習(xí)的是Less中的變量，與其他語言中的變量一樣，Less中的變量允許我們單獨(dú)定義一系列的通用樣式，然后在需要的時候調(diào)用，給代碼維護(hù)也帶來了方便。

需要注意的是，由于Less中的變量只能定義一次，實(shí)際上相當(dāng)于是一個常量。

Less代碼：

@charset "UTF-8";
@nice-blue:#5b83ad; //這是一個變量
@light-blue:@nice-blue + #111;  /*這也是一個變量*/

CSS代碼編譯：

@charset "UTF-8";
/*這也是一個變量*/

這里需要指出的就是Less中有關(guān)注釋的兩種不同用法，注釋方法和Javascript中一樣，所不同的是以//注釋的注釋內(nèi)容不會編譯成CSS內(nèi)容，而以/**/注釋的內(nèi)容會自動編譯成CSS的編譯內(nèi)容。

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');
}

向AI問一下細(xì)節(jié)

Less學(xué)習(xí)筆記 -- Variables （變量）

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽