Wie fange ich mit Sass an?
Sass ist ein leistungsstarkes Tool, das viele Funktionen aus anderen Programmiersprachen in CSS integriert - wie Funktionen, Variablen und Schleifen - sowie eigene intuitive Funktionen wie Mixins, Nesting und Partials, um nur einige zu nennen.
In diesem Tutorial erstellen wir soziale Symbole mit Sass-Loops, Mixins und Funktionen. Wir werden auch die leistungsstarke Verschachtelung verwenden, die in Sass verfügbar ist.
Wir werden in Sass eine Liste erstellen, um unsere sozialen Symbole zu generieren, die zuerst aus dem Klassennamen, der Schriftreferenz und der Farbe bestehen - und später aus dem Tooltip.
Und wir werden Mixins verwenden, um wiederverwendbare Medienabfragen zu erstellen und eine Funktion zu erstellen, um einen Pixelwert in einen em-Wert umzuwandeln. Dazu erstellen wir auch eine Variable für unsere Basisschriftgröße.
Abhängig von Ihrem System und Ihren Anforderungen an Build-Tools gibt es eine Reihe von Möglichkeiten, Sass zu installieren und zu verwenden. Weitere Informationen finden Sie hier Hier - Wir werden jedoch CodePen verwenden, um unseren Sass in CSS zu kompilieren, um die Dinge so einfach wie möglich zu halten.
Um die Leistungsfähigkeit von Sass wirklich zu nutzen und sich nicht in ein Durcheinander von Spezifität und Komplexität zu verwickeln, ist ein solides Verständnis von CSS erforderlich. Die besondere Variante von Sass, die wir verwenden werden, ist SCSS (Sassy CSS), was bedeutet, dass wir weiterhin die geschweiften Klammern {} in unserem Sass-Code verwenden.
Holen Sie sich die Tutorial-Dateien
Um die Beispieldateien für dieses Tutorial herunterzuladen, gehen Sie zu FileSilo Wählen Sie neben dem Lernprogramm Free Stuff und Free Content aus. Hinweis: Erstmalige Benutzer müssen sich registrieren, um FileSilo verwenden zu können.
01. Richten Sie Ihr CodePen CSS ein
Das erste, was wir tun müssen, ist Erstellen Sie einen neuen Stift und ändern Sie einige der Standardeinstellungen für den CSS-Editor in CodePen. Wir werden den CSS-Präprozessor in SCSS ändern und Normalize und Autoprefixer aktivieren.
02. Schreiben Sie Code
Jetzt haben wir alles eingerichtet, um Code zu schreiben. Im HTML-Editor erstellen wir einen Container und eine Reihe von Elementen, die den Link und das Symbol für jedes unserer Symbole enthalten.
Die hier verwendeten Namen werden in unserer Sass-Liste als Referenz in CSS verwendet. Wir werden auch die BEM-Namenskonvention für unsere Klassennamen verwenden.
... 03. Grundstile festlegen
Wenn wir zum CSS-Editor übergehen, werden wir zunächst font-awesome einfügen, eine Variable für unsere Basisschriftgröße und einige grundlegende Stile für die Seite festlegen.
@import url(http://srt.lt/w8yT8); // Variables $base-font-size: 16px; // Basic Styling body { font-size: $base-font-size; ... }04. Erstellen Sie eine Grundfunktion
Als Nächstes erstellen wir eine Grundfunktion, um einen Pixelwert mithilfe unserer Variablen '$ base-font-size' in einen em-Wert umzuwandeln.
Funktionen in Sass werden mit '@function' erstellt, gefolgt vom Namen der Funktion und der Eingabe, die zur Ausführung der Funktion verwendet wird.
Dann verwenden wir innerhalb der Deklaration '@return', um den Wert bei Verwendung der Funktion auszugeben. Das '# {}', das die Berechnung umgibt, wird für verwendet Interpolation .
// Functions @function px-to-em($pixels) { @return #{$pixels/$base-font-size}em; }05. Mixins machen
Weiter mit unserem Setup erstellen wir Mixins für einfache Mobile-First-Medienabfragen mit unserer Funktion 'px-to-em', die wir in einem px-Wert übergeben, um einen em-Wert zurückzugeben.
Mixins werden mit '@mixin' erstellt, gefolgt von einem Namen für das Mixin. Dann verwenden wir in der Deklaration '@content', um den Code auszugeben, den wir in das Mixin eingefügt haben, wenn wir ihn später in unserer Codebasis aufrufen.
@mixin viewport--large { @media only screen and (min-width: px-to-em(1680px)) { @content; } } @mixin viewport--medium { @media only screen and (min-width: px-to-em(1080px)) { @content; } }06. Richten Sie eine Sass-Liste ein
Der letzte Schritt in unserem Setup ist das Erstellen einer Liste. Listen in Sass werden mithilfe einer Variablen erstellt. Danach ist die genaue Syntax ziemlich locker und akzeptiert eine Vielzahl von Möglichkeiten, es zu definieren .
Innerhalb der Variablen definieren wir den Klassennamen, den Unicode-Wert und die Farbe für jedes Symbol und trennen sie durch ein Komma in Klammern.
$icon-list: ( vimeo “f27d' #1ab7ea, twitter “f099' #1da1f2, ... github “f113' #333, rss “f09e' #f26522 );07. Zeigen Sie Ihre Symbole in einer Reihe an
Damit unsere sozialen Symbole in einer Reihe angezeigt werden, fügen wir jedem ihrer Container ein einfaches CSS hinzu.
.social__item { display: inline-block; margin-right: 0.05em; }08. Erstellen Sie einen gemeinsamen Symbolstil
Um die Menge an CSS, die wir ausgeben, zu minimieren, verwenden wir einen CSS3-Selektor, um alle Klassen zu finden, die mit 'icon' beginnen, und einen gemeinsamen Stil für sie zu erstellen.
[class^='icon'] { font-family: 'FontAwesome'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }09. Gestalten Sie die Hintergründe der Schaltflächen
Mit der gleichen Methode machen wir dasselbe für die Schaltflächen, die unsere Werte in 'em' definieren, damit wir sie später mithilfe des Containers in der Größe ändern können.
[class^='social__icon'] { font-size: 1em; width: 2em; height: 2em; background-color: #333; color: white; text-decoration: none; border-radius: 100%; text-align: center; display: flex; align-items: center; justify-content: center; }10. @each Schleife für unsere Symbole
Jetzt haben wir alle unsere Basisstile. Wir können unsere Liste verwenden, um das für jedes Symbol spezifische CSS zu generieren.
Um eine Schleife in Sass zu erstellen, verwenden wir '@each', gefolgt von Namen für jeden Wert jedes Elements - '$ icon', '$ unicode' und '$ icon-background' - gefolgt vom Wort 'in' und dem Namen der Liste.
Innerhalb der Schleife wenden wir den Wert '$ unicode' auf das Pseudoelement 'before' jedes Symbols an, das wir im HTML erstellt haben, sodass der zuvor erstellte gemeinsame Stil alle anderen benötigten Stile berücksichtigt.
@each $icon, $unicode, $icon-background in $icon-list { .icon--#{$icon} { &::before { content: $unicode; } } }11. @each Schleife für unsere Hintergrundfarben
Die Symbole funktionieren jetzt alle, aber wir haben immer noch die Fallback-Hintergrundfarbe. Wir werden unserer Liste weiteren Code hinzufügen, um dies zu beheben. Mit der gleichen Methode wie oben geben wir den Namen '$ icon' aus, diesmal jedoch in den Klassen 'social__icon' und darin die Farbe '$ icon-background'.
@each $icon, $unicode, $icon-background in $icon-list { ... .social__icon--#{$icon} { background-color: $icon-background; } }12. Verwenden Sie die Mixins
Mit den zuvor erstellten Mixins und da wir die Symbole mit 'em'-Werten gestaltet haben, können wir dem Container eine Schriftgröße zuweisen und diese mit unserem Medienabfrage-Mixin mit' @include 'und dem Namen des Mixins gefolgt von dem erhöhen Code, den wir in die Medienabfrage aufnehmen möchten.
.social__container { font-size: 1em; @include viewport--medium { font-size: 1.5em; } @include viewport--large { font-size: 2em; } }13. Fügen Sie Interaktionszustände und integrierte Funktionen hinzu
Wir können unseren Schaltflächen eine gewisse Interaktivität hinzufügen, indem wir die Hintergrundfarbe ändern, wenn mit der Schaltfläche entweder mit der Maus oder der Tastatur interagiert wird.
Sass hat eine Reihe von eingebaute Farbfunktionen So können wir die Hintergrundfarbe, die wir in unserer Liste festgelegt haben, mit Schwarz mischen, um die Schaltfläche abzudunkeln - wenn wir mit ihr interagieren.
icon--#{$icon} { background-color: $icon-background; &:hover, &:focus, &:active { background-color: mix(black, $icon-background, 15%); } }14. Wechseln Sie die Hintergrundfarbe
Wir können auch die Eigenschaft 'Übergang' in CSS verwenden, um die Unterschiede zwischen den Hintergrundfarben zu animieren. Wir könnten den 'all'-Wert verwenden, aber das ist sowohl in Bezug auf die Leistung teuer als auch würde es uns nicht ermöglichen, unterschiedliche Werte zu unterschiedlichen Zeitpunkten und Zeitsteuerungsfunktionen zu wechseln.
[class^='social__icon'] { ... transition: background-color 150ms ease-in-out ; }15. Fügen Sie weitere Übergangseffekte hinzu
Durch Hinzufügen einer 'relativen' Position zu den Schaltflächen und eines oberen Werts und Hinzufügen von 'top' zu unserer 'Übergang'-Eigenschaft können wir die Elemente für die weitere Interaktion vorbereiten.
[class^='social__icon'] { position: relative; top: 0; ... transition: background-color 150ms ease-in-out, top 250ms linear ; }16. Bewegen Sie die Tasten bei der Interaktion nach oben
Für diese Interaktion ist nichts Spezielles erforderlich, um sie zu erstellen. Daher können wir den Code der gemeinsam genutzten Klasse hinzufügen. Durch Anwenden eines negativen Spitzenwerts und Entfernen des Umrisses erhalten wir einen noch klareren visuellen Hinweis auf die Interaktion.
[class^='social__icon'] { ... &:hover, &:focus, &:active { outline: none; top: -0.25em; } }17. Fügen Sie einen Schlagschatten hinzu
Wir können dieselbe Methode auch verwenden, um einen 'Kastenschatten' zu erstellen und zu animieren, der der Interaktion etwas mehr Tiefe verleiht und gleichzeitig die vertikale Höhe des Schattens mit dem oberen Wert ändert.
box-shadow: 0 0 0.25em -0.25em rgba(0,0,0,0.2); &:hover, &:focus, &:active { ... box-shadow: 0 0.5em 0.25em -0.25em rgba(0,0,0,0.3); }18. Fügen Sie QuickInfos hinzu
Mit CSS können wir problemlos Tooltips hinzufügen, um unseren Benutzern mehr Klarheit zu verschaffen. Als erstes fügen wir den Tooltip-Wert zur Liste hinzu. Stellen Sie sicher, dass Sie sie in Anführungszeichen setzen, damit bei Bedarf Leerzeichen verwendet werden können.
$icon-list: ( vimeo “Vimeo' “f27d' #1ab7ea, twitter “Twitter' “f099' #1da1f2, ... github “GitHub' “f113' #333, rss “RSS' “f09e' #f26522, );19. Ändern Sie die @each-Schleife
Aufgrund der Hinzufügung zu unserer Liste müssen wir unsere '@each'-Schleife so ändern, dass sie den Tooltip-Wert (' $ name ') enthält. Wir können diesen Namen dann als Inhalt des 'before pseudo'-Elements auf unseren Schaltflächen ausgeben.
@each $icon, $name, $unicode, $icon-background in $icon-list { ... .social__icon--#{$icon} { ... &::before { content: '#{$name}'; } } }20. Gestalten Sie das vorherige Pseudoelement
Jetzt wird der Name jedes Elements auf dem Bildschirm angezeigt. Wir müssen das Element formatieren, eine Hintergrundfarbe hinzufügen, Polster und andere Stilelemente hinzufügen sowie das Element positionieren und für Übergänge vorbereiten und die Deckkraft und die oberen Werte bei der Interaktion ändern .
&::before { ... top: -3.5em; opacity: 0; transition: top 250ms linear, opacity 150ms linear 150ms; } &:hover, ... { ... &::before { opacity: 1; top: -2.5em; } }21. Gestalten Sie das After-Pseudo-Element
Wir werden verwenden CSS-Dreiecke Erstellen Sie den unteren Rand unserer QuickInfos, indem Sie das Element erneut positionieren, um es für Übergänge vorzubereiten, indem Sie die Deckkraft und die oberen Werte zu unterschiedlichen Zeitpunkten ändern.
Durch Hinzufügen einer Verzögerung erhalten wir eine Animation, die aus dem Einblenden und Herunterfahren des Tooltips besteht.
&::after { ... top: -1.9em; opacity: 0; transition: top 250ms linear, opacity 150ms linear 150ms; } &:hover, ... { ... &::after { opacity: 1; top: -0.9em; } }Die CodePen-Sammlung mit Tutorial-Schritten finden Sie hier Hier .
Dieser Artikel erschien ursprünglich in der Ausgabe 264 des Web Designer-Magazins. Kaufen Sie es hier .
Weiterlesen:
