Sådan kommer du i gang med Sass

Sass er et kraftfuldt værktøj, der bringer mange funktioner fra andre programmeringssprog til CSS - såsom funktioner, variabler og sløjfer - samt at bringe sine egne intuitive funktioner som mixins, indlejring og partielle for at nævne nogle få.

hvordan man holder billeder private på facebook

I denne vejledning opretter vi sociale ikoner ved hjælp af Sass-sløjfer, mixins og funktioner. Vi bruger også den kraftige indlejring, der er tilgængelig i Sass.



Vi opretter en liste i Sass for at generere vores sociale ikoner, som først vil bestå af klassenavn, skrifttypehenvisning og farve - og senere værktøjstip.



Og vi bruger mixins til at oprette genanvendelige medieforespørgsler og skabe en funktion til at omdanne en pixelværdi til en em-værdi. For at gøre dette opretter vi også en variabel til vores grundlæggende skriftstørrelse.

Der er en række måder at installere og bruge Sass på, afhængigt af dit system og dine byggeværktøjsbehov - flere detaljer kan findes her - dog bruger vi CodePen til at kompilere vores Sass til CSS for at holde tingene så enkle som muligt.



For virkelig at udnytte kraften i Sass og ikke komme ind i et rod af specificitet og kompleksitet kræves en solid forståelse af CSS. Den særlige smag af Sass, vi bruger, er SCSS (Sassy CSS), hvilket betyder, at vi stadig bruger de krøllede parenteser {} i vores Sass-kode.

Få vejledningsfilerne

For at downloade eksempelfilerne til denne vejledning skal du gå til FileSilo , vælg Gratis ting og gratis indhold ved siden af ​​selvstudiet. Bemærk: Første gang brugere skal registrere sig for at bruge FileSilo.



01. Opsæt din CodePen CSS

At få din CodePen CSS opsat korrekt er nøglen

At få din CodePen CSS opsat korrekt er nøglen

Den første ting, vi skal gøre er Opret en ny pen og ændre nogle af standardindstillingerne for CSS-editoren i CodePen. Vi ændrer CSS Preprocessor til SCSS og tænder Normaliser og Autoprefixer.

02. Begynd at skrive noget kode

Nu har vi sat alt op, vi kan begynde at skrive nogle kode. Inde i HTML-editoren opretter vi en container og et antal elementer inde indeholdende linket og ikonet til hvert af vores ikoner.

Navnene, der bruges her, vil blive brugt i vores Sass-liste som reference i CSS. Vi bruger også BEM-navngivningskonventionen til vores klassenavne.

...

03. Indstil grundlæggende stilarter

Når vi går over til CSS-editoren, begynder vi med at inkludere font-awesome, indstille en variabel til vores basale fontstørrelse og nogle grundlæggende stilarter til siden.

