Hvordan komme i gang med Sass

Sep 14, 2025
hvordan
[1. 3]

Sass er et kraftig verktøy som bringer mange funksjoner fra andre programmeringsspråk i CSS - som funksjoner, variabler og sløyfer - samt å bringe sine egne intuitive funksjoner som mixins, nesting og delvis for å nevne noen.

I denne opplæringen skal vi skape sosiale ikoner ved hjelp av Sass Loops, Mixins og Funksjoner. Vi bruker også den kraftige nesting tilgjengelig i Sass.

  • Hva er Sass?

Vi opprettholder en liste i Sass for å generere våre sosiale ikoner, som vil bestå av klassen, skrifttype referanse og farge først - og senere verktøyet.

Og vi skal bruke mixins for å lage gjenbrukbare medieforespørsler og skape en funksjon for å slå en pikselverdi til en EM-verdi. For å gjøre dette, vil vi også opprette en variabel for vår base skriftstørrelse.

Det finnes en rekke måter å installere og bruke Sass avhengig av systemet ditt og dine Build Tooling-behov - flere detaljer kan bli funnet her - Vi skal imidlertid bruke kodepen til å kompilere vår sass i CSS for å holde ting så enkelt som mulig.

For å virkelig utnytte Sassens kraft og ikke komme deg inn i et rot av spesifisitet og kompleksitet, er det nødvendig med en solid forståelse av CSS. Den spesielle smaken av Sass vi skal bruke er SCSS (Sassy CSS), noe som betyr at vi fortsatt bruker de krøllete brakettene {} i vår SASS-kode.

Få opplæringsfilene

For å laste ned eksempelfilene for denne opplæringen, gå til Filsilo. , velg gratis ting og gratis innhold ved siden av opplæringen. Merk: Første gangs brukere må registrere deg for å bruke filsilo.

01. Sett opp koden din CSS

Getting your CodePen CSS set up correctly is key

Å få koden din CSS satt opp riktig er nøkkelen

Det første vi trenger å gjøre er Opprett en ny penn og endre noen av standardinnstillingene for CSS-editoren i Codepen. Vi endrer CSS-preprocessoren til SCSS og slår på Normalize og AutoPrefixer.

02. Begynn å skrive noen kode

Nå har vi satt alt opp, vi kan begynne å skrive noen kode. Inne i HTML-editoren lager vi en beholder og en rekke elementer som inneholder lenken og ikonet for hvert av våre ikoner.

Navnene som brukes her, vil bli brukt i vår SASS-liste som referanse i CSS. Vi bruker også BEM-navngivningskonvensjonen for våre klassenavn. 

 & lt; div class = "sosial__container" & gt;
  & lt; div class = "Social__item" & gt;
  & lt; et mål = "_ tom" href = "..."
  klasse = "Social__icon - Twitter" & gt;
  & lt; i class = "Ikon - Twitter" & gt; & lt; / i & gt;
  & lt; / a & gt;
  & lt; / div & gt;
  ...
& lt; / div & gt;

03. Sett grunnleggende stiler

