Weniger verwendet, aber nicht weniger hervorragende Eigenschaften von WENIGER

Dieser Beitrag ist inspiriert von dem Kommentar des angesehenen Habrauser SerafimArts, dass WENIGER nicht viel weiß. Ich möchte diese aufrührerischen Aussagen zerstreuen und gleichzeitig zeigen, wie schön WENIGER sein kann, wenn Sie es richtig vorbereiten.

Hinweis: Einige Beispiele für "Leben" in diesem Artikel sind für Personen vorgesehen, die aus irgendeinem Grund (aus religiösen Gründen) Autoprefixer nicht verwenden.

Hinweis 2: Für alles, was im Folgenden beschrieben wird, wird die neueste Version von LESS verwendet, da es keinen Grund gibt, sie überhaupt nicht zu verwenden.



Fusionen


Sie sind Assoziationen, sie verschmelzen ( Merge ). Wird verwendet, wenn Sie etwas mit einem Leerzeichen oder einem Komma anhängen müssen. Übergänge, Transformationen, mehrere Hintergründe, Schatten (Entschuldigung für das russische Wort: Boxen klingt irgendwie peinlich) freuen sich. Die besten Beispiele werden für mich sein.


Kombiniere durch ein Feld direkt im Mixin
.transform (@value) {
    transform+_:@value;
}
.transformed {
    .transform(rotateX(10deg));
    .transform(scale(1.2,1.1))
}

Kompiliert in
.transformed {
     transform: rotateX(10deg) scale(1.2, 1.1);
}


Und jetzt durch Kommas getrennt
.transition (@property: all,@duration: 0s,@delay: 0s,@ease: ease-in-out){
    transition+: @arguments;
}
.transitioned {
    .transition(width,1s);
    .transition(opacity,0.5s,0.2s,linear);
}

Wird sich verwandeln in
.transitioned {
     transition: width 1s 0s ease-in-out, opacity 0.5s 0.2s linear;
}


Was du brauchst. Keine Schwierigkeit bei der Verwendung: Rufen Sie das richtige Mixin einfach so oft auf, wie Sie möchten. Dies ist noch praktischer als eine Methode mit einer unbestimmten Anzahl von Parametern: Eine starre Reihenfolge der Argumente verhindert, dass Sie sich verlaufen. Glück und nur.

Bedingungen


Anstelle der üblichen Ifs gibt es in LESS sogenannte Guards ( Wachen ). Ihre Essenz besteht darin, unterschiedliche Ansagen eines Mixins in Abhängigkeit von unterschiedlichen Bedingungen zu nennen (es gibt etwas in ihnen von Generika). Ein Beispiel aus dem Leben ist in demselben Kommentar enthalten, der mich inspiriert hat: Ich hätte gerne Tranchen für Transformationen mit Präfixen. Also sei es (achte auf das when-Schlüsselwort nach der mixin-Deklaration):

//Специальный вариант для трансформа
.transition (@property: all,@duration: 0s,@delay: 0s,@ease: ease-in-out) when (@property=transform) {
    -webkit-transition+: -webkit-transform @duration @delay @ease;
       -moz-transition+:    -moz-transform @duration @delay @ease;
         -o-transition+:      -o-transform @duration @delay @ease;
            transition+:     -ms-transform @duration @delay @ease, 
                                 transform @duration @delay @ease;  //Кажется, -ms-transition официально не существует
}
//И всё остальное.
.transition (@property: all,@duration: 0s,@delay: 0s,@ease: ease-in-out) when not (@property=transform) {
    -webkit-transition+: @arguments;
       -moz-transition+: @arguments;
         -o-transition+: @arguments;
            transition+: @arguments;
}
.transitioned {
    .transition(width,1s);
    .transition(transform,0.5s,0.2s,linear);
}


Am Ausgang bekommen wir (Formatierung nach meinen Spalten, der Präprozessor hat den Rest erledigt)
.transitioned {
    -webkit-transition: width 1s 0s ease-in-out, -webkit-transform 0.5s 0.2s linear;
       -moz-transition: width 1s 0s ease-in-out,    -moz-transform 0.5s 0.2s linear;
         -o-transition: width 1s 0s ease-in-out,      -o-transform 0.5s 0.2s linear;
            transition: width 1s 0s ease-in-out,     -ms-transform 0.5s 0.2s linear, 
                                                         transform 0.5s 0.2s linear;
}


Na ist das nicht toll? Gards unterstützen relations =,>, <,> =, <=, logische Operatoren und, oder nicht, und einige weitere Funktionen zum Überprüfen des Variablentyps (iscolor, isnumber usw.), mit denen Sie die Auswahl des Mixins erheblich variieren können Grenzen. Eine kleine, aber wichtige Nuance: WENIGER nimmt alle Mixins mit demselben Namen auf und führt sie aus, die durch die Wache gehen. Wir dürfen dies nicht vergessen und alle notwendigen Bedingungen für die verbleibenden Fälle hinzufügen. Und das finde ich gut. Und warum das gut ist, wird unten gezeigt.

Zyklen


Die Aussage, dass es in LESS keine Schleifen gibt, ist absolut richtig. Aber es gibt eine Rekursion! Tatsächlich bieten Entwickler an , es zu verwenden . Als Beispiel für das Leben wollen wir einen Sprite-Klassengenerator für ein Bild erstellen (überspringen Sie nicht den Code, es gibt viele Kommentare).

