Kuinka aloittaa Sass

Sep 13, 2025
Miten tehdään

Sass On tehokas työkalu, joka tuo monia ominaisuuksia muista ohjelmointikieleistä CSS: ään - kuten toiminnot, muuttujat ja silmukat - sekä omat intuitiiviset ominaisuudet, kuten sekoittimet, pesivät ja osittaiset nimensä muutamia.

Tässä opetusohjelmassa luomme sosiaalisia kuvakkeita SASS-silmukoiden, Mixienien ja toimintojen avulla. Käytämme myös voimakas pesintä, joka on saatavilla Sassissa.

  • Mikä on sass?

Luomme luettelon Sassissa sosiaalisten kuvakkeiden luomiseksi, joka koostuu luokan nimestä, fontin viite ja väri ensin - ja myöhemmin Tooltip.

Ja käytämme sekoittimia luomaan uudelleenkäytettäviä mediakyselyjä ja luoda tehtävä pikselin arvoksi EM-arvoksi. Tehdä tämä myös luomaan muuttujan perusfontti-kokoiselle.

On olemassa useita tapoja asentaa ja käyttää Sassia riippuen järjestelmästäsi ja rakennustyökalut tarvitsevat - lisätietoja löytyy tässä - Käytämme kuitenkin koodipeneä, joka koottaa Sassimme CSS: hen pitämään asiat mahdollisimman yksinkertaisesti.

Jos haluat todella hyödyntää SASS: n voimaa eikä päästä itsesi spesifisyyteen ja monimutkaisuuteen. Sassin erityinen maku käytämme, on SCSS (Sassy CSS), mikä tarkoittaa, että käytämme Sass-koodimme kiharakannatteja {}.

Hanki opetustiedostot

Voit ladata tämän opetusohjelman esimerkkitiedostot Filesilo , valitse vapaa tavara ja vapaa sisältö opetusohjelman vieressä. Huomaa: Ensimmäisen kerran käyttäjien on rekisteröitävä käyttää Filesiloa.

01. Aseta CodePen CSS

Getting your CodePen CSS set up correctly is key

CODEPEN CSS: n asettaminen oikein on avain

Ensimmäinen asia, jota meidän on tehtävä Luo uusi kynä ja muuta joitain CSS-editorille oletusasetuksia Codepenissa. Vaihdaamme CSS-esikäsittelyn SCS: iin ja käännymme Normalze- ja AutoPrefikseriin.

02. Aloita kirjoittaminen jotain koodia

Nyt olemme asettaneet kaiken ylös, voimme aloittaa koodin kirjoittamisen. HTML-editorin sisällä luomme kontin ja useita kohteita, jotka sisältävät linkin ja kuvakkeen jokaiselle kuvakkeelle.

Tässä käytettyjä nimiä käytetään Sass-luettelossa CSS: ssä. Käytämme myös luokan nimien BEM-nimeämissopimuksen. 

 & lt; div luokka = "sosiaalinen__container" & gt;
  & lt; div luokka = "sosiaalinen__item" & gt;
  & lt; kohde = "_ tyhjä" href = "..."
  Luokka = "Social__icon - Twitter" & GT;
  & lt; i class = "icon - twitter" & gt; & lt; / i & gt;
  & lt; / a & gt;
  & lt; / div & gt;
  ...
& lt; / div & gt;

03. Aseta perustyylit

