Wert, der standardmäßige Maximalwert ist 1

Höchster Wert

niedrigster Wert

Höhere Warnschwelle

Untere Warnschwelle

Der optimale Wert, der Standardwert ist die Mitte, der optimale Wert ist grün, der Wert nahe dem optimalen Wert ist gelb und der Wert, der weit vom optimalen Wert entfernt ist, ist rot.

Wert, der standardmäßige Maximalwert ist 1

Maximalwert

Horizontale Richtung

vertikale Richtung

// Variablen definieren<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

//Behandle die Less-Variable als Wert des CSS-Attributs<br> width: @len;

// Wenn die Less-Variable als Attributname verwendet wird @{Variablenname}<br> @{bg}: @basecolor;

// Wenn die Variable less als Selektor verwendet wird @{variable}<br>#@{activeclass} {<br> width: 100px;<br> height: 100px;<br>}

// Normales Mischen ist dasselbe wie Klassenselektor<br>.center-box01 {<br> position: absolute;<br> left: 50%;<br> top: 50%;<br> width: 400px;<br > Höhe: 300px;<br> Rand links: -200px;<br> Rand oben: -150px;<br> Hintergrundfarbe: #ccc;<br>}<br><br>.box01 {<br > border: 1px solid #999;<br> text-align:center;<br><br> // Blending aufrufen<br> .center-box01();<br>}<br>

//Nach der gemischten Kompilierung ohne Ausgabe wird das CSS nicht ausgegeben<br>.center-box02() {<br> position: absolute;<br> left: 50%;<br> top: 50%;<br> Breite: 400px;<br> Höhe: 300px;<br> Rand links: -200px;<br> Rand oben: -150px;<br> Hintergrundfarbe: #ccc;<br>}<br>.box02 {<br> // Mix aufrufen<br> .center-box02();<br><br> border:1px solid #ccc;<br>}<br>.list {<br> // Aufruf ohne Parameter For blending, () kann weggelassen werden<br> .center-box02;<br>}

// Mischen mit Parametern<br>.center-box03(@width, @height, @bgcolor) {<br> position: absolute;<br> left: 50%;<br> top: 50%;<br> width : @width;<br> Höhe: @height;<br> Rand links: -@width/2;<br> Rand oben: -@height/2;<br> Hintergrundfarbe: @bgcolor;< br >}<br><br>.box03 {<br> //.center-box03(600px, 200px, red);<br> .center-box03(1000px, 500px, #369);<br>}

//Standardwerte der Mischparameter werden hinten platziert<br>.center-box04(@width, @height:100px, @bgcolor: grey) {<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> Hintergrundfarbe: @bgcolor;<br>}<br><br>.box04 {<br> .center-box04(200px, 100px);<br> //. center-box04(200px, 100px, rot);<br> //.center-box04(800px);<br>}

//Standardparameterwert,<br>.center-box05(@width:1000px, @height, @bgcolor) {<br> position: absolute;<br> left: 50%;<br> top: 50%;< br> Breite: @width;<br> Höhe: @height;<br> Rand links: -@width/2;<br> Rand oben: -@height/2;<br> Hintergrundfarbe: @bgcolor ;<br>}<br><br>.box05 {<br> //.center-box05(400px, 300px, green);<br><br> // Beim Aufruf des Mixes angeben, welcher Wert zugewiesen wird welcher Parameter Die Reihenfolge spielt keine Rolle, geben Sie einfach alles an<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 Alle tatsächlichen Parameter abrufen<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, equal, 1s);<br>}<br>.box06 {< br > // Zusätzlich zu Kommas können auch Semikolons zur Trennung von Parametern verwendet werden<br> // Im Allgemeinen werden Kommas verwendet, wenn der Wert eines Parameters ein Komma enthält, werden Semikolons zur Trennung der Parameter verwendet<br> .transition( 2s; Breite, Höhe; Leichtigkeit;<br>}