选择器å¯ä»¥å¼•ç”¨ä»»ä½•å˜é‡ï¼Œå®ƒæ˜¯åœ¨ç¼–译时构建的。å˜é‡å称必须放在花括å·å†…({})å‰ç¼€ä¸º@符å·ã€‚
示例
下é¢çš„例å演示了如何使用选择器在 Less 文件：
<html> <head> <link rel="stylesheet" href="style.css" type="text/css" /> <title>LESS selectors</title> </head> <body> <h2>Welcome to zaixian zaixian</h2> <div class="div1"> <p>LESS is a CSS pre-processor that enables customizable, manageable and reusable style sheet for web site.</p> </div> <div class="div2"> <p>LESS is a dynamic style sheet language that extends the capability of CSS. LESS is also cross browser friendly.</p> </div> </body> </html>
接下æ¥ï¼Œåˆ›å»ºæ–‡ä»¶ style.less。
style.less
@selector: h2;
@{selector} {
background: #2ECCFA;
}
ä½ å¯ä»¥ç¼–译 style.less 使用下é¢çš„命令æ¥ç”Ÿæˆ style.css 文件：
lessc style.less style.css
接ç€æ‰§è¡Œä¸Šé¢çš„命令，它会自动创建 style.css文件，下é¢çš„代ç ：
style.css
body {
background: #2ECCFA;
}
输出
让我们æ¥æ‰§è¡Œä»¥ä¸‹æ¥éª¤ï¼Œçœ‹çœ‹ä¸Šé¢çš„代ç 工作：
-
ä¿å˜ä¸Šè¿°çš„HTML代ç 到 less_variables_interpolation_selectors.html 文件 。
-
在æµè§ˆå™¨ä¸æ‰“开该HTML文件，得到如下输出显示。
上一篇：
Lesså˜é‡æ¦‚è¿°
下一篇：
Less URLs