Siirtyminen CSS-editorille Aloitamme mukaan lukien Font-Awesome, asettamalla muuttujan perusfontti- ja jotkin sivun perustyyleille. 

 @IMPORT URL (http://srt.lt/w8yt8);
// muuttujat
$ Base-Font-koko: 16PX;
// Perusmuotoilu
elin {
  Fontti-koko: $ Base-Font-kokoinen;
  ...
}

04. Luo perustoiminto

Seuraavaksi luomme perustoiminnon pikselin arvoksi EM-arvoksi käyttämällä $ Base-font-kokoamme "muuttujaa.

Sass-toiminnot luodaan käyttäen "@function", jota seuraa toiminnon nimi ja toiminnon suorittamiseen käytettävä syöttö.

Sitten julistuksen sisällä käytämme "@return", jotta voit tuottaa arvon, kun käytät toimintoa. Laskennan ympäröivä "# {}" käytetään interpolointi . 

 // Toiminnot
@function px-to-em ($ pikselit) {
@Return # {$ Pixels / $ Base-Font-kokoinen} Em;
}

05. Tee sekoittimet

Jatkamalla asennustamme luomme sekoittimia yksinkertaisille mobiililaitteille, jotka käyttävät PX-EM '-toimintoa, jota siirrymme PX-arvoon palauttamaan EM-arvon.

Miekit luodaan käyttämällä "@mixin", jota seuraa miksiinin nimi. Sitten julistuksen sisällä käytämme '@Content' lähettää koodin, jonka laitat sekoittumme sekoittimessa, kun soitat sitä myöhemmin koodibaseissamme. 

 @mixin Viewport - suuri {
  @Media vain näyttö ja
  (Min-leveys: px-to-em (1680px)) {
  @sisältö;
}}
@mixin Viewport - Medium {
  @Media vain näyttö ja
  (min-leveys: px-to-em (1080px)) {
  @sisältö;
}}

06. Aseta SASS-lista

Viimeinen asennusasetuksemme on luoda luettelo. Sass-luettelot luodaan muuttujan avulla; Sen jälkeen täsmällinen syntaksi on melko löysä, joka hyväksyy monenlaisia Tapoja määritellä se .

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

 $ icon-lista: (
  Vimeo "\ F27D" # 1AB7EA,
  Twitter "\ f099" # 1da1f2,
  ...
  GitHub "\ f113" # 333,
  RSS "\ f09e" # F26522
);

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

Jotta sosiaaliset kuvakkeet näyttävät rivillä, lisäämme joitakin yksinkertaisia ​​CSS: tä jokaiseen säiliöön. 

 .social__item {
  Näyttö: Inline-lohko;
  Marginaali-oikeus: 0.05EM;
}

08. Luo jaettu kuvaketyyli

Jos haluat minimoida CSS: n määrän, voimme käyttää CSS3-valitsinta löytääksesi kaikki luokat, jotka alkavat "kuvaketta" ja luovat jaetun tyylin. 

 [luokka ^ = "icon"] {
  Font-perhe: "Fontawesome";
  Puhu: Ei mitään;
  Fontti-tyyli: normaali;
  fonttipaino: normaali;
  Fontti-variantti: normaali;
  Teksti-muunnos: Ei mitään;
  Line-korkeus: 1;
  -WebKit-fontti-tasoitus: antialiasoitu;
  -MOZ-OSX-fontti-tasoitus: harmaasävy; }

09. Style Up Button Taustat

Saman menetelmän avulla teemme samoja painikkeille, jotka määrittävät arvomme "EM", jolloin meille myöhemmin voit muuttaa niitä säiliön avulla. 

 [luokka ^ = "Social__icon"] {
  Font-koko: 1em; Leveys: 2em; Korkeus: 2em;
  Tausta-väri: # 333;
  väri valkoinen;
  Tekstisuunnittelu: Ei mitään;
  Border-RADIUS: 100%;
  Teksti-kohdistus: keskus;
  Näyttö: Flex;
  Kohdista: Keski;
  Perustele-sisältö: keskus;
}

10. @each silmukka kuvakkeille

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

Olemme käyttäneet silmukkaamme luomaan kuvakkeet jokaiselle sosiaaliselle kuvakkeellemme

Nyt meillä on kaikki tukiasuudet, joita voimme käyttää luetteloa luomaan kunkin kuvakkeen mukaiset CSS: n.

Voit luoda silmukan Sassissa "@each", jota seuraa nimet kunkin kohteen arvosta - '$ icon', '$ Unicode' ja '$ Icon-tausta' - seuraa sana 'in' ja sitten nimi luettelosta.

Silmukan sisällä käytämme "$ Unicode" -arvoa jokaisen ikonin "ennen" pseudo-elementtiä, jonka olemme luoneet HTML: ssä, mikä mahdollistaa jaetun tyylin, jonka olemme luoneet aiemmin huolehtimaan kaikista muista tarvittavista tyyleistä. 

 @ACH $ -kuvake, $ Unicode, $ Icon-tausta
$ icon-lista {
  .icon - # {$ icon} {
  & amp; :: Ennen {
  Sisältö: $ Unicode;
  }
  }
}

11. @ACH-silmukka taustaväreillemme

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

Olemme lisänneet taustavärit sekä kuvakkeet "@ACH"-silmukkaamme

Kuvakkeet ovat nyt kaikki työskentelevät, mutta meillä on edelleen salaus tausta väri. Lisäämme lisää koodia luetteloon sen korjaamiseksi. Saman menetelmän käyttäminen Kuten yllä olevasta "$ Icon" -nimeä, mutta tällä kertaa "Social__icon" -luokissa ja sisällä "$ Icon-tausta" väri. 

 @ACH $ -kuvake, $ Unicode, $ Icon-tausta
$ icon-lista {
  ...
  .social__icon - # {$ icon} {
  Tausta-väri: $ Icon-tausta;
  }
}

12. Käytä sekoittimia

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

