Wie man mit Sass beginnt

Sass ist ein leistungsstarkes Werkzeug, das viele Funktionen aus anderen Programmiersprachen in CSS bringt - wie Funktionen, Variablen und Loops - sowie ihre eigenen intuitiven Merkmale wie Mixins, Nisten und Teilnehmungen, um einige zu nennen.

In diesem Tutorial erstellen wir soziale Symbole mit Sass Loops, Mixins und Funktionen. Wir verwenden auch das in Sass verfügbare leistungsstarke Verschachtelung.

• Was ist sass?

Wir erstellen eine Liste in SASS, um unsere sozialen Symbole zu generieren, die aus der Zuleitungsreferenz und der Farbe des Klassennamens, der Font- und Farbe erster Farbe bestehen, und später der Tooltip.

Wir verwenden Mixins, um wiederverwendbare Medienabfragen zu erstellen und eine Funktion zu erstellen, um einen Pixelwert in einen EM-Wert zu drehen. Dazu erstellen wir auch eine Variable für unsere Basisgröße.

Es gibt verschiedene Möglichkeiten, SASS installieren und verwenden, je nach Ihrem System und Ihren Build-Tooling-Anforderungen - weitere Details finden Sie gefunden Hier - Wir verwenden jedoch Codepen, um unser Sass in CSS zusammenzustellen, um die Dinge so einfach wie möglich zu halten.

Um die Macht der Sass wirklich zu nutzen und sich nicht in ein Durcheinander von Spezifität und Komplexität zu bringen, ist ein festes Verständnis von CSS erforderlich. Der besondere SASS-Geschmack, den wir verwenden werden, ist SCSS (SASSY CSS), dh wir werden immer noch die lockigen 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 Free Sachen und freien Inhalten neben dem Tutorial. HINWEIS: Erstes Benutzer müssen sich registrieren, um Dateisilo verwenden zu können.

01. Richten Sie Ihren 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 ändern den CSS-Präprozessor an SCSS und schalten Normalisierung und Autoprfixer ein.

02. Wenden Sie an, einen Code zu schreiben

Jetzt haben wir alles eingestellt, dass wir mit dem Schreiben eines Codes anfangen können. Innerhalb des HTML-Editors erstellen wir einen Container und eine Anzahl von Elementen, die den Link und das Symbol für jeden unserer Symbole enthalten.

Die hier verwendeten Namen werden in unserer SASS-Liste als Referenz in CSS verwendet. Wir verwenden auch die BEM-Namenskonvention für unsere Klassennamen.

 & lt; div class = "social__container" & gt;
  & lt; div class = "social__item" & gt;
  & lt; ein target = "_ leer" href = "..."
  Klasse = "Social__icon - Twitter" & gt;
  & lt; i Klasse = "Symbol - Twitter" & gt; & lt; / i & gt;
  & lt; / a & gt;
  & lt; / div & gt;
  ...
& lt; / div & gt; 

03. Set Basic Styles

Wenn Sie sich zum CSS-Editor bewegen, beginnen wir mit einschließlich font-ehrfürchtiger und setzt eine Variable für unsere Basisgröße und einige grundlegende Stile für die Seite.

 @Import-URL (http://srt.lt/w8yt8);
// Variablen
$ Basis-Schriftgröße: 16px;
// Basis-Styling.
Körper {
  Schriftgröße: $ Basis-Schriftgröße;
  ...
} 

04. Erstellen Sie eine grundlegende Funktion

Als Nächstes erstellen wir eine grundlegende Funktion, um einen Pixelwert auf einen EM-Wert unter Verwendung unserer Variablen "Base-Font-Font-Size-Größe" zu erstellen.

Funktionen in SASS werden mit '@function' erstellt, gefolgt von dem Namen der Funktion und der Eingabe, die zur Durchführung der Funktion verwendet wird.

In der Erklärung verwenden wir dann '@return', um den Wert bei Verwendung der Funktion auszugeben. Die "# {}", die die Berechnung umgibt, wird für verwendet Interpolation .

 // Funktionen
@function px-to-em ($ Pixel) {
@return # {$ pixel / $ base-font-font-size} em;
} 

05. Machen Sie Mixins.

Weiter mit unserem Setup erstellen wir Mixins für einfache Mobile-First Media-Abfragen mit unserer 'PX-TO-EM-Funktion, mit der wir einen PX-Wert übergeben, um einen EM-Wert zurückzugeben.

Mixine werden mit '@mixin' erstellt, gefolgt von einem Namen für das Mixin. In der Erklärung verwenden wir dann '@content', um den Code auszugeben, den wir in der Mixin, wenn sie später in unserem Codebase anrufen.

 @mixin Ansichtsfenster - groß {
  @Media nur Bildschirm und
  (min-width: px-to-em (1680px)) {
  @Inhalt;
}}
@mixin ViewPort - Medium {
  @Media nur Bildschirm und
  (Min-Breite: px-to-em (1080px)) {
  @Inhalt;
}} 

06. Richten Sie eine Sass-Liste ein

Der letzte Schritt in unserem Setup besteht darin, eine Liste zu erstellen. Listen in SASS werden mit einer Variablen erstellt. Danach ist die genaue Syntax ziemlich locker und akzeptiert eine Vielzahl von Möglichkeiten, es zu definieren .

In der Variablen definieren wir den Klassennamen, den Unicode-Wert und die Farbe für jedes Symbol und trennen sie mit einem Komma, in den 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 Zeile angezeigt werden können, fügen wir jedem ihrer Container einige einfache CSS hinzu.

 .Social__item {
  Anzeige: Inline-Block;
  Rand rechts: 0,05 Uhr;
} 

08. Erstellen Sie einen gemeinsamen Symbolstil

Um den von uns ausgegebenen CSS-Betrag zu minimieren, verwenden wir einen CSS3-Selektor, um alle Klassen zu finden, die mit 'Symbol' beginnen, und erstellen Sie einen gemeinsamen Stil für sie.

 [Klasse ^ = "Symbol"] {
  Schriftfamilie: 'fontawesome';
  sprechen: keine;
  Schriftart: Normal;
  Schriftgewicht: Normal;
  Font-Variante: Normal;
  Text-Transformation: Keine;
  Linienhöhe: 1;
  -webkit-font-glatting: antialiaed;
  -MOZ-OSX-Font-Smoothing: Graustufen; } 

09. Style Up-Button-Hintergründe

Mit derselben Methode machen wir dasselbe für die Tasten, die unsere Werte in 'em' definieren, wodurch sie später die Größe des Containers ändern können.

 [Klasse ^ = "Social__icon"] {
  Schriftgröße: 1EM; Breite: 2em; Höhe: 2em;
  Hintergrundfarbe: # 333;
  Farbe weiß;
  Textdekoration: Keine;
  Grenzradius: 100%;
  Text-ALIGN: CENTER;
  Anzeige: Flex;
  Ausrichten-Gegenstände: Zentrum;
  Rechtfertigungsinhalt: Center;
} 

10. @ asche-Loop für unsere Symbole

Jetzt haben wir alle unsere Basisstile, mit denen wir unsere Liste verwenden können, um die für jedes Symbol spezifische CSS zu generieren.

So erstellen Sie eine Schleife in SASS, verwenden wir '@ @ @ @', gefolgt von Namen für jeden Wert jedes Artikels - '$ icon', '$ Unicode' und '$ icon-background' - gefolgt von dem Wort 'in' und dann den Namen der Liste.

Innerhalb der Schleife wenden wir den Wert '$ UNICODE' 'Wert auf das "Bevor" -Pseudo-Element jedes Symbols, das wir in der HTML erstellt haben, und ermöglichen den gemeinsamen Stil, den wir früher erstellt haben, um sich um alle anderen erforderlichen Arten zu kümmern.

 @ asche $ icon, $ unicode, $ icon-background
in $ icon-list {
  .icon - # {$ icon} {
  & amp; :: Vor {
  Inhalt: $ Unicode;
  }
  }
} 