Flytte over til CSS-editoren Vi starter med å inkludere font-kjempebra, sette en variabel for vår basestørrelse og noen grunnleggende stiler for siden. 

 @Import URL (http://srt.lt/w8YT8);
// Variabler
$ BASE-FONT-STØRRELSE: 16PX;
// grunnleggende styling
kropp {
  FONT-STØRRELSE: $ BASE-FONT-STØRRELSE;
  ...
}

04. Opprett en grunnleggende funksjon

Deretter lager vi en grunnleggende funksjon for å slå en pikselverdi til en EM-verdi ved hjelp av vår "$ Base-Font-Size" -variabel.

Funksjoner i Sass er opprettet ved hjelp av '@function' etterfulgt av navnet på funksjonen og inngangen som brukes til å utføre funksjonen.

Deretter inne i erklæringen bruker vi '@return' for å sende ut verdien når du bruker funksjonen. '# {}' Rundt beregningen brukes til interpolering . 

 // funksjoner
@function px-to-em ($ piksler) {
@return # {$ piksler / $ base-font-size} em;
}

05. Lag mixins.

Fortsetter med vårt oppsett Vi lager mixins for enkle mobil-første medieforespørsler ved hjelp av vår "PX-TO-EM" -funksjon, som vi vil passere i en PX-verdi for å returnere en EM-verdi.

Mixins er opprettet ved hjelp av '@ Mixin' etterfulgt av et navn for mixin. Deretter inne i erklæringen vi bruker '@Content' for å sende ut koden vi legger inne i blandingen når du ringer den senere i vår kodebase. 

 @ Mixin Viewport - Large {
  @Media eneste skjerm og
  (min bredde: px-to-em (1680px)) {
  @innhold;
}}
@Mixin Viewport - Medium {
  @Media eneste skjerm og
  (min bredde: px-to-em (1080px)) {
  @innhold;
}}

06. Sett opp en SASS-liste

Det siste trinnet i oppsettet vårt er å lage en liste. Lister i Sass er opprettet ved hjelp av en variabel; Deretter er den nøyaktige syntaksen ganske løs, og aksepterer et bredt utvalg av måter å definere det på .

Inne i variabelen vil vi definere klassenavnet, Unicode-verdi og farge for hvert ikon, separere dem med et komma, inne i parentes. 

 $ Ikon-liste: (
  Vimeo "\ F27D" # 1AB7EA,
  Twitter "\ F099" # 1DA1F2,
  ...
  Github "\ F113" # 333,
  RSS "\ F09E" # F26522
);

07. Vis dine ikoner på rad

For at våre sosiale ikoner skal vise på rad, legger vi til noen enkle CSS til hver av deres beholdere. 

 .Social__item {
  Skjerm: Inline-blokk;
  margin-høyre: 0.05em;
}

08. Lag en delt ikonstil

For å minimere mengden CSS vi sendes, bruker vi en CSS3-velger for å finne alle klassene som begynner med 'Ikon' og opprette en delt stil for dem. 

 [klasse ^ = "Ikon"] {
  Font-Family: 'Fontawesome';
  Snakk: Ingen;
  Font-stil: normal;
  font-vekt: normal;
  font-variant: normal;
  Tekst-transformasjon: ingen;
  linjehøyde: 1;
  -Webkit-font-utjevning: antialiased;
  -Moz-OSX-Font-utjevning: Gråskala; }

09. Stil opp knapp bakgrunner

Ved hjelp av samme metode vil vi gjøre det samme for knappene som definerer våre verdier i 'EM', slik at vi senere kan endre størrelsen på dem ved hjelp av beholderen. 

 [klasse ^ = "Social__icon"] {
  FONT-STØRRELSE: 1EM; Bredde: 2EM; Høyde: 2EM;
  Bakgrunnsfarge: # 333;
  farge: hvit;
  Tekst-dekorasjon: ingen;
  Border-Radius: 100%;
  Tekstjustering: Senter;
  Skjerm: Flex;
  Justeringsartikler: Senter;
  Justify-innhold: Senter;
}

10. @Each loop for våre ikoner

We’ve used our loop to generate the icons for each of our social icons

Vi har brukt vår løkke for å generere ikonene for hvert av våre sosiale ikoner

Nå har vi alle våre basestiler vi kan bruke vår liste for å generere CSS-spesifikke for hvert ikon.

For å lage en løkke i Sass bruker vi '@ach' etterfulgt av navn for hver verdi av hvert element - '$ Ikon', '$ Unicode' og '$ Ikon-bakgrunn' - etterfulgt av ordet 'i' og deretter navnet av listen.

Inne i sløyfen bruker vi "$ unicode" -verdien til "før" pseudo-elementet i hvert ikon vi har opprettet i HTML, slik at den delte stilen vi opprettet tidligere for å ta vare på alle de andre stilene som trengs. 

 @Each $ Ikon, $ Unicode, $ Ikon-bakgrunn
i $ Ikon-liste {
  .icon - # {$ icon} {
  & amp ;:: før {
  Innhold: $ Unicode;
  }
  }
}

11. @Each loop for våre bakgrunnsfarger

We’ve added the background colours as well as the icons to our '@each' loop

Vi har lagt til bakgrunnsfargene, så vel som ikonene til vår '@Each' Loop

Ikonene er nå alle arbeidende, men vi har fortsatt fallback-bakgrunnsfargen. Vi legger til litt mer kode på vår liste for å fikse det. Ved å bruke samme metode som ovenfor, vil vi sende inn "$-ikonet", men denne gangen på "Social__icon" -klassene og inne i den "$-ikon-bakgrunn" -fargen. 

 @Each $ Ikon, $ Unicode, $ Ikon-bakgrunn
