Hur man börjar med Sass

Sass är ett kraftfullt verktyg som ger många funktioner från andra programmeringsspråk till CSS - som funktioner, variabler och slingor - samt att föra egna intuitiva funktioner som mixins, nestning och partialer för att nämna några.

I den här handledningen skapar vi sociala ikoner med Sass Loops, Mixins och Functions. Vi använder också den kraftfulla näsan som finns i Sass.

• Vad är sass?

Vi skapar en lista i Sass för att generera våra sociala ikoner, som kommer att bestå av klassnamn, teckensnittreferens och färg först - och senare verktyget.

Och vi använder mixins för att skapa återanvändbara medifrågor och skapa en funktion för att göra ett pixelvärde till ett EM-värde. För att göra detta ska vi också skapa en variabel för vår basfontstorlek.

Det finns ett antal sätt att installera och använda SASS beroende på ditt system och dina byggverktygsbehov - Mer detaljer kan hittas här - Men vi använder CODEPEN för att sammanställa vår sass i CSS för att hålla saker så enkelt som möjligt.

Att verkligen utnyttja makten i Sass och inte få dig till en särdrag av specificitet och komplexitet krävs en solid förståelse av CSS. Den speciella smaken av Sass Vi använder är SCSS (Sassy CSS), vilket innebär att vi fortfarande använder de lockiga fästena {} i vår SASS-kod.

Få handledningsfilerna

För att ladda ner exempelfilerna för den här handledningen, gå till Filerilo , välj Gratis grejer och gratis innehåll bredvid handledningen. Obs! Första gången användare måste registrera sig för att använda Filsilo.

01. Ställ in din Codepen CSS

Det första vi behöver göra är Skapa en ny penna och ändra några av standardinställningarna för CSS-redigeraren i CodePen. Vi ändrar CSS-preprocessorn till SCS och aktiverar normalisera och autoprefixer.

02. Börja skriva lite kod

Nu har vi satt upp allting vi kan börja skriva lite kod. Inne i HTML-editor skapar vi en behållare och ett antal objekt inuti länken och ikonen för var och en av våra ikoner.

Namnen som används här kommer att användas i vår sasslista som referens i CSS. Vi använder också BEM-namngivningskonventionen för våra klassnamn.

 & lt; Div Class = "Social__Container" & GT;
  & lt; div class = "social__item" & gt;
  & lt; ett mål = "_ blank" href = "..."
  klass = "Social__icon - Twitter" & GT;
  & lt; i klass = "ikon - twitter" & gt; & lt; / i & gt;
  & lt; / a & gt;
  & lt; / div & gt;
  ...
& lt; / div & gt; 

03. Ange grundläggande stilar

Flytta över till CSS-redigeraren börjar vi med att inkludera font-awesome, sätter en variabel för vår basstorlek och några grundläggande stilar för sidan.

 @import URL (http://srt.lt/w8yt8);
// variabler
$ BASE-FONT-STORLEK: 16PX;
// grundläggande styling
kropp {
  FONT-STORLEK: $ BASE-FONT-STORLEK;
  ...
} 

04. Skapa en grundläggande funktion

Därefter skapar vi en grundläggande funktion för att vända ett pixelvärde till ett EM-värde med hjälp av vår variabel av "$ Base-Font-size.

Funktioner i SASS skapas med hjälp av "@funktion" följt av namnet på funktionen och den ingång som används för att utföra funktionen.

Sedan i deklarationen använder vi '@return' för att mata ut värdet när du använder funktionen. "# {}" Som omger beräkningen används för interpolation .

 // funktioner
@Function px-to-em ($ pixlar) {
@return # {$ pixlar / $ bas-font-size} em;
} 

05. Gör mixins

Fortsätter med vår inställning skapar vi Mixins för enkla mobila mediefränningar med vår "PX-to-EM" -funktion, som vi kommer att passera i ett PX-värde för att returnera ett EM-värde.

Mixins skapas med hjälp av "@mixin" följt av ett namn för mixin. Sedan i deklarationen använder vi '@Content' för att mata ut koden som vi sätter in i mixin när vi ringer den senare i vår kodbase.

 @mixin viewport - stor {
  @media bara skärm och
  (Minbredd: px-till-em (1680px)) {
  @innehåll;
}}
@mixin viewport - medium {
  @media bara skärm och
  (Minbredd: px-till-em (1080px)) {
  @innehåll;
}} 

06. Ställ in en sasslista

Det sista steget i vår installation är att skapa en lista. Listor i SASS skapas med hjälp av en variabel; Därefter är den exakta syntaxen ganska lös och accepterar ett brett utbud av sätt att definiera det .

Inne i variabeln definierar vi klassnamnet, Unicode-värdet och färg för varje ikon, som skiljer dem med ett komma, inom parentes.

 $ ikon-lista: (
  Vimeo "\ f27d" # 1ab7ea,
  Twitter "\ F099" # 1DA1F2,
  ...
  GitHub "\ f113" # 333,
  RSS "\ F09E" # F26522
); 

07. Visa dina ikoner i rad

För att våra sociala ikoner ska visas i rad lägger vi till några enkla CSS till var och en av sina behållare.

 .Social__item {
  Visa: Inline-block;
  marginal-höger: 0,05
} 

08. Skapa en delad ikonstil

För att minimera mängden CSS utmatar vi oss med en CSS3-väljare för att hitta alla klasser som börjar med "ikon" och skapa en gemensam stil för dem.

 [klass ^ = "ikon"] {
  Font-familj: "Fontawesome";
  Tala: ingen;
  Typsnitt: Normal;
  FONT-VIKT: Normal;
  Font-variant: Normal;
  Text-transform: Ingen;
  linjehöjd: 1;
  -WebKit-font-utjämning: Antioriased;
  -Moz-OSX-font-utjämning: gråskala; } 

09. Style Up Button Bakgrunder

Med samma metod gör vi detsamma för knapparna som definierar våra värden i dem, vilket gör att vi senare kan ändra storlek på att använda behållaren.

 [klass ^ = "social__icon"] {
  FONT-STORLEK: 1EM; Bredd: 2em; Höjd: 2EM;
  Bakgrundsfärg: # 333;
  färg vit;
  Textdekoration: Ingen;
  Border-Radius: 100%;
  Text-Justera: Center;
  Visa: Flex;
  Justera: Center;
  rättfärdiga innehåll: centrum;
} 

10. @each slinga för våra ikoner

Nu har vi alla våra basstilar Vi kan använda vår lista för att generera CSS-specifika för varje ikon.

För att skapa en slinga i Sass använder vi '@each' följt av namn för varje värde av varje objekt - '$ ikon', '$ unicode' och '$ ikon-bakgrunden' - följt av ordet "i" och sedan namnet av listan.

Inuti slingan tillämpar vi "$ unicode" -värdet till "Innan" pseudo-elementet i varje ikon som vi har skapat i HTML, vilket möjliggör den delade stilen vi skapade tidigare för att ta hand om alla andra stilar som behövs.

 @each $ ikon, $ unicode, $ ikon-bakgrund
i $ icon-list {
  .icon - # {$ ikon} {
  & amp; :: före {
  Innehåll: $ unicode;
  }
  }
} 

11. @each slinga för våra bakgrundsfärger

Ikonerna arbetar nu, men vi har fortfarande fallbackbakgrundsfärgen. Vi lägger till lite mer kod till vår lista för att fixa det. Med samma metod som ovan kommer vi att mata ut "$ ikon" -namnet men den här gången på "Social__icon" -klasserna och inuti den "$ ikon-bakgrunden" -färgen.

 @each $ ikon, $ unicode, $ ikon-bakgrund
i $ icon-list {
  ...
  .Social__icon - # {$ ikon} {
  Bakgrundsfärg: $ ikon-bakgrund;
  }
} 

12. Använd mixerna

Med hjälp av de mixins som vi skapade tidigare och för att vi stylade ikonerna med hjälp av "EM" -värden kan vi tillämpa en typsnitt i behållaren och öka den med hjälp av vår media-query mixin med hjälp av "@include" och namnet på mixin följt av Kod vi vill inkludera i media-frågan.

 .Social__Container {
  FONT-STORLEK: 1EM;
  @include viewport - medium {
  FONT-STORLEK: 1.5EM;
  }
  @include viewport - stor {
  FONT-STORLEK: 2EM;
  }} 

13. Lägg till interaktionsstater och inbyggda funktioner

Vi kan lägga till lite interaktivitet för våra knappar genom att ändra bakgrundsfärgen när knappen interageras med antingen med musen eller tangentbordet.

Sass har ett antal Inbyggda färgfunktioner Låter oss ta bakgrundsfärgen som vi har satt i vår lista och blanda den med svart för att mörka knappen - när den interageras med.

 ikon - # {$ ikon} {
  Bakgrundsfärg: $ ikon-bakgrund;
  & amp;: Hover,
  & amp;: Fokus,
  & amp;: Aktiv {
  bakgrundsfärg:
  Blanda (svart, $ ikon-bakgrund, 15%);
  }} 

14. Övergång bakgrundsfärgen

