Heim > Artikel > Web-Frontend > Einführung in Methoden zur Verwendung von weniger (Variablen, Mischen, Matching, Operationen, Verschachtelung)
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.
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:
Installierennode.js --- Dies ist ein Paketverwaltungstool, das in Zukunft verwendet wird
WIN+ R
Geben Sie npm install less ein
....
// 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; }an
Nach der Kompilierung wird im CSS Folgendes angezeigt:
.box { width:100px; }
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; }
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 der Kompilierung wird im CSS die Schreibmethode
.one { width: 100px; height: 200px; background-color: #008000; border: 3px solid #ff0000; }
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); }
.one { width: 100px; height: 200px; background-color: #008000; border: 1px solid #ff0000; }
@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; }
@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; }
.border { border:1px solid red; } .one { width: 100px; height: 200px; background-color: #008000; border: 1px solid red; }
//定义上,下,左,右边框的样式 .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); }
.border_use1 { border-left:5px solid #ff0000; border-color:yellow; } .border_use2 { border-right:5px solid #ff0000; border-color:yellow; }
Die Schreibmethode in
@ly_width:100px; .one { width:@ly_widht + 100; }
.one { width:200px; }
<p class="one"> <p class="two"></p> </p>
@ly_width:100px; @ly_height:200px; @ly_color:red; .one { width:@ly_width; height:@ly_height; background-color:@ly_color; .two { background-color: green; } }
.one { width: 100px; height: 200px; background-color: #ff0000; } .one .two { background-color: green; }
//和前面提到的混合一起举个栗子 .border(@border_width;@border_style;@border_color){ border:@arguments; } .one { .border(1px;solid;red); }
.one { border:1px solid #ff0000; }
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!