Kuinka aloittaa Sass

Sass on tehokas työkalu, joka tuo monia ominaisuuksia muilta ohjelmointikieliltä CSS: ään - kuten funktioita, muuttujia ja silmukoita - sekä tuo omat intuitiiviset ominaisuutensa, kuten miksaukset, sisäkkäisyydet ja ositukset muutamaksi.

miltä mona lisa näyttäisi tänään

Tässä opetusohjelmassa luomme sosiaalisia kuvakkeita käyttämällä Sass-silmukoita, miksauksia ja toimintoja. Käytämme myös Sassissa saatavilla olevaa voimakasta pesimistä.



Luomme Sassissa luettelon sosiaalisten kuvakkeiden luomiseksi, joka koostuu ensin luokan nimestä, fontin viitteestä ja väristä - ja myöhemmin työkaluvihjestä.



Ja käytämme sekoituksia luoda uudelleenkäytettäviä mediakyselyjä ja luomme toiminnon, jolla pikseliarvo muutetaan em-arvoksi. Tätä varten luomme myös muuttujan peruskirjasimellemme.

Sassin asentamiseen ja käyttämiseen on useita tapoja riippuen järjestelmästäsi ja rakennustyökalutarpeistasi - löydät lisätietoja tässä - Käytämme kuitenkin CodePenia koottaessamme Sassimme CSS: ään pitämään asiat mahdollisimman yksinkertaisina.



Jotta voisit todella hyödyntää Sassin voimaa äläkä päästä itsesi spesifisyyden ja monimutkaisuuden sotkuun, vaaditaan vankka ymmärrys CSS: stä. Sassin erityinen maku, jota käytämme, on SCSS (Sassy CSS), mikä tarkoittaa, että käytämme edelleen kiharaisia ​​sulkeita {} Sass-koodissamme.

Hanki opetustiedostot

Voit ladata tämän opetusohjelman esimerkkitiedostot siirtymällä kohtaan FileSilo , valitse opasohjelman vierestä Ilmainen sisältö ja ilmainen sisältö. Huomaa: Ensimmäisen kerran käyttäjien on rekisteröidyttävä käyttämään FileSiloa.



01. Määritä CodePen CSS

CodePen CSS: n asettaminen oikein on avainasemassa

CodePen CSS: n asettaminen oikein on avainasemassa

Ensimmäinen asia, joka meidän on tehtävä, on luo uusi kynä ja muuta joitain CSS-editorin oletusasetuksia CodePenissä. Muutamme CSS-esiprosessorin SCSS: ksi ja otamme käyttöön Normalize ja Autoprefixer.

02. Aloita koodin kirjoittaminen

Nyt olemme määrittäneet kaiken ja voimme kirjoittaa koodia. HTML-editorin sisällä luomme säilön ja useita kohteita sisältäen linkin ja kuvakkeen jokaiselle kuvakkeellemme.

Tässä käytettyjä nimiä käytetään Sass-luettelossamme viitteenä CSS: ssä. Käytämme myös luokkien nimissä BEM-nimeämiskäytäntöä.

...

03. Aseta perustyylit

Siirtymällä CSS-editoriin aloitamme sisällyttämällä font-awesome -asetuksen, asettamalla muuttujan peruskirjasinkoolle ja joitain sivutyylejä.

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

04. Luo perustoiminto

Seuraavaksi luomme perustoiminnon pikseliarvon muuttamiseksi em-arvoksi käyttämällä muuttujaa '$ base-font-size'.

Sassin toiminnot luodaan käyttämällä '@function', jota seuraa toiminnon nimi ja toiminnon suorittamiseen käytetty tulo.

Sitten ilmoituksen sisällä käytämme arvoa @return funktion käyttöä käytettäessä. Laskennan ympärillä olevaa # #} käytetään interpolointi .

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

05. Tee sekoituksia

Jatkamalla asetuksiamme luomme yhdistelmiä yksinkertaisille mobiili-ensin-mediakyselyille käyttämällä px-to-em-toimintoamme, jonka välitämme px-arvona palauttamaan em-arvon.

