Schneller Tipp Sie müssen LESS.js ausprobieren

Möglicherweise kennen Sie solche Dienste wie LESS und Sass. Sie bieten weitaus mehr Flexibilität beim Erstellen von Stylesheets, einschließlich der Verwendung von Variablen, Operatoren, Mix-Ins und sogar verschachtelten Selektoren. Da LESS jedoch ursprünglich mit Ruby erstellt wurde, haben es viele PHP-Entwickler nie verwendet, obwohl PHP-Versionen verfügbar sind.


Full Screencast



Schritt 1. Verweisen Sie auf LESS.js

 

Schritt 2. Importieren Sie ein Stylesheet

 

Beachten Sie, dass wir das festgelegt haben rel Attribut zu "Stylesheet / less" und dass unsere aktuellen Stylesheets eine Erweiterung von .Weniger, nicht .css. Außerdem müssen wir auf dieses Stylesheet verlinken Vor Less.js.


Schritt 3. Viel Spaß!

Mit diesem minimalen Arbeitsaufwand haben Sie jetzt Zugriff auf alles, von Variablen bis hin zu Mix-Ins. Schauen Sie sich das vierminütige Video-Tutorial oben an, um vollständige Beispiele zu erhalten. Nachfolgend finden Sie einige Quickies.

 / * Variablen! * / @primary_color: grün; / * Mix-Ins sind Funktionen für häufig verwendete Vorgänge, z. B. das Anwenden von Rändern. Wir erstellen Variablen, indem Sie das @ -Symbol voranstellen. * / .rund (@radius: 5px) -moz-border-radius: @radius; -webkit-border-radius: @radius; Grenzradius: @radius;  #container / * Verweist auf die oben erstellte Variable. * / background: @primary_color; / * Ruft das von uns erstellte .rounded Mix-In (Funktion) auf und überschreibt den Standardwert. * / .rund (20px); / * Verschachtelte Selektoren erben auch den Selektor des übergeordneten Elements. Dies ermöglicht einen kürzeren Code. * / a Farbe: Rot; 

Es ist wichtig zu wissen, dass LESS.js noch nicht fertig ist. hoffentlich wird es bald sein. Trotzdem funktioniert es bisher wunderbar. Was denkst du?