11. @ asche-Loop für unsere Hintergrundfarben

Die Symbole funktionieren jetzt alle, aber wir haben noch die Fallback-Hintergrundfarbe. Wir werden unserer Liste noch mehr Code hinzufügen, um das zu beheben. Mit der gleichen Methode wie oben geben wir den Namen '$ icon' 'Namen, diesmal jedoch auf den "Social-__icon-Klassen" und in der Farbe "Social__icon" und darin an der Farbe "$ icon-background".

 @ asche $ icon, $ unicode, $ icon-background
in $ icon-list {
  ...
  .Social__icon - # {$ icon} {
  Hintergrundfarbe: $ icon-background;
  }
} 

12. Verwenden Sie die Mixine

Verwenden der zuvor erstellten Mixins, und weil wir die Symbole mithilfe von 'EM' -werten gestaltet haben, können wir eine Schriftgröße in den Container anwenden und mithilfe unseres Medien-Query-Mixin mit '@include' und den Namen des Mixin, gefolgt von den Code, den wir in die Medienabfrage aufnehmen möchten.

 .Social__container {
  Schriftgröße: 1EM;
  @include-Ansichtsfenster - Medium {
  Schriftgröße: 1.5EM;
  }
  @include-Ansichtsfenster - groß {
  Schriftgröße: 2em;
  }} 

13. Interaktionszustände hinzufügen und eingebaute Funktionen

Wir können unsere Interaktivität zu unseren Tasten hinzufügen, indem wir die Hintergrundfarbe ändern, wenn die Taste mit der Maus oder der Tastatur miteinander interagiert wird.

Sass hat eine Anzahl von Eingebaute Farbfunktionen Erlaube uns, die Hintergrundfarbe mitzunehmen, die wir in unserer Liste eingesetzt haben, und mischen Sie es mit Schwarz, um den Knopf zu dunklerieren - wenn Sie mit interagiert werden.

 Symbol - # {$ icon} {
  Hintergrundfarbe: $ icon-background;
  & amp;: Hover,
  & amp;: Fokus,
  & amp;: aktiv {
  Hintergrundfarbe:
  Mix (schwarz, $ Icon-Hintergrund, 15%);
  }} 

14. Übergang 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 der Leistung teuer und würde es uns nicht erlauben, verschiedene Werte mit unterschiedlichen Timings und Timing-Funktionen zu übergeben.

 [Klasse ^ = "Social__icon"] {
  ...
  Übergang: Hintergrundfarbe
  150ms Easy-In-Out
  ;
} 

15. Fügen Sie weitere Übergangseffekte hinzu

Durch Hinzufügen einer "relativen" Positionierung an die Tasten und einen Top-Wert und das Hinzufügen von "Top" in unseren "Übergangseigenschaft" können wir die Elemente für eine weitere Interaktion bereiten.

 [Klasse ^ = "Social__icon"] {
  Position: relativ;
  oben: 0;
  ...
  Übergang: Hintergrundfarbe
   150ms einfacher,
    Top 250ms linear.
  ; } 

16. Bewegen Sie die Tasten auf der Interaktion

Für diese Interaktion gibt es nichts Besonderes, um es zu erstellen, um es zu erstellen, daher können wir den Code der gemeinsam genutzten Klasse hinzufügen. Durch Anwenden eines negativen oberen Werts und Entfernen des Gliederns haben wir ein noch klareres visuelles Interaktion.

 [Klasse ^ = "Social__icon"] {
  ...
  & amp;: Hover,
  & amp;: Fokus,
  & amp;: aktiv {
  Gliederung: Keine;
  oben: -0,25EM;
  }} 