Miksiinit luodaan käyttämällä nimeä @mixin ja sekoituksen nimi. Sitten ilmoituksen sisällä käytämme @content-koodia, jonka laitamme miksauksen sisälle, kun kutsumme sitä myöhemmin koodipohjamme.

@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. Laadi Sass-luettelo

Viimeinen askel asennuksessamme on luoda luettelo. Sassin luettelot luodaan muuttujan avulla; sen jälkeen tarkka syntaksi on melko löysä, hyväksymällä monenlaisia tapoja määritellä se .

Muuttujan sisällä määritämme luokan nimen, unicode-arvon ja värin jokaiselle kuvakkeelle erottamalla ne pilkulla sulkeissa.

imac vs macbook pro -videomuokkaus
$icon-list: ( vimeo “f27d' #1ab7ea, twitter “f099' #1da1f2, ... github “f113' #333, rss “f09e' #f26522 );

07. Näytä kuvakkeet peräkkäin

Jotta sosiaaliset kuvakkeet näkyisivät rivillä, lisätään jokaiselle niiden säilölle yksinkertainen CSS.

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

08. Luo jaettu kuvaketyyli

Lähetettävän CSS: n määrän minimoimiseksi käytämme CSS3-valitsinta etsimään kaikki '' kuvakkeella '' alkavat luokat ja luomaan heille jaetun tyylin.

[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. Korosta painikkeen taustat

Samalla menetelmällä teemme saman painikkeille, jotka määrittelevät arvomme 'em': ssä, jolloin voimme myöhemmin muuttaa niiden kokoa säilön avulla.

kuinka piirtää koiran muotokuva
[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. @ jokaisen silmukan kuvakkeillemme

Olemme käyttäneet silmukkaa kuvakkeiden luomiseen jokaiselle sosiaaliselle kuvakkeellemme

Olemme käyttäneet silmukkaa kuvakkeiden luomiseen jokaiselle sosiaaliselle kuvakkeellemme

Nyt meillä on kaikki perustyylimme. Voimme käyttää luetteloamme kunkin kuvakkeen CSS: n luomiseen.

Luomaan silmukka Sassiin käytämme '@each', jota seuraa nimiä kunkin kohteen jokaiselle arvolle - '$ icon', '$ unicode' ja '$ icon-background' - jota seuraa sana 'in' ja sitten nimi luettelon.

Silmukan sisällä käytämme $ unicode -arvoa jokaisen HTML-koodissa luomamme kuvakkeen pseudo-elementtiin 'before', jolloin aiemmin luomamme jaettu tyyli huolehtii kaikista muista tarvittavista tyyleistä.

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

11. @each silmukka taustaväreillemme

Olemme lisänneet taustavärit ja kuvakkeet

Olemme lisänneet taustavärit ja kuvakkeet @each -silmukkaamme

Kuvakkeet ovat nyt kaikki toiminnassa, mutta taustaväri on edelleen käytettävissä. Lisäämme lisää koodia luetteloomme sen korjaamiseksi. Samalla menetelmällä kuin yllä, annamme '$ icon' -nimen, mutta tällä kertaa 'social__icon' -luokille ja sen sisällä '$ icon-background' -väri.

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

12. Käytä sekoituksia

Käyttämällä sekoituksiamme

Sekoituksemme avulla olemme päivittäneet säilön fontin koon muuttaaksesi kuvakkeiden kokoa näkymän leveydestä riippuen

Käyttämällä aiemmin luomiamme yhdistelmiä ja koska muotoilimme kuvakkeet käyttämällä 'em' -arvoja, voimme soveltaa säiliöön kirjasinkokoa ja lisätä sitä käyttämällä media-kysely-sekoitustamme käyttämällä merkintää '@include' ja sekoituksen nimeä, jota seuraa koodi, jonka haluamme sisällyttää media-kyselyyn.

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

13. Lisää vuorovaikutustilat ja sisäänrakennetut toiminnot

Voimme lisätä jonkin verran vuorovaikutteisuutta painikkeihimme muuttamalla taustaväriä, kun painiketta käsitellään joko hiirellä tai näppäimistöllä.

Sassilla on useita sisäänrakennetut väritoiminnot jolloin voimme ottaa luetteloon asettamamme taustavärin ja sekoittaa sen mustaan ​​tummentamaan painiketta - kun olemme vuorovaikutuksessa.

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

14. Siirrä taustaväri

Voimme myös hyödyntää CSS: n 'Siirtymä' -ominaisuutta taustavärien erojen animoimiseksi. Voisimme käyttää 'kaikki' -arvoa, mutta se on sekä kallis suorituskyvyn suhteen eikä salli meidän siirtyä eri arvoihin eri ajoituksilla ja ajoitustoiminnoilla.

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

15. Lisää muita siirtymävaikutuksia

Lisäämällä painikkeisiin 'suhteellinen' sijoittelu ja yläarvo ja lisäämällä 'yläosa' siirtymisominaisuuteemme voimme valmistaa elementit jatkokeskusteluun.

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

16. Siirrä painikkeita ylöspäin vuorovaikutuksessa

Tätä vuorovaikutusta varten sen luomiseen ei tarvita mitään erityistä, joten voimme lisätä koodin jaettuun luokkaan. Soveltamalla negatiivinen yläarvo ja poistamalla ääriviivat saamme vielä selkeämmän visuaalisen vuorovaikutuksen.

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

17. Lisää varjo

Siirtymisominaisuuksien avulla olemme animoineet kaiken vuorovaikutuksen painikkeiden kanssa - siirtämällä niitä ylös, tummentamalla taustaa ja lisäämällä varjon

Siirtymisominaisuuksien avulla olemme animoineet kaiken vuorovaikutuksen painikkeiden kanssa - siirtämällä niitä ylös, tummentamalla taustaa ja lisäämällä varjon

Voimme myös käyttää samaa menetelmää luomaan ja animoimaan 'laatikko-varjo' - lisäämällä vuorovaikutukseen hieman enemmän syvyyttä - muuttamalla varjon pystysuoraa korkeutta samanaikaisesti korkeimman arvon kanssa.

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. Lisää työkaluvihjeitä

Voimme helposti lisätä työkaluvihjeitä CSS: n avulla, jotta voimme lisätä selkeyttä käyttäjillemme. Ensimmäinen asia, jonka teemme, on lisätä työkaluvihjeen arvo luetteloon. Muista kirjoittaa ne lainausmerkkeihin, jotta välilyöntejä voidaan käyttää tarvittaessa.

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

19. Muokkaa @each-silmukkaa

Luettelomme lisäyksen vuoksi meidän on muutettava '@each' -silmukkaa sisältämään työkaluvihjeen arvo ('$ name'). Voimme sitten antaa kyseisen nimen painikkeidemme '' ennen pseudo '' -elementin sisällöksi.

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

20. Tyylittele ennen pseudoelementtiä

Me

Olemme lisänneet joitain perustyylejä työkaluvihjeisiin lisäämällä siirtymiä animoidaksesi ne paikalleen

Nyt jokaisen elementin nimi näytetään ruudulla, ja meidän on muotoiltava elementti lisäämällä taustaväri, pehmusteet ja muut muotoiluelementit - samoin kuin sijoittamalla elementti ja valmistelemaan sitä siirtymiä varten sekä muuttamalla peittävyyttä ja huippuarvoja vuorovaikutuksessa .

&::before { ... top: -3.5em; opacity: 0; transition: top 250ms linear, opacity 150ms linear 150ms; } &:hover, ... { ... &::before { opacity: 1; top: -2.5em; } }

21. Suunnittele jälkipseudoelementti

Käytämme CSS-kolmiot luoda työkaluvihjeidemme alaosa - sijoittamalla elementti uudelleen siirtymiä varten - siirtämällä peittävyys- ja yläarvot eri ajoituksiin.

Lisäämällä viive saamme animaation, joka koostuu työkaluvihjeen häipymisestä ja siirtymisestä alas paikalleen.

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

CodePen-kokoelma opetusohjelman vaiheita löytyy tässä .

Tämä artikkeli ilmestyi alun perin Web Designer -lehden numerossa 264. Osta se täältä .

Lue lisää: