Einführung in Methoden zur Verwendung von weniger (Variablen, Mischen, Matching, Operationen, Verschachtelung)

高洛峰

Freigeben： 2017-03-17 10:30:34

Original

1775 Leute haben es durchsucht

Wie man weniger und einige häufig verwendete verwendet (Variablen, Mischen, Abgleichen, Operationen, Verschachtelung)

Weniger Einführungs- und Kompilierungstools

Was ist weniger

1.LESSCSS ist eine dynamische Stilsprache und eine Art CSS-Vorverarbeitungssprache. Sie verwendet eine CSS-ähnliche Syntax und verleiht CSS die Eigenschaften einer dynamischen Sprache, wie z. B. Variablen, Vererbung, Operationen, Funktionen usw., was das Schreiben und Verwalten von CSS erleichtert.
LESSCSS kann in mehreren Sprachen und Umgebungen verwendet werden, einschließlich Browsern, Desktop-Clients und Servern.

weniger Kompilierungstool

Koala Koala – wenn während der Kompilierung kein CSS-Ordner erstellt wird, generiert Koala automatisch einen für Sie
So stellen Sie die Sprache ein

So kompilieren Sie
-
Lassen Sie Webstorm weniger Kompilierung unterstützen:

Installieren node.js --- Dies ist ein Paketverwaltungstool, das in Zukunft verwendet wird
WIN+ R
Geben Sie npm install less ein

....

less Die Syntax von

Ps: Die folgenden Wissenspunkte verwenden die oben genannten Wissenspunkte (z. B. werden Variablen beim Mischen verwendet, um den Eindruck zu vertiefen^_^)

Kommentar

// Wird nur in weniger angezeigt
/**/ wird während der Kompilierung kompiliert. Eine gute CSS-Datei zeigt

Variable

weniger Schreibmethode
```
@ly_width:100px;
.box {
width:@ly_width;
}
```
Nach dem Login kopieren
an
Nach der Kompilierung wird im CSS Folgendes angezeigt:
```
.box {
width:100px;
}
```
Nach dem Login kopieren

Variablen mit @ definieren

Gemischt

Grenzradius-Kompatibilität lösen

.border_radius (@radius: 5px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
-ms-border-radius: @radius;
-o-border-radius: @radius;
border-radius: @radius;
}

Nach dem Login kopieren

weniger

@ly_width:100px;
@ly_height:200px;
@ly_color:green;
.border(@border_width:3px;) {
border:@border_width solid red;
}
.one {
width:@ly_width;
height:@ly_height;
background-color:@ly_color;
.border();
}

Nach dem Login kopieren

Nach der Kompilierung wird im CSS die Schreibmethode

.one {
width: 100px;
height: 200px;
background-color: #008000;
border: 3px solid #ff0000;
}

Nach dem Login kopieren

weniger angezeigt >

@ly_width:100px;
@ly_height:200px;
@ly_color:green;
.border(@border_width) {
border:@border_width solid red;
}
.one {
width:@ly_width;
height:@ly_height;
background-color:@ly_color;
.border(1px);
}

Nach dem Login kopieren

Nach der Kompilierung wird im CSS Folgendes angezeigt:

.one {
width: 100px;
height: 200px;
background-color: #008000;
border: 1px solid #ff0000;
}

Nach dem Login kopieren

Wenn Sie zum gehen möchten Code in weniger zuerst Wie wendet man den .border-Stil in .one an?

@ly_width:100px;
@ly_height:200px;
@ly_color:green;
.border {
border:1px solid red;
}
.one {
width:@ly_width;
height:@ly_height;
background-color:@ly_color;
}

Nach dem Login kopieren

wird nach der Kompilierung wie folgt geschrieben

@ly_width:100px;
@ly_height:200px;
@ly_color:green;
.border {
border:1px solid red;
}
.one {
width:@ly_width;
height:@ly_height;
background-color:@ly_color;
.border;
}

Nach dem Login kopieren

in CSS Dargestellt in ist

.border { border:1px solid red; } .one { width: 100px; height: 200px; background-color: #008000; border: 1px solid red; }

Mischen ohne Parameter
Mischen mit Parametern - -- Ohne Standardwert (es können mehrere Parameter übergeben werden, getrennt durch Kommas oder Semikolons. Es wird empfohlen, Semikolons zu verwenden. Im Folgenden wird ein Parameter als Beispiel genommen)
Mischung mit Parametern-- - Mit Standardwert (mehrere Parameter können übergeben werden, ein Parameter wird als Beispiel verwendet)
Wird häufig bei der Lösung der CSS3-Kompatibilität verwendet

Übereinstimmungsmuster

So schreibe ich weniger

//定义上,下,左,右边框的样式
.border(top;@border_width:5px;@border_color:red){
border-top:@border_width solid @border_color;
}
.border(bottom;@border_width:5px;@border_color:red){
border-bottom:@border_width solid @border_color;
}
.border(left;@border_width:5px;@border_color:red){
border-left:@border_width solid @border_color;
}
.border(right;@border_width:5px;@border_color:red){
border-right:@border_width solid @border_color;
}
//如果想写通用的样式 可以在下面的代码中写 格式是固定的 
.border(@_,@border_width:5px;@border_color:red){
border-color:yellow;
}
.border_use1 {
//选择和if差不多 如果是left就调用上面对应的
.border(left);
}
.border_use2 {
//选择和if差不多 如果是right就调用上面对应的
.border(right);
}

Nach dem Login kopieren

Nach der Kompilierung wird im CSS

.border_use1 {
border-left:5px solid #ff0000;
border-color:yellow;
}
.border_use2 {
border-right:5px solid #ff0000;
border-color:yellow;
}

Nach dem Login kopieren

Betrieb

Die Schreibmethode in

@ly_width:100px;
.one {
width:@ly_widht + 100;
}

Nach dem Login kopieren

```
.one {
width:200px;
}
```
Nach dem Login kopieren

Verschachtelung

<p class="one">
<p class="two"></p>
</p>

Nach dem Login kopieren

@ly_width:100px;
@ly_height:200px;
@ly_color:red;
.one {
width:@ly_width;
height:@ly_height;
background-color:@ly_color;
.two {
    background-color: green;
}
}

Nach dem Login kopieren

.one {
width: 100px;
height: 200px;
background-color: #ff0000;
}
.one .two {
  background-color: green;
}

Nach dem Login kopieren

@arguments variable

//和前面提到的混合一起举个栗子  
.border(@border_width;@border_style;@border_color){
border:@arguments;
}
.one {
.border(1px;solid;red);
}

Nach dem Login kopieren

```
.one {
border:1px solid #ff0000;
}
```
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonEinführung in Methoden zur Verwendung von weniger (Variablen, Mischen, Matching, Operationen, Verschachtelung). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!