值，預設最大值是1

最高值

最低值

較高預警閾值

較低預警閾值

最優值,預設是中間，最優值綠色，離最優值近黃色，離最優值遠紅色

值，預設最大值是1

最大值

水平方向

垂直方向

// 定義變數<br>@width: 500px;<br>@height: 300px;<br>@color: #f90;<br><br><br>#box {<br> position: absolute;<br > left: 50%;<br> top: 50%;<br> width: @width;<br> height: @height;<br> margin-left: -@width/2;<br> margin-top: -@height/2;<br> border: 2px solid @color;<br>}

npm install less -g

lessc bootstrap.less bootstrap.css

//把 less 變數當 css屬性的值<br> width: @len;

// less變數當屬性名稱的時候 @{變數名稱}<br> @{bg}: @basecolor;

// less 變數當選擇器的時候 @{變數}<br>#@{activeclass} {<br> width: 100px;<br> height: 100px;<br>}

// 普通混合跟類別選擇器一樣<br>.center-box01 {<br> position: absolute;<br> left: 50%;<br> top: 50%;<br> width: 400px;<br> height: 300px;<br> margin-left: -200px;<br> margin-top: -150px;<br> background-color: #ccc;<br>}<br><br>.box01 {<br> border: 1px solid #999;<br> text-align:center;<br><br> // 呼叫混合<br> .center-box01();<br>}<br>

//不帶輸出的混合編譯後css裡不會輸出<br>.center-box02() {<br> position: absolute;<br> left: 50%;<br> top: 50%;<br> width: 400px;<br> height: 300px;<br> margin-left: -200px;<br> margin-top: -150px;<br> background-color: #ccc;<br>}<br>.box02 {<br> // 呼叫混合<br> .center-box02();<br><br> border:1px solid #ccc;<br>}<br>.list {<br> // 呼叫不含參數的混合， 可以省略()<br> .center-box02;<br>}

// 帶參數的混合<br>.center-box03(@width, @height, @bgcolor) {<br> position: absolute;<br> left: 50%;<br> top: 50%;<br> width: @width;<br> height: @height;<br> margin-left: -@width/2;<br> margin-top: -@height/2;<br> background-color: @bgcolor;< br>}<br><br>.box03 {<br> //.center-box03(600px, 200px, red);<br> .center-box03(1000px, 500px, #369);<br>}

// 混合參數預設值有預設值的參數放在後面<br>.center-box04(@width, @height:100px, @bgcolor: gray) {<br> position: absolute;<br> left: 50% ;<br> top: 50%;<br> width: @width;<br> height: @height;<br> margin-left: -@width/2;<br> margin-top: -@height/2 ;<br> background-color: @bgcolor;<br>}<br><br>.box04 {<br> .center-box04(200px, 100px);<br> //.center-box04(200px, 100px , red);<br> //.center-box04(800px);<br>}

// 參數預設值，<br>.center-box05(@width:1000px, @height, @bgcolor) {<br> position: absolute;<br> left: 50%;<br> top: 50%;< br> width: @width;<br> height: @height;<br> margin-left: -@width/2;<br> margin-top: -@height/2;<br> background-color: @bgcolor ;<br>}<br><br>.box05 {<br> //.center-box05(400px, 300px, green);<br><br> // 呼叫混合的時候，指定哪個值給哪個參數無所謂順序要指定全指定<br> //.center-box05(@height:500px, @bgcolor:red);<br> .center-box05(@bgcolor:blue, @height:500px, @width:400px) ;<br>}

/*<br>transition: 1s width,height linear 1s<br>*/<br>// @arguments 取得所有的實參<br>.transition(@duration, @property:all, @timing-function:linear , @delay:0s) {<br> -webkit-transition: @arguments;<br> -moz-transition: @arguments;<br> transition: @arguments;<br>}<br><br>.box06 { <br> //.transition(2s);<br> //.transition(2s, width);<br> .transition(2s, width, ease, 1s);<br>}<br>.box06 {< br> // 參數之間除了用逗號隔開也可以用分號<br> // 一般用逗號， 某個參數的值裡麵包含逗號，用分號去隔開參數<br> .transition(2s; width,height; ease; 1s);<br>}