Aan de slag met Sass

Sassass Is een krachtige tool die veel functies van andere programmeertalen brengt naar CSS - zoals functies, variabelen en lussen - en haar eigen intuïtieve kenmerken brengen, zoals mixen, nestelen en gedeeltelijk om een ​​paar te noemen.

In deze tutorial maken we sociale pictogrammen met behulp van Sass-lussen, mixen en functies. We zullen ook het krachtige nestelen in Sass gebruiken.

• Wat is sass?

We maken een lijst in Sass om onze sociale pictogrammen te genereren, die uit de Classname, letternamen en kleur en kleur eerst zullen bestaan ​​- en later de tooltip.

En we zullen MIXINS gebruiken om herbruikbare media-query's te maken en een functie te maken om een ​​pixelwaarde in een EM-waarde te maken. Om dit te doen, maken we ook een variabele voor onze basislettergrootte.

Er zijn een aantal manieren om Sass te installeren en te gebruiken, afhankelijk van uw systeem en uw build-tooling-behoeften - Meer details zijn te vinden hier - We zullen echter COCEIPEN gebruiken om onze Sass in CSS te compileren om dingen zo eenvoudig mogelijk te houden.

Om de kracht van Sass echt te benutten en je niet in een puinhoop van specificiteit en complexiteit te halen, is een solide begrip van CSS vereist. De specifieke smaak van Sass die we gebruiken is SCSS (Sassy CSS), wat betekent dat we nog steeds de krullende haakjes {} in onze Sass-code gebruiken.

Download de tutorial-bestanden

Ga naar de voorbeeldbestanden voor deze tutorial, ga naar Filesilo , selecteer gratis spullen en gratis inhoud naast de tutorial. Opmerking: de gebruikers van de eerste keer moeten zich registreren om Filesilo te gebruiken.

01. Stel uw CODEPEN CSS in

Het eerste dat we moeten doen is Maak een nieuwe pen en verander een deel van de standaardinstellingen voor de CSS-editor in Codepen. We zullen de CSS-preprocessor in SCSS wijzigen en Normaliseren en Autoprefixer inschakelen.

02. Begin met het schrijven van een code

Nu hebben we alles ingeschakeld, we kunnen beginnen met het schrijven van een code. In de HTML-editor maken we een container en een aantal items binnen met de link en het pictogram voor elk van onze pictogrammen.

De hier gebruikte namen worden gebruikt in onze Sass-lijst als een referentie in CSS. We gebruiken ook het BEM-naamgevingsconventie voor onze klasnamen.

 & lt; div class = "Social__Container" & GT;
  & LT; DIV-klasse = "Social__item" & GT;
  & lt; een doelwit = "_ blanco" href = "..."
  Klasse = "Social__icon - Twitter" & GT;
  & LT; I Class = "Icon - Twitter" & GT; & LT; / I & GT;
  & LT; / A & GT;
  & LT; / DIV & GT;
  ​
& lt; / div & gt; 

03. Stel basisstijlen in

