valor, el valor máximo predeterminado es 1

valor más alto

valor más bajo

Umbral de advertencia más alto

Umbral de advertencia inferior

El valor óptimo, el valor predeterminado es el medio, el valor óptimo es verde, el valor cercano al valor óptimo es amarillo y el valor alejado del valor óptimo es rojo.

valor, el valor máximo predeterminado es 1

valor máximo

Dirección horizontal

dirección vertical

// Definir variables<br>@width: 500px;<br>@height: 300px;<br>@color: #f90;<br><br><br>#box {<br> posición: absoluta;<br > izquierda: 50%;<br> arriba: 50%;<br> ancho: @width;<br> altura: @height;<br> margen-izquierda: -@width/2;<br> margen-superior: -@altura/2;<br> borde: 2px sólido @color;<br>}

npm instala menos -g

menosc bootstrap.less bootstrap.css

//Trata la variable menor como el valor del atributo css<br> ancho: @len;

// Cuando la variable less se usa como nombre de atributo @{nombre de variable}<br> @{bg}: @basecolor;

// Cuando la variable less se usa como selector @{variable}<br>#@{activeclass} {<br> ancho: 100px;<br> alto: 100px;<br>}

// La combinación normal es la misma que el selector de clases<br>.center-box01 {<br> posición: absoluta;<br> izquierda: 50%;<br> arriba: 50%;<br> ancho: 400px;<br > altura: 300px;<br> margen izquierdo: -200px;<br> margen superior: -150px;<br> color de fondo: #ccc;<br>}<br><br>.box01 {<br > borde: 1px sólido #999;<br> text-align:center;<br><br> // Llamar a combinación<br> .center-box01();<br>}<br>

//Después de la compilación mixta sin salida, el CSS no se generará<br>.center-box02() {<br> posición: absoluta;<br> izquierda: 50%;<br> arriba: 50%;<br> ancho: 400px;<br> alto: 300px;<br> margen izquierdo: -200px;<br> margen superior: -150px;<br> color de fondo: #ccc;<br>}<br>.box02 {<br> // Llamar a mix<br> .center-box02();<br><br> border:1px solid #ccc;<br>}<br>.list {<br> // Llamar sin parámetros para combinación, () se puede omitir<br> .center-box02;<br>}

// Mezclando con parámetros<br>.center-box03(@width, @height, @bgcolor) {<br> posición: absoluta;<br> izquierda: 50%;<br> arriba: 50%;<br> ancho : @ancho;<br> alto: @alto;<br> margen izquierdo: -@ancho/2;<br> margen superior: -@alto/2;<br> color de fondo: @bgcolor;< br >}<br><br>.box03 {<br> //.center-box03(600px, 200px, rojo);<br> .center-box03(1000px, 500px, #369);<br>}

// Los valores predeterminados de los parámetros de mezcla. Los parámetros con valores predeterminados se colocan en la parte posterior<br>.center-box04(@width, @height:100px, @bgcolor: gray) {<br> position: absoluta; <br> izquierda: 50% ;<br> arriba: 50%;<br> ancho: @width;<br> alto: @height;<br> margen-izquierdo: -@width/2;<br> margen- arriba: -@height/2 ;<br> color de fondo: @bgcolor;<br>}<br><br>.box04 {<br> .center-box04(200px, 100px);<br> //. center-box04(200px, 100px, rojo);<br> //.center-box04(800px);<br>}

//Valor del parámetro predeterminado,<br>.center-box05(@width:1000px, @height, @bgcolor) {<br> posición: absoluta;<br> izquierda: 50%;<br> arriba: 50%;< br> ancho: @ancho;<br> alto: @alto;<br> margen izquierdo: -@ancho/2;<br> margen superior: -@alto/2;<br> color de fondo: @bgcolor ;<br>}<br><br>.box05 {<br> //.center-box05(400px, 300px, green);<br><br> // Al llamar a la mezcla, especifica a qué valor se asigna qué parámetro No importa el orden, solo especifíquelo todo<br> //.center-box05(@height:500px, @bgcolor:red);<br> .center-box05(@bgcolor:blue, @height :500px, @ancho:400px);<br>}

/*<br>transición: 1s ancho,alto lineal 1s<br>*/<br>// @arguments Obtener todos los parámetros reales<br>.transition(@duration, @property:all, @timing-function:linear , @delay:0s) {<br> -webkit-transition: @arguments;<br> -moz-transition: @arguments;<br> transición: @arguments;<br>}<br><br>.box06 { < br> //.transition(2s);<br> //.transition(2s, ancho);<br> .transition(2s, ancho, facilidad, 1s);<br>}<br>.box06 {< br > // Además de las comas, también se pueden usar puntos y coma para separar parámetros<br> // Generalmente, se usan comas Si el valor de un parámetro contiene una coma, se usan puntos y comas para separar los parámetros<br> .transition( 2s; ancho, alto; facilidad; 1s);<br>}