value, the default maximum value is 1

highest value

lowest value

Higher warning threshold

Lower warning threshold

The optimal value, the default is the middle, the optimal value is green, the value close to the optimal value is yellow, and the value far from the optimal value is red.

value, the default maximum value is 1

maximum value

horizontal direction

vertical direction

// Define variables<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

//Treat the less variable as the value of the css attribute<br> width: @len;

// When the less variable is used as an attribute name @{variable name}<br> @{bg}: @basecolor;

// When the less variable is used as a selector @{variable}<br>#@{activeclass} {<br> width: 100px;<br> height: 100px;<br>}

// Normal blending is the same as class selector<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> // Call blending<br> .center-box01();<br>}<br>

//After mixed compilation without output, the css will not be output<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> // Call mix<br> .center-box02();<br><br> border:1px solid #ccc;<br>}<br>.list {<br> // Call without parameters For blending, () can be omitted<br> .center-box02;<br>}

// Mixing with parameters<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>}

//Default values ​​of mixing parameters. Parameters with default values ​​are placed at the back<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>}

//Default parameter value,<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> // When calling the mix, specify which value is assigned to which parameter It doesn’t matter the order, just specify it all<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 Get all actual parameters<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> // In addition to commas, semicolons can also be used to separate parameters<br> // Generally, commas are used. If the value of a parameter contains a comma, semicolons are used to separate the parameters<br> .transition(2s; width,height; ease; 1s);<br>}