Heim  >  Artikel  >  Web-Frontend  >  Einführung in Methoden zur Verwendung von weniger (Variablen, Mischen, Matching, Operationen, Verschachtelung)

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

高洛峰
高洛峰Original
2017-03-17 10:30:341781Durchsuche

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
    使用less(变量,混合,匹配,运算,嵌套)的方法介绍
    So kompilieren Sie
    - 使用less(变量,混合,匹配,运算,嵌套)的方法介绍

  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!

    Stellungnahme:
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn