一锤岸、普通的變量
1. 變量的定義方式：@
2. 示例：
- less 文件：
@blue:#5B83AD;
#header{
color:@blue;
}
- 編譯后的 css 文件：
#header {
color: #5b83ad;
}
二蛆封、作為選擇器和屬性名
1. 使用的時候?qū)⒆兞恳浴癅{變量名}”的方式使用
2. 示例：
- html 文件：
<div class="width"></div>
- less 文件：
@mySelector:width;
.@{mySelector}{
@{mySelector}:960px;
height:500px;
}
- 編譯后的 css 文件：
.width {
width: 960px;
height: 500px;
}
注意：這里的選擇器即是選擇器也是屬性名甘有，譬如將 class攘烛、@mySelector:width;
換成 widths 就會報錯嗓袱，不識別臼朗，因為 css 里面沒有 widths 這個屬性。
三昏名、作為 url
1. 使用時用""將變量的值括起來涮雷，同樣將變量以@{變量名}的方式使用
2. 示例
- less 文件：
@myUrl:"http://class.imooc.com/static/module/index/img";
body{
background:#ccc url("@{myUrl}/nav.png") no-repeat;
}
- 編譯后的 css 文件：
body {
background:#cccccc
url("http://class.imooc.com/static/module/index/img/nav.png")
no-repeat;
}
四、延遲加載
1. 變量是延遲加載的轻局，在使用前不一定要預(yù)先聲明洪鸭。
2. 示例
- less 文件
.box{
background:@green;
width:500px;
height:500px;
}
@green:#801f77;
@baise:white;
- 編譯后的 css 文件
.box {
background: #801f77;
width: 500px;
height: 500px;
}
