Accentsconagua
Share
In diesem Tutorial werde ich Ihnen zeigen, wie Sie CSS-Variablen mit Avocode 3 generieren. Wir verwenden ein Design, das aus einer Designanwendung wie Adobe XD oder Sketch importiert wurde.
Avocode 3 kann tatsächlich Variablen für Präprozessoren (Sass, LESS, Stylus usw.) generieren, aber der Einfachheit halber werden wir mit nativen CSS-Variablen arbeiten. Wir erstellen Variablen für die Farben, die Typografie und einige Layoutoptionen unseres Designs. Dies sind die Aspekte unseres Endprodukts, die wir wahrscheinlich manchmal ändern möchten (es wäre nicht sehr effizient, Variablen zu erstellen.) alles).
Dieses Video begleitet meinen neuen Kurs und das Design, das Sie im Video sehen, ist davon übernommen. Werfen Sie einen Blick, wenn Sie mehr über Avocode erfahren möchten:
Wenn Sie den Kurs mitverfolgt haben, haben Sie gesehen, dass wir eine ganze Reihe von Farbfeldern erstellt haben, um das Erstellen eines Farbschemas zu vereinfachen. Wir haben jedes je nach Verwendungszweck benannt.
Farbfelder im Avocode
Swatch-NameWenn unser Farbfeld ausgewählt ist, wird der tatsächliche Farbwert in den Eigenschaften angezeigt. In diesem Fall ist es # 8b959d, so hervorheben und kopieren.
Unter dem hervorgehobenen Wert sehen Sie die Variablen Fenster. Drücke den + Schaltfläche, um eine neue hinzuzufügen.
Fügen Sie im angezeigten Dialogfeld den Farbwert in das ein Ersetzter Text Feld. Dann in der Variablennamen Geben Sie in das Feld den Variablennamen ein, den Sie verwenden möchten. Jetzt werden alle Instanzen des im Design gefundenen Farbwerts durch die Variable ersetzt.
Sie werden feststellen, dass wir verwendet haben _Farbe am Ende unserer variablen Zeichenfolge. Dies ist hilfreich, wenn wir uns mit Code befassen, da wir einen Variablentyp von einem anderen unterscheiden können.
So werden Variablen angezeigt, sobald sie festgelegt wurden:
Dasselbe Verfahren gilt für andere Variablen. Wo wir im ersten Beispiel Hex-Werte für Farben verwendet haben, können Sie die Namen der Schriftfamilien sowie numerische Werte hinzufügen. Sie können alle auf dieselbe Weise durch CSS-Variablen ersetzt werden.
Sie können daher Variablen für die meisten Aspekte Ihres CSS verwenden. Größen, Medienanfragen, Maßeinheiten, es liegt an Ihnen! Schauen Sie sich das Video für weitere Erklärungen an.
Nun zu einem sehr wichtigen Teil von all dem: den CSS-Code zu exportieren, der unsere Variablen in den Browser übernimmt. Sobald alle Variablen bereit sind, in der Variablen Klicken Sie auf die Schaltfläche Import Export Taste.
Klicken Sie im angezeigten Dialogfeld auf die Schaltfläche Export Tab. Sie werden alle Variablen finden, die auf das Kopieren warten. Sie können die Variablen dann in ein Stylesheet einfügen. Stellen Sie jedoch sicher, dass Sie ein :Wurzel Element, um sie alle so zu verschachteln:
Wurzel / * Variablen gehen hier * /
Es könnte dann nützlich sein, die Variablen in diesem Stylesheet so anzuordnen, dass sie einfacher verwaltet werden können (Farben mit Farben, typografische Variablen untereinander usw.)..
So können Sie mit Avocode CSS-Variablen aus einem Design generieren! Dies ist viel schneller als das manuelle Codieren von CSS-Variablen. Es ist also eine sehr nützliche Funktion, die Sie sicher genießen werden.