i $ Ikon-liste {
  ...
  .Social__icon - # {$ ICON} {
  bakgrunnsfarge: $ Ikon-bakgrunn;
  }
}

12. Bruk mixinsene

Using our mixins we've updated the font size of the container to change the icons size depending on the viewport width

Ved hjelp av våre mixins har vi oppdatert fontstørrelsen på beholderen for å endre ikonstørrelsen, avhengig av visningsportbredden

Ved å bruke mixinsene vi opprettet tidligere, og fordi vi stylet ikonene ved hjelp av 'EM' -verdier, kan vi bruke en skriftstørrelse til beholderen og øke den ved hjelp av mediaspørsmålet mixin ved hjelp av '@include' og navnet på blandingen etterfulgt av Kode vi vil inkludere i media-spørringen. 

 .Social__container {
  FONT-STØRRELSE: 1EM;
  @include Viewport - Medium {
  FONT-STØRRELSE: 1.5 EM;
  }
  @include Viewport - stor {
  FONT-STØRRELSE: 2EM;
  }}

13. Legg til interaksjonstilstander og innebygde funksjoner

Vi kan legge til litt interaktivitet i våre knapper ved å endre bakgrunnsfargen når knappen er interaksjon med enten å bruke musen eller tastaturet.

Sass har en rekke Innebygde fargefunksjoner Tillat oss å ta bakgrunnsfargen vi har satt i vår liste og blande den med svart for å mørke knappen - når de samhandles med. 

 Ikon - # {$ Ikon} {
  bakgrunnsfarge: $ Ikon-bakgrunn;
  & amp;: hover,
  & amp;: fokus,
  & amp;: aktiv {
  bakgrunnsfarge:
  blanding (svart, $ ikon-bakgrunn, 15%);
  }}

14. Overgang bakgrunnsfargen

Vi kan også benytte 'Transition' eiendommen i CSS for å animere forskjellene mellom bakgrunnsfargene. Vi kunne bruke "All" -verdien, men det er både dyrt når det gjelder ytelse og vil ikke tillate oss å overføre forskjellige verdier ved forskjellige tidspunkter og timing-funksjoner. 

 [klasse ^ = "Social__icon"]{
  ...
  Overgang: Bakgrunnsfarge
  150ms lette ut
  ;
}

15. Legg til ytterligere overgangseffekter

Ved å legge til en "relativ" posisjonering til knappene og en toppverdi og legge til "topp" til vår "overgang" eiendom, kan vi klare elementene for videre interaksjon. 

 [klasse ^ = "Social__icon"] {
  posisjon: relativ;
  Topp: 0;
  ...
  Overgang: Bakgrunnsfarge
   150ms lette ut,
    Topp 250ms lineære
  ; }

16. Flytt knappene på samspillet

For denne samspillet er det ikke noe som er nødvendig for å skape det, derfor kan vi legge til koden til den delte klassen. Ved å bruke en negativ toppverdi og fjerne oversikten har vi en enda klarere visuell cue av interaksjon. 

 [klasse ^ = "Social__icon"] {
  ...
  & amp;: hover,
  & amp;: fokus,
  & amp;: aktiv {
  disposisjon: ingen;
  Topp: -0.25 EM;
  }}

17. Legg til en dråpe skygge

Using transition properties we’ve animated any interaction with the buttons – moving them up, darkening the background and adding a drop shadow

Bruke overgangsegenskaper Vi har animert noe samspill med knappene - flytte dem opp, mørkere bakgrunnen og legge til en dråpe skygge

Vi kan også bruke samme metode for å skape og animere en 'Box-Shadow' - legger litt mer dybde til samspillet - endre skyggens vertikale høyde på samme tid som toppverdien. 

 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. Legg til verktøytips

Vi kan enkelt legge til verktøytips med CSS for å legge til ytterligere klarhet for våre brukere. Det første vi vil gjøre er å legge til verktøytipsverdien til listen. Sørg for å skrive dem i anførselstegn for å tillate bruk av mellomrom hvis nødvendig. 

 $ Ikon-liste: (
  Vimeo "Vimeo" "\ F27D" # 1AB7EA,
  Twitter "Twitter" "\ F099" # 1DA1F2,
  ...
  Github "Github" "\ F113" # 333,
  RSS "RSS" "\ F09E" # F26522,
);