Vi kan också utnyttja egenskapen "Övergång" i CSS för att animera skillnaderna mellan bakgrundsfärgerna. Vi kunde använda "All" -värdet men det är både dyrt när det gäller prestanda och inte skulle tillåta oss att övergå olika värden på olika tidpunkter och tidsfunktioner.

 [klass ^ = "Social__icon"]{
  ...
  Övergång: Bakgrundsfärg
  150ms lätta in-out
  ;
} 

15. Lägg till ytterligare övergångseffekter

Genom att lägga till en "relativ" positionering till knapparna och ett toppvärde och lägga till "top" till vår "övergångs" -egenskaper kan vi klara elementen för vidare interaktion.

 [klass ^ = "social__icon"] {
  position: släkting;
  Topp: 0;
  ...
  Övergång: Bakgrundsfärg
   150ms lätta in-out,
    Topp 250ms linjära
  ; } 

16. Flytta knapparna upp vid interaktion

För denna interaktion är det inget som behövs för att skapa det därför kan vi lägga till koden till den delade klassen. Genom att tillämpa ett negativt toppvärde och ta bort konturen har vi en jämnare visuell cue av interaktion.

 [klass ^ = "social__icon"] {
  ...
  & amp;: Hover,
  & amp;: Fokus,
  & amp;: Aktiv {
  Översikt: Ingen;
  Topp: -0.25EM;
  }} 

17. Lägg till en droppe skugga

Vi kan också använda samma metod för att skapa och animera en "box-shadow" - lägga till lite djupare för interaktionen - byta den vertikala höjden på skuggan samtidigt som det översta värdet.

 Box-Shadow:
  0 0 0,25EM -0,25EM RGBA (0,0,0,0,2);
& amp;: Hover,
& amp;: Fokus,
& amp;: Aktiv {
  ...
  Box-Shadow:
  0 0,5EM 0,25EM -0,25EM RGBA (0,0,0,0,3);
} 

18. Lägg till verktygstips

Vi kan enkelt lägga till verktygstips med CSS för att lägga till ytterligare klarhet för våra användare. Det första vi gör är att lägga till verktygstoppvärdet till listan. Var noga med att skriva dem i citat för att möjliggöra användningen av utrymmen om det behövs.

 $ ikon-lista: (
  Vimeo "Vimeo" "\ f27d" # 1ab7ea,
  Twitter "Twitter" "\ F099" # 1DA1F2,
  ...
  GitHub "GitHub" "\ F113" # 333,
  RSS "RSS" "\ F09E" # F26522,
); 

19. Ändra @each slinga

På grund av tillägget till vår lista måste vi ändra vår "@each" -loop för att inkludera verktyget Tooltip ('$ name'). Vi kan sedan mata ut det namnet som innehållet i "före pseudo" -elementet på våra knappar.

 @each $ ikon, $ namn, $ unicode,
  $ ikon-bakgrund i $ ikon-lista {
  ...
  .Social__icon - # {$ ikon} {
  ...
  & amp; :: före {
  Innehåll: '# {$ name}';
  }
  }} 

20. Stil före pseudoelementet

Nu har vi namnet på varje element som visas på skärmen som vi behöver för att ställa in elementet, lägga till en bakgrundsfärg, vaddering och andra stylingselement - såväl som positionering av elementet och redo det för övergångar och modifiering av opacitet och toppvärden vid interaktion .

 & amp;: före {...
  Topp: -3.5em;
  Opacity: 0;
  övergång:
  Topp 250ms linjära, opacitet 150ms linjära 150ms;
}
& amp;: Hover, ... {...
  & amp; :: före {
  Opacitet: 1;
  Topp: -2.5em; }
} 

21. Stil efter pseudoelementet

Vi kommer använda CSS-trianglar För att skapa botten av våra verktygstips - placera det elementet som är redo för övergångar - genom övergång av opacitet och toppvärden vid olika tidpunkter.

Genom att lägga till en fördröjning får vi en animering som består av att verktyget bleknar och går ner på plats.

 & amp;: efter {...
  Topp: -1,9
  Opacity: 0;
  övergång:
  Topp 250ms linjära, opacitet 150ms linjära 150ms;
}
& amp;: Hover, ... {...
  & amp;: efter {
  Opacitet: 1;
  Topp: -0,9 }
} 

Codepen-samlingen av handledningssteg kan hittas här .

Denna artikel uppträdde ursprungligen i Web Designer Magazine Emission 264. Köp det här .

Läs mer:

• Vad är sass?
• 8 Codepen-funktioner du inte visste om
• 5 tips för super-snabb CSS