Share
Sie kennen die Übung recht gut. Möchten Sie einen Teil Ihrer Website mit CSS3 abgerundete Ecken geben? Dann benötigen Sie nur drei Herstellerpräfixe: Webkit, Moz und das von W3C empfohlene Formular. Ist das nicht eine riesige Zeitverschwendung - ganz zu schweigen vom Bildschirmplatz? Was wäre, wenn wir stattdessen eine verwenden könnten Klasse Datei? Nun können wir! Ich zeige dir wie heute.
Wenn wir ein Werkzeug wie LESS oder SASS verwenden, können wir unser eigenes Werkzeug erstellen Klasse Dateien ganz leicht. Hast du keine Ahnung, wovon ich rede? Nun, zuerst diesen schnellen Tipp. Es wird Ihnen genau beibringen, wie Sie mit Less loslegen können.
Als Nächstes müssen wir eine Kernklassendatei erstellen, die in jedem Projekt verwendet wird. Fühlen Sie sich frei, diese Datei an einem beliebigen Ort zu speichern. Im obigen Video verwende ich jedoch unsere beliebte (und exklusive) Structurer-App.
Wir werden den ersten gemeinsam machen, aber schauen Sie sich den Screencast für weitere Details an.
.border-radius (@radius: 3px) -webkit-border-radius: @radius; -moz-border-radius: @radius; Grenzradius: @radius;
In Bezug auf Namenskonventionen habe ich festgestellt, dass es am klügsten ist, den offiziell empfohlenen Namen für den Klassennamen zu verwenden. In diesem Fall "Grenzradius.Msgstr "Um Variablen mit Less zu deklarieren, geben wir ihnen ein @ Symbol. In diesem Fall setzen wir einen Standardwert von 3px, Sollten wir diesen Wert in unserem Projekt jedoch überschreiben müssen, ist dies ein Kinderspiel!
#someElement .border-radius (10px);
Spülen Sie an dieser Stelle einfach ab und wiederholen Sie sie für jede Eigenschaft, für die mehrere Herstellerpräfixe erforderlich sind. Hier ist eine Handvoll für den Einstieg:
.Box-Schatten (@x: 2px, @y: 2px, @ Unschärfe: 5px, @Straße: 0, @farbe: rgba (0,0,0, .6)) -webkit-box-shadow: @x @ y @blur @spread @color; -moz-box-shadow: @x @y @blur @spread @color; Box-Schatten: @x @y @blur @spread @color;
.Übergang (@what: all, @length: 1s, @easing: leichtes Herausnehmen) -webkit-transition: @what @length @easing; -moz-transition: @what @length @easing; -o-Übergang: @what @length @easing; Übergang: @what @length @easing;
.Box (@orient: horizontal, @pack: center, @align: center) Anzeige: -webkit-box; Anzeige: -Moz-Box; Vitrine; -webkit-box-orient: @orient; -moz-box-orient: @orient; Kastenorientiert: @orient; -webkit-box-pack: @pack; -moz-box-pack: @pack; Packung: @pack; -webkit-box-align: @align; -moz-box-align: @align; Box-Align: @align;
.flex (@val: 1) -webkit-box-flex: @val; -Moz-Box-Flex: @val; Box-Flex: @val;
Ich würde gerne Ihre Gedanken dazu hören. Wenn dir die Idee gefällt, lass uns dieses Stylesheet mit Turbo laden.
Accentsconagua