19. Endre @Each Loop

På grunn av tillegget til vår liste må vi endre vår '@Each' Loop for å inkludere verktøytipsverdien ('$ NAME'). Vi kan deretter sende det navnet som innholdet i "før pseudo" -elementet på våre knapper. 

 @ach $ ikon, $ navn, $ unicode,
  $ Ikon-bakgrunn i $ Ikon-liste {
  ...
  .Social__icon - # {$ ICON} {
  ...
  & amp ;:: før {
  Innhold: '# {$ NAME}';
  }
  }}

20. Stil før pseudo-elementet

We've added some basic styles to the tooltips again adding transitions to animate them into position

Vi har lagt til noen grunnleggende stiler til verktøytipsene igjen legger til overganger for å animere dem på plass

Nå har vi navnet på hvert element som vises på skjermen . 

 & amp; :: før {...
  Topp: -3.5em;
  opasitet: 0;
  overgang:
  topp 250ms lineære, opacity 150ms lineære 150ms;
}
& amp ;: Hover, ... {...
  & amp ;:: før {
  opasitet: 1;
  Topp: -2.5em; }
}

21. Stil etter Pseudo-elementet

Vi vil bruke CSS Triangles. For å lage bunnen av våre verktøytips - igjen posisjonering av elementet klargjør det for overganger - ved å overføre opasiteten og toppverdiene på forskjellige tidspunkter.

Ved å legge til en forsinkelse får vi en animasjon som består av verktøytipen fading inn og beveger seg ned på plass. 

 & amp; :: etter {...
  Topp: -1.9 EM;
  opasitet: 0;
  overgang:
  topp 250ms lineære, opacity 150ms lineære 150ms;
}
& amp ;: Hover, ... {...
  & amp ;:: Etter {
  opasitet: 1;
  Topp: -0.9em; }
}

Codepen-samlingen av opplæringsstrinnene kan bli funnet her .

Denne artikkelen opprinnelig dukket opp i Web Designer Magazine Issue 264. Kjøp det her .

Les mer:

  • Hva er Sass?
  • 8 Codepen-funksjoner du ikke visste om
  • 5 tips for super-rask CSS

hvordan - Mest populære artikler

Tegnark for 3D Modellers: 15 Top Tips

hvordan Sep 14, 2025

[1. 3] (Bilde Kreditt: Dahlia Khodur) Karakterark er dagens ordre i denne opplæringen, som dekker hvordan du lager en..

Slik endrer du størrelsen på et bilde i Photoshop

hvordan Sep 14, 2025

[1. 3] Å vite hvordan du kan endre størrelsen på et bilde i Photoshop, er en grunnleggende ferdighet for designere. Enten du la..

14 Zbrush Workflow Tips

hvordan Sep 14, 2025

[1. 3] Alle kunstnere har sin egen unike arbeidsflyt når du lager 3D-kunst i Zbrush. Denne arbeidsflyten kan bety en haug med tek..

5 ting du trenger for oljemaleri

hvordan Sep 14, 2025

[1. 3] Det er en uberettiget mystikk rundt oljemaleri som har satt noen kunstnere fra å utforske dem. Hvis du vet riktig ..

Lag en fleksibel karusellkomponent

hvordan Sep 14, 2025

[1. 3] Vue.js har kommet på hopp og grenser nylig, blir det sjette mest forkedprosjektet så langt på GitHub. På..

Lag fantastiske landskap i Houdini

hvordan Sep 14, 2025

[1. 3] Ved å bruke en nodebasert, prosessorisk tilnærming, gir 3D-programvare Houdini fra SideFX digitale artister et bemerkelse..

Topp tips for å finjustere dine hånddratt illustrasjonsteknikker

hvordan Sep 14, 2025

[1. 3] Jeg har gjort det blyant kunst Siden barndommen min, da jeg ville bære en blyant og papir rundt med meg. Fa..

Hvordan lage wordpress nettsiden flerspråklig

hvordan Sep 14, 2025

[1. 3] I de 10 beste språkene som brukes på internett, engelsk rangerer først , med nesten 950 millioner brukere..

Kategorier