valeur, la valeur maximale par défaut est 1

valeur la plus élevée

valeur la plus basse

Seuil d’avertissement plus élevé

Seuil d’avertissement inférieur

La valeur optimale, la valeur par défaut est le milieu, la valeur optimale est verte, la valeur proche de la valeur optimale est jaune et la valeur éloignée de la valeur optimale est rouge.

valeur, la valeur maximale par défaut est 1

valeur maximum

direction horizontale

Direction verticale

// Définir des variables<br>@width : 500px;<br>@height : 300px;<br>@color : #f90;<br><br><br>#box {<br> position : absolue;<br > gauche : 50 % ;<br> haut : 50 % ;<br> largeur : @width;<br> hauteur : @height;<br> marge-gauche : -@width/2;<br> marge-haut : -@height/2;<br> bordure : 2px solide @color;<br>}

npm installer moins -g

lessc bootstrap.less bootstrap.css

//Traitement la variable less comme la valeur de l'attribut CSS<br> width: @len;

// Lorsque la variable less est utilisée comme nom d'attribut @{nom de la variable}<br> @{bg} : @basecolor;

// Lorsque la variable less est utilisée comme sélecteur @{variable}<br>#@{activeclass} {<br> width: 100px;<br> height: 100px;<br>}

// La fusion normale est la même que le sélecteur de classe<br>.center-box01 {<br> position : absolue;<br> gauche : 50 % ;<br> haut : 50 %;<br> largeur : 400 px ;<br > hauteur : 300 px ;<br> marge gauche : -200 px ;<br> marge supérieure : -150 px ;<br> couleur d'arrière-plan : #ccc;<br>}<br><br>.box01 {<br > bordure : 1px solide #999 ;<br> text-align:center;<br><br> // Appel à la fusion<br> .center-box01();<br>}<br>

//Après une compilation mixte sans sortie, le css ne sera pas sorti<br>.center-box02() {<br> position : absolue;<br> gauche : 50%;<br> haut : 50%;<br> largeur : 400 px ;<br> hauteur : 300 px ;<br> marge gauche : -200 px ;<br> marge supérieure : -150 px ;<br> couleur d'arrière-plan : #ccc;<br>}<br>.box02 {<br> // Appel mix<br> .center-box02();<br><br> border:1px solid #ccc;<br>}<br>.list {<br> // Appel sans paramètres Pour mélange, () peut être omis<br> .center-box02;<br>}

// Mélange avec paramètres<br>.center-box03 (@width, @height, @bgcolor) {<br> position : absolue ;<br> gauche : 50 % ;<br> haut : 50 % ;<br> largeur : @width;<br> hauteur : @height;<br> marge-gauche : -@width/2;<br> margin-top : -@height/2;<br> couleur d'arrière-plan : @bgcolor;< br >}<br><br>.box03 {<br> //.center-box03(600px, 200px, rouge);<br> .center-box03(1000px, 500px, #369);<br>}

//Les valeurs par défaut des paramètres de mixage. Les paramètres avec les valeurs par défaut sont placés à l'arrière<br>.center-box04 (@width, @height:100px, @bgcolor : gray) {<br> position : absolue ; <br> gauche : 50 % ;<br> haut : 50 % ;<br> largeur : @width;<br> hauteur : @height;<br> marge-gauche : -@width/2;<br> margin- top : -@height/2 ;<br> couleur d'arrière-plan : @bgcolor;<br>}<br><br>.box04 {<br> .center-box04(200px, 100px);<br> //. center-box04(200px, 100px , rouge);<br> //.center-box04(800px);<br>}

//Valeur du paramètre par défaut,<br>.center-box05 (@width:1000px, @height, @bgcolor) {<br> position : absolue ;<br> gauche : 50 % ;<br> haut : 50 % ;< br> largeur : @width ;<br> hauteur : @height ;<br> marge-gauche : -@width/2 ;<br> marge-top : -@height/2 ;<br> couleur d'arrière-plan : @bgcolor ;<br>}<br><br>.box05 {<br> //.center-box05(400px, 300px, green);<br><br> // Lors de l'appel du mix, précisez à quelle valeur est attribuée quel paramètre L'ordre n'a pas d'importance, spécifiez-le simplement<br> //.center-box05(@height:500px, @bgcolor:red);<br> .center-box05(@bgcolor:blue, @height :500px, @width:400px) ;<br>}

/*<br>transition : 1s largeur, hauteur linéaire 1s<br>*/<br>// @arguments Obtenez tous les paramètres réels<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, largeur);<br> .transition(2s, largeur, facilité, 1s);<br>}<br>.box06 {< br > // En plus des virgules, des points-virgules peuvent également être utilisés pour séparer les paramètres<br> // Généralement, des virgules sont utilisées Si la valeur d'un paramètre contient une virgule, des points-virgules sont utilisés pour séparer les paramètres<br> .transition( 2s ; largeur, hauteur ; facilité ; 1s);<br>}