Modernia CSS:ia Sassilla – Käytännön opas

CSS:n käyttö on huomattavasti tehokkaampaa CSS-esikäsittelijöiden avulla. Mitä nämä esikäsittelijät ovat, mitkä vaihtoehdot ovat olemassa ja miksi valinta kohdistui Sass:iin, selviää tästä videosta.

Ennen kuin Sassia voidaan käyttää, sen tulee olla asennettuna. Ja edellytyksenä tälle on Ruby. Molemmat - eli Rubyn ja Sassn asennus - näytetään tässä videossa. Tämän jälkeen voit heti testata, onko Sass-asennus todella onnistunut.

Sass-tiedostot on muunnettava CSS-tiedostoiksi, jotta ne ovat todella käyttökelpoisia. Kiitos Watch-komennon, voitte helposti havaita muutokset yksittäisissä tiedostoissa tai koko kansioissa.

@import-kohdalla voit tuoda ja yhdistää SCSS-tiedostoja. Mitä kaikkea tämä liittyy tiedostonimen etuliitteeseen, on yksi tämän videon näkökulma.

Sassissa on mahdollisuus määritellä muuttujia. Tämä konsepti ei ole perinteisessä CSS:ssä käytettävissä, mutta Sassissa se on nerokas keino tehokkaalle tyylitiedostojen kehittämiselle.

Kiitos sisennyksen, Sassin syntaksi voidaan pitää huomattavasti siistimpänä kuin CSS:ssä yleensä. Sisäkkäisyys auttaa myös tekemään koodista huomattavasti selkeämpää.

Käyttämällä @extendia voit välittää yhden CSS-ominaisuuksien ryhmän yhdestä toiseen valitsimeen. Tämä auttaa myös pitämään Sass-tiedostot siisteinä.

Paikkatieto-ohjain mahdollistaa moduulien määrityksen. Tämä modulaarisuus mahdollistaa Sass-syntaksin jakamisen loogisiin lohkoihin, jotka voidaan sisällyttää eri paikkoihin.

Mixin-funktiot ovat tapoja, joiden avulla työprosessit esimerkiksi voidaan selkeästi yksinkertaistaa. Tässä videossa näytetään, miten voitte määritellä omia mixinejä ja lopulta käyttää niitä.

Videossa käsittelemänne selektorilla voitte käyttää elementin vanhempielementtiin. Tätä selektoria ei CSS:ssä tunnetusti ole, ja se tarjoaa siksi valtavan lisäarvon.

Sass mahdollistaa for-silmukoiden käytön. Tämä toimii Sassissa hyvin yksinkertaisesti ja sitä voidaan esimerkiksi käyttää oman ruudukkojärjestelmän määrittämiseen.

Sassissa voidaan käyttää myös Each- ja While-silmukoita For-silmukoiden lisäksi. Kuinka tämä voidaan hyödyntää automatisoinnissa, näytetään tässä videossa.

Ohjelmointikielissä kuten PHP ja JavaScript on mahdollista reagoida erilaisiin tapahtumiin if- ja else-lauseiden avulla. Tällaista on itse asiassa myös Sassissa. Kuinka tämä voidaan hyödyntää, näytetään tässä videossa.

Te voitte laskea Sassilla. Se on esimerkiksi kätevää fonttikokojen määrittelyssä. Vastaavien operaattorien avulla voit myös rakentaa oman yksilöllisen ruudukkosi.

Tietenkin Sassissa voidaan määrittää värejä. Sass kuitenkin menee tällä alueella selkeästi pidemmälle kuin perinteinen CSS. Kiitos vastaavien toimintojen, esimerkiksi väriä on helppo muokata.

Compass-kehyksen avulla Sassin mahdollisuudet laajenevat vieläkin enemmän. Tässä ensimmäisessä videossa näytetään, miten voitte asentaa ja käyttää Compassia.

Compassin projektisivusto on keskeinen tiedonlähde, kun työskennellään tämän kehyksen parissa. Näytän teille, miten voitte työskennellä Compassin CSS3-ominaisuuksien avulla sen dokumentaation avulla.

Esimerkki osoittaa, kuinka helposti asiat voidaan toteuttaa Compassilla. Sarjan lopussa tarkastellaan myös vaihtoehtoista Sass-kehykstä. Susy tarjoaa siromman Grid-järjestelmän.