Ga naar de CSS-editor die we beginnen met het opnemen van font-awesome, een variabele instellen voor onze basislettergrootte en enkele basisstijlen voor de pagina.

 @Import URL (http://srt.lt/w8yt8);
// Variabelen
$ BASE-FONT-GROOTTE: 16PX;
// Basic Styling
lichaam {
  FONT-SIZE: $ BASE-FONT-SIZE;
  ​
} 

04. Maak een basisfunctie

Vervolgens maken we een basisfunctie om een ​​pixelwaarde te draaien op een EM-waarde met behulp van onze '$ base-font-size' variabele.

Functies in Sass worden gemaakt met '@function' gevolgd door de naam van de functie en de invoer die wordt gebruikt om de functie uit te voeren.

Dan in de verklaring gebruiken we '@return' om de waarde uit te voeren bij gebruik van de functie. De '# {}' rond de berekening wordt gebruikt voor interpolatie ​

 // functies
@functie px-to-em ($ pixels) {
@return # {$ pixels / $ base-font-size} em;
} 

05. MAAK MIXINS

Doorgaan met onze Setup maken we MIXINS voor eenvoudige e-mailadvertenties voor Mobile-First Media met behulp van onze 'PX-T-EM' -functie, die we een PX-waarde zullen passeren om een ​​EM-waarde te retourneren.

Mixins worden gemaakt met behulp van '@mixin' gevolgd door een naam voor het MIXIN. Dan in de verklaring gebruiken we '@content' om de code uit te voeren die we in het mixen plaatsen wanneer ze later in onze codebase bellen.

 @mixin viewport - groot {
  @media alleen scherm en
  (min-breedte: px-to-em (1680px)) {
  @inhoud;
​
@mixin viewport - medium {
  @media alleen scherm en
  (min-breedte: px-to-em (1080px)) {
  @inhoud;
}} 

06. Stel een Sass-lijst in

De laatste stap in onze setup is om een ​​lijst te maken. Lijsten in Sass worden gemaakt met behulp van een variabele; Daarna is de exacte syntaxis vrij los en accepteert een grote verscheidenheid aan manieren om het te definiëren ​

Binnen de variabele definiëren we de klasse naam, Unicode-waarde en kleur voor elk pictogram, scheiden ze met een komma, binnen haakjes.

 $ pictogramlijst: (
  Vimeo "\ F27D" # 1AB7EA,
  Twitter "\ F099" # 1da1f2,
  ​
  Github "\ F113" # 333,
  RSS "\ F09E" # f26522
); 

07. Toon uw pictogrammen op een rij

Om onze sociale iconen in de rij weer te geven, voegen we enkele eenvoudige CSS toe aan elk van hun containers.

 .Social__item {
  Display: Inline-Block;
  Margin-Right: 0.05em;
} 

08. Maak een gedeelde pictogramstijl

Om het bedrag van CSS te minimaliseren, gebruiken we een CSS3-selector om alle klassen te vinden die beginnen met 'pictogram' en een gedeelde stijl voor hen maken.

 [Klasse ^ = "Icon"] {
  Font-familie: 'Fontawesome';
  spreek: geen;
  Font-stijl: normaal;
  Font-gewicht: normaal;
  Font-variant: normaal;
  Tekst-transformatie: Geen;
  Lijnhoogte: 1;
  -Webkit-Font-Smoothing: Antialiased;
  -Moz-OSX-Font-Smoothing: Grayscale; } 

09. Stijl omhoog knopachtergronden

Met dezelfde methode doen we hetzelfde voor de knoppen die onze waarden in 'EM' definiëren, waardoor we later het formaat van de container kunnen wijzigen.

 [Klasse ^ = "Social__icon"] {
  FONT-SIZE: 1EM; Breedte: 2em; Hoogte: 2em;
  Achtergrondkleur: # 333;
  kleur wit;
  tekst-decoratie: geen;
  Border-Radius: 100%;
  Tekst-Uitlijnen: Centrum;
  Display: Flex;
  Align-items: Center;
  rechtvaardigen-inhoud: centrum;
} 

10. @Elke lus voor onze pictogrammen

Nu hebben we al onze basisstijlen die we onze lijst kunnen gebruiken om de CSS-specifieke op elk pictogram te genereren.

Om een ​​lus in Sass te maken, gebruiken we '@Elleach' gevolgd door namen voor elke waarde van elk item - '$ pictogram', '$ Unicode' en '$ icon-achtergrond' - gevolgd door het woord 'in' en dan de naam van de lijst.

Binnen de lus passen we de waarde '$ Unicode' toe aan de 'vóór' Pseudo-element van elk pictogram dat we in de HTML hebben gemaakt, waardoor de gedeelde stijl die we eerder hebben gemaakt voor alle andere stijlen die nodig zijn.

 @ @Eltreach $ pictogram, $ Unicode, $ pictogram-achtergrond
in $ icon-lijst {
  .icon - # {$ pictogram} {
  & Amp; :: vóór {
  Inhoud: $ Unicode;
  ​
  ​
} 

11. @Elke lus voor onze achtergrondkleuren

De pictogrammen werken nu allemaal, maar we hebben nog steeds de fallback achtergrondkleur. We voegen wat meer code toe aan onze lijst om dat te repareren. Met dezelfde methode als hierboven zullen we de naam '$ pictogram' uitvoeren, maar deze keer op de 'Social__icon'-klassen en binnenkant dat de kleur' ​​$ icon-achtergrond '.

 @ @Eltreach $ pictogram, $ Unicode, $ pictogram-achtergrond
in $ icon-lijst {
  ​
  .Social__icon - # {$ pictogram} {
  Achtergrondkleur: $ pictogram-achtergrond;
  ​
} 

12. Gebruik de mixen

Het gebruik van de mixins die we eerder hebben gemaakt en omdat we de pictogrammen met 'EM'-waarden met behulp van die we een lettergrootte kunnen toepassen op de container en het gebruiken met behulp van onze Media-query-mixen met' @include 'en de naam van de Mixin' en de naam van de Mixin 'en de naam van het Mixin' en de naam van het MIXIN, te vergroten. code We willen opnemen in de media-query.

 .Social__container {
  FONT-SIZE: 1EM;
  @include Viewport - Medium {
  FONT-SIZE: 1.5EM;
  ​
  @include viewport - groot {
  FONT-SIZE: 2EM;
  }} 

13. Voeg interacties toe en ingebouwde functies

We kunnen wat interactiviteit toevoegen aan onze knoppen door de achtergrondkleur te wijzigen wanneer de knop interactie is met het gebruik van de muis of het toetsenbord.

SASS heeft een aantal Ingebouwde kleurfuncties Door ons toe te staan ​​de achtergrondkleur te nemen die we in onze lijst hebben ingesteld en deze mixen met zwart om de knop donkerder te maken - wanneer interactie met zich mee.

 Pictogram - # {$ icon} {
  Achtergrondkleur: $ pictogram-achtergrond;
  & AMP;: Hover,
  & AMP;: Focus,
  & AMP;: Actief {
  Achtergrond kleur:
  mix (zwart, $ pictogram-achtergrond, 15%);
  }} 

14. Transitie van de achtergrondkleur

We kunnen ook gebruikmaken van de eigenschap 'Transitie' in CSS om de verschillen tussen de achtergrondkleuren te animeren. We kunnen de 'All' -waarde gebruiken, maar dat is zowel duur in termen van prestaties en zou we niet in staat stellen verschillende waarden over te zetten bij verschillende timings- en timingfuncties.

 [Klasse ^ = "Social__icon"]​
  ​
  Overgang: achtergrondkleur
  150ms gemak-in-out
  ​
} 

15. Voeg verdere overgangseffecten toe

Door een 'relatieve' positionering aan de knoppen en een topwaarde toe te voegen en 'TOP' toe te voegen aan onze eigenschap 'Transition', kunnen we de elementen voor verdere interactie boeken.

 [Klasse ^ = "Social__icon"] {
  Positie: familielid;
  Top: 0;
  ​
  Overgang: achtergrondkleur
   150ms gemak-in-out,
    Top 250ms lineair
  ​} 

16. Beweeg de knopen omhoog bij interactie

Voor deze interactie is er niets specifiek nodig om het te maken, daarom kunnen we de code toevoegen aan de gedeelde klasse. Door een negatieve topwaarde toe te passen en de omtrek te verwijderen, hebben we een nog duidelijkere visuele keu van interactie.

 [Klasse ^ = "Social__icon"] {
  ​
  & AMP;: Hover,
  & AMP;: Focus,
  & AMP;: Actief {
  Overzicht: geen;
  TOP: -0.25EM;
  }} 

17. Voeg een druppelschaduw toe

We kunnen ook dezelfde methode gebruiken om een ​​'box-shadow' te maken en te animeren - een beetje meer diepte toevoegen aan de interactie - het veranderen van de verticale hoogte van de schaduw tegelijkertijd als de topwaarde.

 Box-shadow:
  0 0 0.25EM -0.25EM RGBA (0,0,0,0.2);
& AMP;: Hover,
& AMP;: Focus,
& AMP;: Actief {
  ​
  Box-shadow:
  0 0,5 MEM 0,25 ME -0.25EM RGBA (0,0,0,0.3);
} 

18. TOEKENNINGEN TOEKENNEN

We kunnen eenvoudig tooltips toevoegen met CSS om verdere duidelijkheid voor onze gebruikers toe te voegen. Het eerste wat we doen is de tooltip-waarde toevoegen aan de lijst. Zorg ervoor dat u ze in offertes schrijft om het gebruik van spaties indien nodig mogelijk te maken.

 $ pictogramlijst: (
  Vimeo "Vimeo" "\ F27D" # 1AB7EA,
  Twitter "Twitter" "\ F099" # 1da1f2,
  ​
  Github "Github" "\ F113" # 333,
  RSS "RSS" "\ F09E" # F26522,
); 

19. Wijzig de @each-lus

Vanwege de toevoeging aan onze lijst moeten we onze '@ @each'-lus wijzigen om de tooltip-waarde (' $ naam ') op te nemen. We kunnen vervolgens die naam uitvoeren als de inhoud van het element 'vóór pseudo' op onze knoppen.

 @ @Eltach $ pictogram, $ naam, $ Unicode,
  $ pictogram-achtergrond in $ icon-lijst {
  ​
  .Social__icon - # {$ pictogram} {
  ​
  & Amp; :: vóór {
  Inhoud: '# {$ naam}';
  ​
  }} 

20. Stijl het voor pseudo-element

Nu hebben we de naam van elk element dat op het scherm wordt weergegeven dat we nodig hebben om het element te stylen, een achtergrondkleur, opvulling en andere stylingelementen toe te voegen - evenals het positioneren van het element en klaar voor overgangen en het wijzigen van de dekking van de dekking en de topwaarden bij interactie .

 & amp; :: vóór {...
  Top: -3.5em;
  Dekking: 0;
  overgang:
  Top 250 ms lineaire, dekking 150ms lineaire 150ms;
​
& AMP;: Hover, ... {...
  & Amp; :: vóór {
  Dekking: 1;
  Top: -2.5em;​
} 

21. Stijl het na pseudo-element

We zullen gebruiken CSS-driehoeken Om de onderkant van onze tooltips te maken - opnieuw positioneren van het element dat er klaar is voor overgangen - door de dekking en topwaarden op verschillende timings te overgaan.

Door een vertraging toe te voegen krijgen we een animatie die bestaat uit de tooltip die vervagen in en naar beneden bewegen.

 & amp; :: Na {...
  Top: -1.9em;
  Dekking: 0;
  overgang:
  Top 250 ms lineaire, dekking 150ms lineaire 150ms;
​
& AMP;: Hover, ... {...
  & Amp; :: na {
  Dekking: 1;
  Top: -0.9em;​
} 

De codepencollectie van tutorial-stappen is te vinden hier ​

Dit artikel verscheen oorspronkelijk in Web Designer Magazine Issue 264. Koop het hier ​

Lees verder:

• Wat is sass?
• 8 COCEPEN-functies die u niet wist
• 5 tips voor supersnelle CSS