Monitoimien käyttäminen Olemme päivittäneet säiliön kirjasimen kokoa kuvakkeiden koon muuttamiseksi Viewportin leveyden mukaan

Käyttämällä aikaisemmin luomamme sekoittimia ja siksi teemme kuvakkeita käyttämällä "EM" -arvoja, voimme käyttää fonttikokoa säiliöön ja lisää sitä media-kyselyn sekoittimme käyttämällä "@include" ja mixinin nimi, jota seuraa sekoitus Koodi Haluamme sisällyttää media-kyselyyn. 

 .social__container {
  Font-koko: 1em;
  @include Viewport - Medium {
  Fontti-koko: 1.5EM;
  }
  @include Viewport - suuri {
  Fontti-koko: 2em;
  }}

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

Voimme lisätä vuorovaikutteisuutta painikkeillemme muuttamalla taustaväriä, kun painike vuorovaikutuksessa joko hiirellä tai näppäimistöllä.

Sassilla on useita Sisäänrakennetut väritoiminnot Jotta voimme ottaa taustan värit, olemme asettaneet luettelomme ja sekoita se mustaksi tummentaaksesi painiketta - kun se on vuorovaikutuksessa. 

 Kuvake - # {$ icon} {
  Tausta-väri: $ Icon-tausta;
  & amp;: hover,
  & amp;: Focus,
  & amp;: Aktiivinen {
  taustaväri:
  Sekoita (musta, $ Icon-tausta, 15%);
  }}

14. Siirtyminen taustaväri

Voimme myös hyödyntää "siirtymävaiheen omaisuutta CSS: ssä animoida eroja taustavärejä. Voisimme käyttää "kaikki" arvoa, mutta se on kalliita suorituskyvyn kannalta, eikä se salliisi siirtymään erilaisia ​​arvoja eri ajoituksissa ja ajoitustoiminnoissa. 

 [luokka ^ = "Social__icon"]{
  ...
  Siirtyminen: tausta-väri
  150ms helppokäyttöinen
  ;
}

15. Lisää siirtymävaikutuksia

Lisäämällä "suhteellinen" paikannus painikkeisiin ja yläreunaan ja lisäämällä "Top" "siirtymämme" -ominaisuudelle voimme valmiiksi elementit lisää vuorovaikutusta varten. 

 [luokka ^ = "Social__icon"] {
  Asento: Suhteellinen;
  Top: 0;
  ...
  Siirtyminen: tausta-väri
   150ms helppokäyttöinen,
    Top 250ms lineaarinen
  ; }

16. Siirrä painikkeet vuorovaikutukseen

Tätä vuorovaikutusta varten ei ole mitään erityistä tarpeen luoda sen siis, että voimme lisätä koodin jaettuun luokkaan. Soveltamalla negatiivista huippuarvoa ja poistamalla ääriviiva meillä on vielä selkeämpi vuorovaikutus. 

 [luokka ^ = "Social__icon"] {
  ...
  & amp;: hover,
  & amp;: Focus,
  & amp;: Aktiivinen {
  Outline: Ei mitään;
  Yläosa: -0.25EM;
  }}

17. Lisää pudotusvarjo

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

Siirtymäominaisuuksien käyttäminen Olemme animoituneet vuorovaikutusta painikkeiden kanssa - siirtämällä niitä ylös, tummentaa taustan ja lisäämällä pudotusvarjon

Voimme myös käyttää samaa tapaa luoda ja animoida "laatikko-varjo" - lisäämällä hieman syvyyttä vuorovaikutukseen - varjon pystysuoran korkeuden muuttaminen samaan aikaan kuin ylin arvo. 

 Laatikko-varjo:
  0 0 0.25EM -0.25EM RGBA (0,0,0,0,2);
& amp;: hover,
& amp;: Focus,
& amp;: Aktiivinen {
  ...
  Laatikko-varjo:
  0 0.5EM 0.25EM -0.25EM RGBA (0,0,0,0,3);
}

18. Lisää työkalut

Voimme helposti lisätä työkaluja CSS: llä lisäämään selkeyttä käyttäjille. Ensimmäinen asia, jonka teemme, on lisätä työkalutusarvo luetteloon. Varmista, että kirjoitat ne lainausmerkkeihin, jotta vältiöt voivat tarvittaessa käyttää. 

 $ icon-lista: (
  Vimeo "Vimeo" "\ f27d" # 1ab7ea,
  Twitter "Twitter" "\ f099" # 1da1f2,
  ...
  GitHub "GitHub" "\ f113" # 333,
  RSS "RSS" "\ f09e" # F26522,
);

19. Muokkaa @ACH-silmukkaa

Listemme lisäyksen ansiosta meidän on muutettava "@ACH"-silmukka sisällyttämään työkalun arvo ('$ nimi'). Voimme sitten tuottaa tämän nimen "ennen pseudo" -elementin sisältöä painikkeillamme. 

 @each $ Icon, $ nimi, $ Unicode,
  $ icon-tausta $ icon-lista {
  ...
  .social__icon - # {$ icon} {
  ...
  & amp; :: Ennen {
  Sisältö: '# {$ nimi}';
  }
  }}

20. Tyyli ennen pseudo-elementtiä

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

Olemme lisänneet joitain perustyylejä työkaluihin uudelleen lisäämällä siirtymiä animoimaan ne paikalleen

Nyt meillä on jokaisen ruudulla näkyvän elementin nimi, jonka meidän on tunnustettava elementti, lisäämällä taustaväri, pehmuste ja muut muotoiluelementit - sekä elementin sijoittaminen ja niiden asettaminen siirtymään ja muokkaamalla läpinäkymättömyyttä ja ylimpiä arvoja vuorovaikutuksessa . 

 & amp; :: Ennen {...
  Top: -3.5em;
  Opasiteetti: 0;
  siirtyminen:
  Top 250ms Lineaarinen, Opacity 150ms Lineaariset 150ms;
}
& amp;: Hover, ... {...
  & amp; :: Ennen {
  Opasiteetti: 1;
  Top: -2.5em; }
}

21. Tyyli Pseudo-elementin jälkeen

Käytämme CSS Triangles Työkalujen pohjan luominen - sijoittamalla ensin elementti, joka on valmis siirtymään - siirtämällä läpinäkyvyys ja ylimmät arvot eri ajoituksissa.

Lisäämällä viiveen saamme animaation, joka koostuu työkalupään häipymistä ja siirtymässä paikalleen. 

 & amp; :: {...
  Top: -1.9em;
  Opasiteetti: 0;
  siirtyminen:
  Top 250ms Lineaarinen, Opacity 150ms Lineaariset 150ms;
}
& amp;: Hover, ... {...
  & amp; :: {
  Opasiteetti: 1;
  Top: -0.9em; }
}

Tutorialisten vaiheiden koodien kokoelma löytyy tässä .

Tämä artikkeli ilmestyi alun perin Web Designer Magazine -asiakirjassa 264. Osta se täällä .

Lue lisää:

  • Mikä on sass?
  • 8 Codepenin ominaisuudet Et tiennyt
  • 5 Vihjeitä Super-Fast CSS: lle

Miten tehdään - Suosituimmat artikkelit

Kuinka kääntää kerros Photoshopissa: täydellinen opas

Miten tehdään Sep 13, 2025

Nähdä kaksinkertainen? Tämä kuva on käännetty ja sekoitettu alkuperäiseen (Kuva luotto: tulevaisuus) ..

Merkkilevyt 3D-modellereille: 15 Top Vinkkejä

Miten tehdään Sep 13, 2025

(Kuva luotto: Dahlia Khodur) Merkkilevyt ovat päivän järjestys tässä opetusohjelmassa, joka kattaa tämän 3D-mo..

Kuvan kokoaminen Photoshopissa

Miten tehdään Sep 13, 2025

Tietäen, miten kuvion muokkaaminen Photoshopissa on perustavanlaatuinen taito suunnittelijoille. Olipa ladataan kuva verkkoon ta..

Kuinka luoda 3D-ihmissusi epärealistisessa moottorissa

Miten tehdään Sep 13, 2025

Tämän ihmissunan käsite, malli, rakenne ja materiaali asetukset - joka luotiin Kunoichille, varkain-suuntautunut peli, joka sijaitsee fantasian maailmassa - valmistui kokonaan Unreal Engin..

Tee realistiset 3D-hiukset ja turkikset 3DS max ja V-Ray

Miten tehdään Sep 13, 2025

Älä unohda Vertex 2018 , Debyyttitapahtuma CG-yhteisölle. Pakattu inspiroivia keskuste..

Kuinka maalata unelmaista fantasiametsää kohtaus

Miten tehdään Sep 13, 2025

1800-luvulla Rococo-maalarit käytti mielikuvitusta, unelmoista paletteja, romanttista tunnelmaa ja vilkas harjatyötä luomaan i..

Rakenna verkkokauppasivusto tyhjästä

Miten tehdään Sep 13, 2025

Ecommerce on tullut niin suosittu viime vuosina, nyt on vaikea kuvitella tulevaisuutta ilman sitä. Internetin voima on tehnyt yh..

Luo itse muotokuva vain 4 väriä

Miten tehdään Sep 13, 2025

Itse muotokuva on yksi palkitsevimmista haasteista taiteilija voi yrittää. Koska tiedämme omien kasvojen maisemat paremmin, et..

Luokat