// Это базовый миксин для бэкграунда. Он простой, как пять копеек, но это всего лишь пример
.spriter (@x: 0,@y: 0) {
    background: #cccccc url("my-sprite-img.png") @x*20px @y*30px;
}
//Здесь непосредственно генерируется класс
.generate_sprite(@x,@y) {
    .sprite-@{x}-@{y}{
        .spriter(@x,@y);
    }
}
//Следующие две функции управляющие - задают порядок действий при обходе двумерного массива рекурсией. 
//Удобно то, что их можно называть так же, как и основную функцию-генератор. 
//LESS будет вызывать все миксины, которые удовлетворят гардам.
.generate_sprite(@x,@y) when (@y=0) and (@x>0) {
    .generate_sprite(@x - 1,@spritey);
}
.generate_sprite(@x,@y) when (@y>0){
    .generate_sprite(@x,@y - 1);
}
//Числа, которые на один меньше количества столбцов и строк иконок в спрайте
@spritex: 1;
@spritey: 2;
//Запускаем генератор
.generate_sprite(@spritex,@spritey);


Am Ausgang erhalten wir sechs Klassen für Icons
.sprite-1-2 {
  background: #cccccc url("my-sprite-img.png") 20px 60px;
}
.sprite-1-1 {
  background: #cccccc url("my-sprite-img.png") 20px 30px;
}
.sprite-1-0 {
  background: #cccccc url("my-sprite-img.png") 20px 0px;
}
.sprite-0-2 {
  background: #cccccc url("my-sprite-img.png") 0px 60px;
}
.sprite-0-1 {
  background: #cccccc url("my-sprite-img.png") 0px 30px;
}
.sprite-0-0 {
  background: #cccccc url("my-sprite-img.png") 0px 0px;
}


Hier haben wir die Tatsache ausgenutzt, dass alle geeigneten Mixins aufgerufen werden. Dank dessen mussten wir den Aufruf des Klassengenerators in Kontrollstrukturen nicht duplizieren. Oh, großartig.
Sie werden wahrscheinlich sagen, dass dies eine Perversion ist. Ich denke, du wirst Recht haben. Trotzdem erhöht das Fehlen von Zyklen in der Sprache die Komplexität bei der Konstruktion solcher Konstruktionen etwas. Zum Glück werden sie nicht so oft benötigt.

Codeeingabe als Parameter


Als Parameter können Sie vollwertige Teile von less-Code übergeben, die sich logisch verhalten. Beispiele sind unser A und O: Zeigen ist einfacher als Erklären
.placeholder(@content) {
    &::-webkit-input-placeholder{
        @content();
    }
    &:-moz-placeholder {
        @content();
    }
    //Пожалуй, для демонстрации хватит
}
.withplaceholder{
    .placeholder({
         //Вау, мой редактор кода даже подсветит это правильно
         color:blue;
         font-style: italic;
   })
}


Mit einem Handgriff verwandelt sich in
.withplaceholder::-webkit-input-placeholder {
  color: blue;
  font-style: italic;
}
.withplaceholder:-moz-placeholder {
  color: blue;
  font-style: italic;
}


Darüber hinaus können Sie einen Aufruf anderer Mixins in den eingebetteten Code einfügen und alles wird funktionieren:
.topleft(@position){
    top:@position;
    left:@position/2;
}
.keyframes(@name,@rules) {
    //Можно я обойдусь без вендорных префиксов?
    @keyframes @name {
        @rules();
    };
}
.keyframes(down,{
    0% {
        .topleft(0);
    };
    100% {
        .topleft(80);
    };
});


Und am Ausgang
@keyframes down {
  0% {
    top: 0;
    left: 0;
  }
  100% {
    top: 80;
    left: 40;
  }
}

Wir haben das gesamte Keyframe-Paket mit einem einzigen Befehl erstellt (genauer gesagt, ich hätte es erstellt, wenn ich die Herstellerpräfixe aus Gründen der Kürze und Lesbarkeit nicht verpasst hätte) - perfekt.

Und noch eine gute Sache am Ende in diesem Abschnitt: Möchten Sie keine langen Medienabfragen schreiben? Ich verstehe dich: jedes Mal das gleiche. Lass es uns schneiden. Hier ist ein Code
@width_mobile: 320px;
@width_tablet: 640px;
.media_mobile(@rules) {
    @media screen and (max-width: @width_tablet) and (min-width: @width_mobile) {
        @rules();
    };
};
.class_parent{
    width:300px;
    .media_mobile({
        width:200px;
        .class_child{
            width:100px;
        }
    });
}


Wird so werden
.class_parent {
    width: 300px;
}
@media screen and (max-width: 640px) and (min-width: 320px) {
    .class_parent {
        width: 200px;
    }
    .class_parent .class_child {
        width: 100px;
    }
}

Schreiben Sie nicht jedes Mal eine lange Medienabfrage für Dampfmaschinen - ist das nicht der Traum eines adaptiven Layout-Designers?

Was kann als Ergebnis gesagt werden. LESS entwickelt sich sehr aktiv. Einige dieser Funktionen waren buchstäblich erst in Version 1.7 verfügbar, die erst vor sechs Monaten veröffentlicht wurde. Persönlich hat mir das einige Unannehmlichkeiten bereitet: Ich muss oft mit verschiedenen Arten von Animationen am Frontend arbeiten. Jetzt bin ich jedoch fast bereit, die Entwickler für diesen netten und freundlichen Präprozessor zu küssen, der leicht zu erlernen ist (es gab keine Probleme, selbst die unerfahrensten Entwickler auf ihn zu übertragen), der für alle (oder fast alle) Lebenssituationen leistungsfähig genug ist und was auch immer Wichtig ist, dass die Syntax bequem lesbar ist.

Ich hoffe, dieser Beitrag wirft in den Augen der Habrasociety ein wenig WENIGER auf. Vielen Dank für Ihre Aufmerksamkeit.

PS Wenn mir jemand sagen kann, wie ich das WENIGER-Highlight auf dem Hub machen kann, bin ich sehr dankbar.

Jetzt auch beliebt: