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

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

1. 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
   -

2. 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

....

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^_^)

1. 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;
  }

  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);
  }

• Nach der Kompilierung wird im CSS Folgendes angezeigt:

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

• 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;
  }

• 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;
  }

• 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 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;
  }

kann so verstanden werden, als ob es der oben genannten Mischung etwas ähnelt

Betrieb

Die Schreibmethode in

less ist

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

, die nach der Kompilierung im CSS angezeigt wird, ist

• .one {
  width:200px;
  }

Operationen bieten Additions-, Subtraktions-, Multiplikations- und Divisionsoperationen und können auch Operationen an Attributwerten und Farben ausführen...

Verschachtelung

HTML-Struktur

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

Weniger schreiben

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

Kompilieren Was schließlich im CSS angezeigt wird, ist

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

Sie können einen anderen Selektor innerhalb eines Selektors verschachteln, und der Code sieht klar aus -cut, und Sie können die Codewartung verbessern

@arguments variable

Weniger schreiben

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

Nach der Kompilierung wird im CSS Folgendes angezeigt:

• .one {
  border:1px solid #ff0000;
  }

kann alle Variablen enthalten und die Variablen verarbeiten zusammen

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!