Moderni CSS SASS:lla

Nykyaikainen CSS Sassilla – Käytännön opas

Kieli: Saksa

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

Oletko aina ärsyyntynyt siitä, että CSS: ssä ei ole muuttujia ja silmukoita? Se on loppu! CSS-esikäsittelijät kuten Sass tarjoavat juuri tällaisia asioita. Näin CSS-koodia voidaan vihdoin generoida tehokkaasti. Tämän opetusohjelman lisäksi tarkastellaan tietysti myös laajasti suositun Compass-kehyksen vaikutusvaltaa, joka nostaa Sassin käytön uudelle tasolle. Tutustu kolmessa tunnissa Sassin ja Compassin tarjoamiin mahdollisuuksiin.

Tule Sass-mestariksi tämän kolmetuntisen videokoulutuksen ja web-kehittäjä Daniel Kochin avulla.
Määrittele muuttujat, luo omia mixin-funktioita, kokeile värejä ja numeroita ja lopuksi käytä Compassia kruunataksesi työn.
Opettele tuottamaan CSS tehokkaasti ja soveltamaan uutta tietoasi tulevia projekteja varten.

Askel askeleelta ammattimaiseen CSS-kehitykseen. Jos CSS, niin modernia ja Sassilla - Daniel Koch näyttää sinulle!

Zugriff auf alle Inhalte

In der Mitgliedschaft ab * € monatlich

oder

Inhalt in den Warenkorb

Sofort-Download nach Kauf: einmalig * €

tiedot

Käyttökelpoinen sen kanssa:
Sisältö: 3 h Videokoulutus
Lisenssi: yksityinen ja kaupallinen Käyttöoikeudet

Luokat

Verkkosuunnittelu, CMS ja kehitys

Rakkaudella luonut:

Daniel Koch

Nykyaikainen CSS Sassilla

Ilmaiseksi

Moderni CSS Sassilla - 01 Johdanto

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.

Moderni CSS Sassilla – 02 Asennus

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.

Moderni CSS käyttäen Sassia – Taitava kääntäminen

Nykyaikainen CSS Sassilla - 03 Taitava kääntäminen

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.

Nykyajan CSS Sassilla - Yhdistä 04 tiedostoa.

Moderni CSS Sassilla - 04 tiedostojen yhdistäminen

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

Nykyaikainen CSS Sassilla – 05 muuttujan määrittely ja käyttö

Modernia CSS:ää Sassilla – Määritä ja käytä 05 muuttujaa.

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.

Nykyaikainen CSS Sassilla – 06 Pesäperiaate

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ää.

Moderni CSS Sassilla - 07 Taitava periytyminen Extendin avulla

Moderni CSS Sassilla - 07 Taitava perintö Extendin avulla

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ä.

Moderni CSS Sassilla - 08 moduulia paikantimensäätäjillä.

Moderni CSS Sassilla - 08 moduulia paikkamerkkivalitsimilla.

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

Nykyaikainen CSS Sassilla - 09 määritysten määrittelyä.

Moderni CSS Sassilla – 09 mixinin määritys

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ä.

Modernia CSS:ää Sassilla - 10 Vanhemman elementin valitsin

Nykyaikainen CSS Sassilla - 10 Vanhempielementtiselektori

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.

Moderni CSS Sassin avulla - 11 automatisointi with For-silmukat

Moderni CSS Sassilla - 11 automatisointi for-silmukoilla

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.

Moderni CSS Sassilla - 12 joka- ja kunnes-silmukkaa

Moderni CSS Sassilla - 12 jokainen- ja while-silmukkaa.

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.

Moderni CSS Sassilla - 13 ratkaisevaa päätöstä if- ja else-lauseilla

Nykyaikaista CSS:ää Sassilla - 13 ratkaisevaa päätöstä if- ja else-lauseilla

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.

Nykyaikainen CSS Sassilla - 14 matemaattista operaattoria

Moderni CSS Sassilla - 14 matemaattista operaattoria

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

Nykyaikaista CSS:ää Sassilla – 15 värileikkiä

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.

Aikakaudenmukainen CSS Sassilla – 16 Compass

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.

Moderni CSS Sassilla – 17 Compass ja CSS3

Nykyaikainen CSS Sassilla - 17 Compass ja CSS3

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.

Nykyaikaista CSS:ää Sassilla – 18 Compass-toiminnossa ja vilkaisu Susyyn

Moderni CSS Sassilla - 18 Compassin Bullet-toimintoa ja vilkaisu Susyyn

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

Yksityiskohdat sisällöstä

CSS tehokkaasti – Sassilla: aloita käytännön tutoriaali
Sass on mullistanut CSS-kehityksen, koska vihdoin CSS-koodia voi kirjoittaa tehokkaasti. Kattavassa kolmen tunnin ja 18 oppitunnin oppaassa opit kaiken oleellisen aiheista Sass ja Sass Framework Compass.

Sass-kehitysympäristön asentaminen

Ennen kuin aloitat matkan CSS-tutoriaaliin Sassilla, sinun tulee suorittaa asennus. Ei syytä huoleen – se on todella helppoa. Rubya ja muutamaa komentoa komentorivillä tarvitaan, ja jo olet ylpeä Sass-kehitysympäristön omistaja. Jos olet aiemmin jättänyt Sass-asennuksen väliin, tämä opas vie sinut asennuksen vaiheet läpi askel askeleelta. Ensimmäinen testi näyttää sitten, mikä Sass-versio on asennettu.

Ensimmäiset askeleet tyypillisessä projektirakenteessa

Sitten siirrytään jo ensimmäisiin askeleisiin: Sassin käyttöönotto alkaa! Syntaksin ensimmäisen arvioinnin jälkeen käsittelet peruskieliominaisuuksia. Opit tuntemaan muuttujat, näet tyypillisen projektirakenteen ja hahmotat nopeasti Sassin logiikan.

Kehitys: Loopit & If-lausekkeet

Näiden valmistelujen jälkeen siirrytään ammattimaiseen kehitykseen: Mikä tekee Sassista niin erityisen, ovat asiat, jotka muistuttavat jo lähes aitoja käsikirjoituskieliä kuten JavaScript. Sassissa voit myös määritellä silmukoita ja käyttää If-lausekkeita. Nämä asiat ovat perusedellytys Sassissa mestarin lajissa, mixin-määrittelyssä. Ne ovat voimakkaita toimintoja, jotka helpottavat huomattavasti työskentelyä Sassilla ja lopulta siis CSS:llä.

Compass: Yksinkertaistaa työskentelyä CSS:n kanssa

Koulutuksen huipentaa Compass. Se nostaa Sass-kehityksen aivan uudelle tasolle, koska tämä Sass Framework tarjoaa lukuisia työkaluja ja toimintoja, jotka helpottavat huomattavasti työskentelyä CSS:n kanssa.

Näitä opit CSS- ja Sass-tutoriaalissa

Opi vaihe vaiheelta Sassin toiminnot, aloittaen perusteista aina ammattityökaluihin ja Compassin käyttöön. Tämän avulla saat käyttöösi kaikki nykyiset mahdollisuudet ja voit soveltaa oppimaasi suoraan käytäntöön. CSS:n kirjoittaminen ei ole koskaan ollut näin tehokasta!