@import url(http://srt.lt/w8yT8); // Variables $base-font-size: 16px; // Basic Styling body { font-size: $base-font-size; ... }

04. Opret en grundlæggende funktion

Derefter opretter vi en grundlæggende funktion til at dreje en pixelværdi til en em-værdi ved hjælp af vores '$ base-font-size' variabel.

Funktioner i Sass oprettes ved hjælp af '@function' efterfulgt af navnet på funktionen og den input, der bruges til at udføre funktionen.

Derefter inde i erklæringen bruger vi '@return' til at afgive værdien, når du bruger funktionen. '# {}' Omkring beregningen bruges til interpolation .

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

05. Lav mixins

Fortsat med vores opsætning opretter vi mixins til enkle mobil-første medieforespørgsler ved hjælp af vores 'px-til-em'-funktion, som vi sender i en px-værdi for at returnere en em-værdi.

Mixins oprettes ved hjælp af '@mixin' efterfulgt af et navn til mixin. Derefter inde i erklæringen bruger vi '@content' til at udsende den kode, vi sætter inde i mixin, når vi kalder den senere i vores codebase.

@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. Opret en Sass-liste

Det sidste trin i vores opsætning er at oprette en liste. Lister i Sass oprettes ved hjælp af en variabel; efter det er den nøjagtige syntaks temmelig løs og accepterer en lang række måder at definere det på .

Inde i variablen definerer vi klassens navn, unicode-værdi og farve for hvert ikon og adskiller dem med et komma inden for parenteser.

hvordan man tegner et sejt monster
$icon-list: ( vimeo “f27d' #1ab7ea, twitter “f099' #1da1f2, ... github “f113' #333, rss “f09e' #f26522 );

07. Vis dine ikoner i træk

For at vores sociale ikoner skal vises i række, tilføjer vi nogle enkle CSS til hver af deres containere.

.social__item { display: inline-block; margin-right: 0.05em; }

08. Opret en delt ikonstil

For at minimere mængden af ​​CSS, vi sender, bruger vi en CSS3-vælger til at finde alle klasser, der begynder med 'ikon' og oprette en delt stil til dem.

[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. Stil baggrundsknapper til knap

Ved hjælp af den samme metode gør vi det samme for knapperne, der definerer vores værdier i dem, så vi senere kan ændre størrelsen på dem ved hjælp af containeren.

[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. @ hver løkke til vores ikoner

Vi har brugt vores loop til at generere ikonerne for hver af vores sociale ikoner

Vi har brugt vores loop til at generere ikonerne for hver af vores sociale ikoner

Nu har vi alle vores basisstile, vi kan bruge vores liste til at generere den CSS, der er specifik for hvert ikon.

For at oprette en sløjfe i Sass bruger vi '@each' efterfulgt af navne for hver værdi af hvert element - '$ icon', '$ unicode' og '$ icon-background' - efterfulgt af ordet 'in' og derefter navnet på listen.

Inde i sløjfen anvender vi '$ unicode' -værdien til 'før' pseudo-elementet for hvert ikon, vi har oprettet i HTML-koden, så den delte stil, vi oprettede tidligere, tager sig af alle de andre typografier, der er nødvendige.

@each $icon, $unicode, $icon-background in $icon-list { .icon--#{$icon} { &::before { content: $unicode; } } }

11. @ hver løkke til vores baggrundsfarver

Vi har tilføjet baggrundsfarverne samt ikonerne til vores

Vi har tilføjet baggrundsfarverne samt ikonerne til vores '@each' løkke

Ikonerne fungerer nu alle sammen, men vi har stadig backbackfarven. Vi tilføjer mere kode til vores liste for at rette op på det. Ved hjælp af samme metode som ovenfor udsender vi navnet '$ ikon', men denne gang på klasserne 'social__icon' og indeni det '$ ikon-baggrundsfarven'.

@each $icon, $unicode, $icon-background in $icon-list { ... .social__icon--#{$icon} { background-color: $icon-background; } }

12. Brug mixins

Brug af vores mixins vi

hvor lang tid tager det at lave en tegneserie
Ved hjælp af vores mixins har vi opdateret containerens skriftstørrelse for at ændre ikonstørrelsen afhængigt af visningsportens bredde

Ved hjælp af mixins, vi oprettede tidligere, og fordi vi stylede ikonerne ved hjælp af 'em'-værdier, kan vi anvende en skriftstørrelse på beholderen og øge den ved hjælp af vores medieforespørgsel mixin ved hjælp af' @include 'og navnet på mixin efterfulgt af kode, vi vil medtage i medieforespørgslen.

.social__container { font-size: 1em; @include viewport--medium { font-size: 1.5em; } @include viewport--large { font-size: 2em; } }

13. Tilføj interaktionstilstande og indbyggede funktioner

Vi kan tilføje noget interaktivitet til vores knapper ved at ændre baggrundsfarven, når knappen interageres med enten ved hjælp af musen eller tastaturet.

Sass har et antal indbyggede farvefunktioner giver os mulighed for at tage den baggrundsfarve, vi har indstillet på vores liste og blande den med sort for at gøre knappen mørkere - når den interageres med.

icon--#{$icon} { background-color: $icon-background; &:hover, &:focus, &:active { background-color: mix(black, $icon-background, 15%); } }

14. Overfør baggrundsfarven

Vi kan også bruge egenskaben 'overgang' i CSS til at animere forskellene mellem baggrundsfarverne. Vi kunne bruge 'all' -værdien, men det er både dyrt med hensyn til ydeevne og tillader os ikke at overføre forskellige værdier ved forskellige tidspunkter og timing-funktioner.

[class^='social__icon'] { ... transition: background-color 150ms ease-in-out ; }

15. Tilføj yderligere overgangseffekter

Ved at tilføje en 'relativ' positionering til knapperne og en topværdi og tilføje 'top' til vores 'overgangsegenskab' kan vi klargøre elementerne til yderligere interaktion.

[class^='social__icon'] { position: relative; top: 0; ... transition: background-color 150ms ease-in-out, top 250ms linear ; }

16. Flyt knapperne op efter interaktion

Til denne interaktion er der ikke noget specifikt nødvendigt for at oprette det, derfor kan vi tilføje koden til den delte klasse. Ved at anvende en negativ topværdi og fjerne konturen har vi en endnu klarere visuel indikation for interaktion.

[class^='social__icon'] { ... &:hover, &:focus, &:active { outline: none; top: -0.25em; } }

17. Tilføj en skygge

Ved hjælp af overgangsegenskaber har vi animeret enhver interaktion med knapperne - flyttet dem op, mørkt baggrunden og tilføjet en dråbe

Ved hjælp af overgangsegenskaber har vi animeret enhver interaktion med knapperne - flyttet dem op, mørkt baggrunden og tilføjet en dråbe

Vi kan også bruge den samme metode til at skabe og animere en '' box-shadow '' - tilføje lidt mere dybde til interaktionen - ændre skyggens lodrette højde på samme tid som topværdien.

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. Tilføj værktøjstip

Vi kan nemt tilføje værktøjstip med CSS for at tilføje yderligere klarhed for vores brugere. Den første ting, vi vil gøre, er at tilføje værktøjstipværdien til listen. Sørg for at skrive dem i anførselstegn for at muliggøre brug af mellemrum, hvis det kræves.

$icon-list: ( vimeo “Vimeo' “f27d' #1ab7ea, twitter “Twitter' “f099' #1da1f2, ... github “GitHub' “f113' #333, rss “RSS' “f09e' #f26522, );

19. Rediger @each-sløjfen

På grund af tilføjelsen til vores liste bliver vi nødt til at ændre vores '@each' loop for at inkludere værktøjstipværdien ('$ name'). Vi kan derefter output dette navn som indholdet af 'før pseudo'-elementet på vores knapper.

@each $icon, $name, $unicode, $icon-background in $icon-list { ... .social__icon--#{$icon} { ... &::before { content: '#{$name}'; } } }

20. Stil det før pseudo-element

Vi

Vi har tilføjet nogle grundlæggende stilarter til værktøjstipene igen ved at tilføje overgange for at animere dem i position

Nu har vi navnet på hvert element, der vises på skærmen, vi har brug for for at style elementet, tilføje en baggrundsfarve, polstring og andre stylingelementer - samt placere elementet og klargøre det til overgange og ændre opacitet og topværdier efter interaktion .

hvordan man bruger skiveværktøj i Photoshop
&::before { ... top: -3.5em; opacity: 0; transition: top 250ms linear, opacity 150ms linear 150ms; } &:hover, ... { ... &::before { opacity: 1; top: -2.5em; } }

21. Stil efter-pseudo-elementet

Vi bruger CSS-trekanter at skabe bunden af ​​vores værktøjstip - igen placere elementet, der gør det klar til overgange - ved at overføre opacitet og topværdier ved forskellige tidspunkter.

Ved at tilføje en forsinkelse får vi en animation bestående af værktøjstip, der falmer ind og bevæger sig ned på plads.

&::after { ... top: -1.9em; opacity: 0; transition: top 250ms linear, opacity 150ms linear 150ms; } &:hover, ... { ... &::after { opacity: 1; top: -0.9em; } }

CodePen-samlingen af ​​vejledningstrin kan findes her .

Denne artikel opstod oprindeligt i magasin nr. 264 af Web Designer. Køb det her .

Læs mere: