CSS-Pr\u00e4prozessoren sind Skriptsprachen, die die Standardfunktionen von CSS erweitern. Sie erm\u00f6glichen es uns, Logik in unserem CSS-Code zu verwenden, z. B. Variablen, Verschachtelung, Vererbung, Mixins, Funktionen und mathematische Operationen. CSS-Pr\u00e4prozessoren machen es einfach, sich wiederholende Aufgaben zu automatisieren, die Anzahl der Fehler und den aufgebl\u00e4hten Code zu reduzieren, wiederverwendbare Codeschnipsel zu erstellen und Abw\u00e4rtskompatibilit\u00e4t zu gew\u00e4hrleisten. <\/p>\n
Jeder CSS-Pr\u00e4prozessor hat seine eigene Syntax, die er in regul\u00e4res CSS kompiliert, damit die Browser es auf der Client-Seite rendern k\u00f6nnen. Die drei popul\u00e4rsten und stabilsten CSS-Pr\u00e4prozessoren sind derzeit LESS, Sass und Stylus, aber es gibt auch noch viele kleinere. Alle CSS-Pr\u00e4prozessoren tun \u00e4hnliche Dinge, aber auf unterschiedliche Weise und mit eigenen Syntaxen. Jeder von ihnen verf\u00fcgt \u00fcber einige fortgeschrittene Funktionen, die ihm eigen sind, sowie \u00fcber ein eigenes \u00d6kosystem (Tools, Frameworks, Bibliotheken). <\/p>\n
Heute geht es um WENIGER<\/strong>.<\/p>\n 1. @Variablen<\/strong><\/p>\n Variablen erleichtern die Pflege Ihres Codes, da Sie diese Werte von einer einzigen Stelle aus steuern k\u00f6nnen:<\/p>\n 1.1 @verschachtelte Selektoren<\/strong><\/p>\n Ergebnis nach dem Kompilieren:<\/p>\n 2. @Importe<\/strong><\/p>\n CSS @import stellt eine weitere http-Anfrage, um ein anderes Stylesheet abzurufen, w\u00e4hrend Less @import den Inhalt aus Ihrer importierten Datei abgreift und in das kompilierte Stylesheet einf\u00fcgt. Das bedeutet nur eine http-Anfrage, so dass Sie Teilbereiche erstellen und Ihr CSS ein wenig besser organisieren k\u00f6nnen, ohne dass dies Nachteile mit sich bringt! <\/p>\n Bei einem normalen Import wird der Inhalt dieser Datei in die entsprechende Datei kopiert. Super n\u00fctzlich. Die Verkettung von Dateien ist eine \u00e4u\u00dferst wichtige Funktion von Pr\u00e4prozessoren. <\/p>\n Ein (Referenz-)Import tut das nicht. Tats\u00e4chlich wird \u00fcberhaupt nichts in die Datei eingef\u00fcgt, die darum bittet. Der Code in dieser Datei ist erst jetzt einsatzbereit, entweder durch den Aufruf eines Mixins in der Datei oder durch die Erweiterung eines Selektors in der Datei. <\/p>\n 3. @mixins<\/strong><\/p>\n Mixins kopieren alle Eigenschaften in einen Selektor, was zu unn\u00f6tiger Duplizierung f\u00fchren kann. Daher k\u00f6nnen Sie anstelle von Mixins Erweiterungen verwenden, um den Selektor bis zu den Eigenschaften zu verschieben, die Sie verwenden m\u00f6chten, wodurch weniger CSS erzeugt wird. <\/p>\n Ergebnis nach dem Kompilieren:<\/p>\n 4. @erweitern<\/strong><\/p>\n Extend ist eine Pseudoklasse von Less, die den Selektor, auf den sie gesetzt wird, mit anderen Selektoren zusammenf\u00fchrt, die zu dem passen, auf den sie verweist.<\/p>\n Ergebnis nach dem Kompilieren:<\/p>\n 5. @math<\/strong><\/p>\n Zu den mathematischen Funktionen geh\u00f6ren Methoden, die f\u00fcr die Durchf\u00fchrung numerischer Operationen wie Runden, Quadratwurzel, Potenzwert, Modulus, Prozentsatz usw. verwendet werden.<\/p>\n Ergebnis nach dem Kompilieren:<\/p>\n 6. @Schleifen<\/strong><\/p>\n Eines der besten Dinge an LESS ist, dass Sie Schleifen ausf\u00fchren und Klassen dynamisch erstellen k\u00f6nnen.<\/p>\n Das folgende Beispiel zeigt, wie man dynamisch Klassen in 10er-Schritten erstellt. Ich h\u00e4tte auch 10 Klassen schreiben k\u00f6nnen, aber dieser Weg ist viel sch\u00f6ner und einfacher zu pflegen. <\/p>\n Ergebnis nach dem Kompilieren:<\/p>\n\/\/ Variables\n@link-color: #428bca; \/\/ sea blue\n@link-color-hover: darken(@link-color, 10%);\n\n\/\/ Usage\na,\n.link {\n color: @link-color;\n}\na:hover {\n color: @link-color-hover;\n}\n.widget {\n color: #fff;\n background: @link-color;\n}\n<\/pre>\n.button {\n &-ok {\n background-image: url(\"ok.png\");\n }\n &-cancel {\n background-image: url(\"cancel.png\");\n }\n\n &-custom {\n background-image: url(\"custom.png\");\n }\n}\n<\/pre>\n.button-ok {\n background-image: url(\"ok.png\");\n}\n.button-cancel {\n background-image: url(\"cancel.png\");\n}\n.button-custom {\n background-image: url(\"custom.png\");\n}\n<\/pre>\n\/* Normal import *\/\n@import \"colors-or-whatever.less\";\n<\/pre>\n
@import (reference) \"https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/18728\/pure.less\";\n\n.my-button {\n &:extend(.pure-button all);\n}\n<\/pre>\n.a, #b {\n color: red;\n}\n.mixin-class {\n .a();\n}\n.mixin-id {\n #b();\n}\n<\/pre>\n.a, #b {\n color: red;\n}\n.mixin-class {\n color: red;\n}\n.mixin-id {\n color: red;\n}\n<\/pre>\nnav ul {\n &:extend(.inline);\n background: blue;\n}\n.inline {\n color: red;\n}\n<\/pre>\nnav ul {\n background: blue;\n}\n.inline,\nnav ul {\n color: red;\n}\n<\/pre>\n@nav-height: 60px;\n\nbody {\n\tpadding-top: @nav-height + 40px;\n}\n\n.nav {\n\tposition: fixed;\n\ttop: 0;\n\twidth: 100%;\n\theight: @nav-height;\n\n}\n\n.one-third { \n\twidth: (100% \/ 3); \n}\n<\/pre>\nbody {\n padding-top: 100px;\n}\n.nav {\n position: fixed;\n top: 0;\n width: 100%;\n height: 60px;\n}\n.one-third {\n width: 33.33333333%;\n}\n<\/pre>\n.mixin-loop (@index) when (@index > 0) {\n .per-@{index}0 {\n display: inline-block;\n width: @index * 10%;\n }\n .mixin-loop(@index - 1);\n}\n.mixin-loop(10);\n<\/pre>\n.per-100 {\n display: inline-block;\n width: 100%;\n}\n.per-90 {\n display: inline-block;\n width: 90%;\n}\n.per-80 {\n display: inline-block;\n width: 80%;\n}\n.per-70 {\n display: inline-block;\n width: 70%;\n}\n.per-60 {\n display: inline-block;\n width: 60%;\n}\n.per-50 {\n display: inline-block;\n width: 50%;\n}\n.per-40 {\n display: inline-block;\n width: 40%;\n}\n.per-30 {\n display: inline-block;\n width: 30%;\n}\n.per-20 {\n display: inline-block;\n width: 20%;\n}\n.per-10 {\n display: inline-block;\n width: 10%;\n}\n<\/pre>\n