17. Fügen Sie einen Tropfenschatten hinzu

Wir können auch dieselbe Methode verwenden, um einen "Kastenschatten" zu erstellen und zu animieren - das Hinzufügen von etwas mehr Tiefe zur Wechselwirkung - Ändern der vertikalen Höhe des Schattens gleichzeitig mit dem oberen Wert.

 Kastenschatten:
  0 0 0.25EM -0,25EM RGBA (0,0,0,0.2);
& amp;: Hover,
& amp;: Fokus,
& amp;: aktiv {
  ...
  Box Schatten:
  0 0.5EM 0.25EM -0,25EM RGBA (0,0,0,0.3);
} 

18. Fügen Sie Tooltips hinzu

Wir können mit CSS problemlos Tooltips hinzufügen, um unseren Benutzern eine weitere Klarheit hinzuzufügen. Das erste, was wir tun, ist, den Tooltip-Wert in der Liste hinzuzufügen. Vergewissern Sie sich, dass Sie sie in Zitate schreiben, um den Einsatz von Leerzeichen bei Bedarf zu ermöglichen.

 $ icon-list: (
  vimeo "vimeo" "\ f27d" # 1ab7ea,
  Twitter "Twitter" \ F099 "# 1DA1F2,
  ...
  Github "Github" "\ F113" # 333,
  RSS "RSS" "\ f09e" # F26522,
); 

19. Ändern Sie die @ asche-Loop

Aufgrund der Ergänzung unserer Liste müssen wir unsere '@ aeuch' -Runde ändern, um den Tooltip-Wert ("Name") aufzunehmen. Wir können diesen Namen dann als Inhalt des Elements 'vor Pseudo' auf unseren Schaltflächen ausgeben.

 @ asche $ icon, $ name, $ unicode,
  $ icon-background in $ icon-list {
  ...
  .Social__icon - # {$ icon} {
  ...
  & amp; :: Vor {
  Inhalt: '# {$ Name}';
  }
  }} 

20. Stil das vor Pseudo-Element

Jetzt haben wir den Namen jedes Elements, das auf dem Bildschirm angezeigt wird, den wir das Element stylen müssen, und fügt eine Hintergrundfarbe, eine Polsterung und andere Styling-Elemente hinzu - sowie das Positionieren des Elements und das Leiten des Elements und das Abstellen der Deckkraft und der oberen Werte bei der Interaktion .

 & amp; :: Vor {...
  oben: -3.5em;
  Deckkraft: 0;
  Überleitung:
  Top 250ms linear, Deckkraft 150ms linear 150ms;
}
& amp;: schweben, ... {...
  & amp; :: Vor {
  Deckkraft: 1;
  oben: -2.5em; }
} 

21. Stil das After Pseudo-Element

Wir werden verwenden CSS-Dreiecke. So erstellen Sie den unteren Rand unserer Tooltips - Positionieren Sie das Element erneut, um es für Übergänge zu lesen, indem Sie die Deckkraft und die oberen Werte zu verschiedenen Timings übergeben.

Durch das Hinzufügen einer Verzögerung erhalten wir eine Animation, die aus dem Tooltip besteht, der sich eintaucht und einrastet.

 & amp;: nach {...
  oben: -1.9em;
  Deckkraft: 0;
  Überleitung:
  Top 250ms linear, Deckkraft 150ms linear 150ms;
}
& amp;: schweben, ... {...
  & amp;: nach {
  Deckkraft: 1;
  oben: -0.9em; }
} 

Die Codepen-Sammlung von Tutorial-Schritten kann gefunden werden Hier .

Dieser Artikel erschien ursprünglich in der Webdesignermagazin-Ausgabe 264. Kaufen Sie es hier. .

Weiterlesen:

• Was ist sass?
• 8 CODEPEN-Funktionen, über die Sie nicht wussten
• 5 Tipps für superschnelle CSS