Yksinkertainen ja helppo opas ymmärtämään Sassia
Aika sitten Thoriq Firdaus kirjoitti suuren artikkelin Sassin aloittamisesta, joka osoitti, miten voit asentaa ja käyttää tätä erittäin hyödyllistä CSS-esikäsittelijän kieltä (haluat ehkä tarkistaa sen, tiedätte, että aloitat).
Tässä artikkelissa ajattelin antaa sinulle hieman enemmän tietoa siitä, mitä voit tehdä Sassin kanssa ja miten kehittäjät käyttävät sitä joka päivä luomaan paremman ja modulaarisen CSS-koodin. Siirry eteenpäin haluamaasi kohtaan:
- Kaupan työkalut
- muuttujat
- Pesiä
- Sääntöjen laajentaminen
- Mixins
- Placeholder -valitsijat
- toiminnot
- tehtävät
Kaupan työkalut
Thoriq näytti, miten voit käyttää Sassia komentoriviltä käyttämällä sass - katsella komento.
Jos haluat käyttää GUI-työkaluja, voit mennä henkilökohtaisen suosikkisovellukseni kanssa, Codekit, web-kehitystyökalu Sassin kääntämiseen, yhdistämiseen, automaattiseen korjaukseen ja paljon muuta. Prepros on toinen erittäin kykenevä sovellus, jota voidaan käyttää kaikissa järjestelmissä. Molemmat ovat maksetut sovellukset mutta ne ovat sen arvoista, jos käytät niitä pitkällä aikavälillä.
Jos haluat vain kokeilla Sassia maksamatta mitään voit käyttää terminaalia, tai Koalaa (täällä meidän arvosteluamme), ilmaista monipuolista, monipuolista, monipuolista sovellusta, joka voi pitää perustan palkkio-osuuksia vastaan.
muuttujat
Yksi ensimmäisistä asioista, jotka sinun täytyy pään ympärillä on, ovat muuttujia. Jos tulet PHP: stä tai muusta vastaavasta koodauskielen taustasta, se on sinulle toinen luonne. Muuttujat ovat tallennetaan uudelleenkäytettäviä tietoja, kuten väriarvo, esimerkiksi:
$ Prime_color: # 666666; . painike väri: $ ensisijainen_väri; .merkittävä väri: $ pirmin_väri;
Tämä ei ehkä näytä olevan hyödyllistä täällä, mutta kuvittele, että sinulla on 3000 riviä koodia. Jos värimallisi muuttuu, sinun on korvattava jokainen väriarvo CSS: ssä. Sassilla voitte vain muuttaa arvoa n $ primary_color muuttuja ja tehdä sen kanssa.
Muuttujia käytetään tallentaa kirjasinten nimiä, kokoja, värejä ja muita tietoja. Suurempien projektien kohdalla kannattaa verrata kaikki muuttujat erilliseen tiedostoon (tarkastelemme, miten tämä tehdään pian). Tämän avulla voit tehdä koko projektisi värin ja muuttaa fontteja ja muita keskeisiä näkökohtia koskematta todellisia CSS-sääntöjä. Sinun tarvitsee vain muuttaa joitakin muuttujia.
Pesiä
Toinen perusominaisuus Sass antaa sinulle kyky pesää sääntöjä. Oletetaan, että rakennat navigointivalikon. Sinulla on nav elementti, joka sisältää järjestämättömän luettelon, luetteloi kohteita ja linkkejä. CSS: ssä saatat tehdä jotain tältä:
#header nav / * Navigointialueen säännöt * / #header nav ul / * Valikon säännöt * / #header nav li / * Listatuotteiden säännöt * / #header nav a / * Säännöt linkeille * /
Valitsimissa toistamme paljon. Jos elementeillä on yhteisiä juuria, voimme käyttää pesimistä kirjoita säännöt paljon puhtaammin.
Näin yllä mainittu koodi voi näyttää Sassissa:
#header nav / * Navigointialueen säännöt * / ul / * Valikon * / li / * säännöt luettelorakenteille * / a / * Linkkien säännöt * /
Peseminen on erittäin hyödyllistä, koska se on tekee tyylisivuista (paljon) luettavampia. Käyttämällä pesimistä ja sopivaa syvennystä voit saavuttaa erittäin luettavat koodirakenteet, vaikka sinulla on kohtuullinen määrä koodia.
Yksi pesimisen haittapuoli on se, että se voi johtaa tarpeettomaan spesifisyyteen. Edellä olevassa esimerkissä olen viitannut linkkeihin #header nav a. Voit myös käyttää #header nav ul li a mikä olisi luultavasti liikaa.
Sassissa on paljon helpompaa olla hyvin erityinen, koska sinun tarvitsee vain sijoittaa säännöt. Seuraava on paljon vähemmän luettavissa ja varsin erityinen.
#header nav / * Nav-alueen säännöt * / ul / * Valikon * / li-säännöt / * Listan kohteiden säännöt * / a / * Linkkien säännöt * /
Sääntöjen laajentaminen
Laajentaminen on tuttua, jos olet työskennellyt objektorientoitujen kielien kanssa. Se on parhaiten ymmärrettävissä esimerkin avulla, luodaan 3 painiketta, jotka ovat toisiaan pieniä muunnelmia.
.painike näyttö: inline-block; väri: # 000; tausta: # 333; border-säde: 4PX; pehmuste: 8px 11px; .painike-ensisijainen @extend .button; tausta: # 0091C2 .button-small @extend .button; fontti-koko: 0.9em; pehmuste: 3px 8px;
.painike-ensisijainen ja .painike-pieni luokkien kaikki laajentaa .nappi mikä tarkoittaa, että he ottavat kaikki sen ominaisuudet ja määrittelevät sitten oman.
Tämä on erittäin hyödyllistä monissa tilanteissa, joissa elementin muunnelmia voidaan käyttää. Viestit (hälytys / menestys / virhe), painikkeet (värit, koot), valikkotyypit ja niin edelleen voisivat käyttää laajennustoimintoa hyvään CSS-tehokkuuteen.
Yksi laajennuksen varoitus on, että ne eivät toimi mediakyselyissä kuten odotat. Tämä on hieman edistyneempi, mutta voit lukea kaiken tästä käyttäytymisestä kohdealueiden valitsijoiden ymmärtämisessä - paikanvaraajien valitsijat ovat erityisiä laajennuksia, joista puhumme pian.
Mixins
Sekoittimet ovat toinen esiprosessorien käyttäjien suosikkiominaisuus. Mixins ovat uudelleenkäytettäviä sääntöjä - sopivat täydellisesti myyjäkohtaisiin sääntöihin tai pitkien CSS-sääntöjen lyhentämiseen.
Miten luodaan siirtymäsääntö hover-elementeille:
@mxing hover-effect -webkit-siirtyminen: taustaväri 200ms; -moz-siirtyminen: taustaväri 200ms; -o-siirtymä: taustaväri 200ms; siirtymä: taustaväri 200ms; a @include hover-effect; . painike @ sisällyttää hover-effect;
Mixinin avulla voit myös käyttää muuttujia määritellä sekoittimen arvot. Voisimme kirjoittaa edellä olevan esimerkin anna meille määräysvalta siirtymisajankohdasta. Saatamme haluta, että painikkeet siirtyvät esimerkiksi pienemmälle hitaammalle.
@mixin hover-effect ($ speed) -webkit-siirtyminen: taustaväri $ speed; -moz-siirtyminen: taustaväri $ speed; -o-siirtyminen: taustaväri $ speed; siirtymä: taustaväri $ speed; a @include hover-effect (200ms); .painike @ sisällyttää hover-effect (300ms);
Placeholder -valitsijat
Sass 3.2: n kanssa otettiin käyttöön paikannusvalitsimet ja ratkaistiin ongelma, joka saattoi aiheuttaa hieman paisuntaa luotuun CSS-koodiin. Katsokaa tätä koodia, joka luo virheilmoituksia:
.viesti font-size: 1.1em; padding: 11px; border-width: 1px; border-style: solid; .viestin vaara @extend .message; tausta: # C20030; väri: #fff; raja-väri: # A8002A; .message-success @extend .message; tausta: # 7EA800; väri: #fff; raja-väri: # 6B8F00;
On todennäköisintä, että viestiluokkaa ei koskaan käytetä HTML: ssä: se on ollut luotu laajennettavaksi, jota ei käytetä sellaisenaan. Tämä aiheuttaa hiukan paisuntaa generoidussa CSS: ssä. Jotta koodisi olisi tehokkaampi, voit käyttää paikkamerkkivalitsinta, joka on merkitty prosenttimerkillä:
% message font-size: 1.1em; padding: 11px; border-width: 1px; border-style: solid; .viestin vaara @extend% -painike; tausta: # C20030; väri: #fff; raja-väri: # A8002A; .message-success @extend% -painike; tausta: # 7EA800; väri: #fff; raja-väri: # 6D9700;
Tässä vaiheessa saatat ihmetellä, mikä ero on laajennusten ja sekoittimien välillä. Jos käytät paikkamerkkiä, ne käyttäytyvät kuin parametrien vähemmän sekoitus. Tämä on totta, mutta CSS: n tulos eroaa. Ero on siinä mixins kaksinkertaistaa säännöt sillä aikaa paikanvaraajat varmistavat, että samat säännöt jakavat valitsijat, tuloksena on vähemmän CSS: ää.
toiminnot
Täällä on vaikea vastustaa puntaa, mutta pidättäydyn kaikista lääketieteellisistä vitseistä. Operaattorit antavat sinulle mahdollisuuden tehdä matematiikkaa CSS-koodissasi ja ne voivat olla melko hyödyllisiä. Sass-oppaan esimerkki sopii mainiosti tämän:
.säiliö leveys: 100%; artikkeli float: vasen; leveys: 600px / 960px * 100%; aside float: right; leveys: 300px / 960px * 100%;
Yllä oleva esimerkki luo 960px-pohjaisen verkkojärjestelmän, jossa on mahdollisimman vähän vaivaa. Se kääntyy hyvin seuraavaan CSS: iin:
.säiliö leveys: 100%; artikkeli float: vasen; leveys: 62,5%; aside float: right; leveys: 31,25%;
Yksi suuri käyttö, jota löydän toiminnoille, on värien sekoittaminen. Jos tarkastelet Sassin menestysviestiä, ei ole selvää, että taustan ja reunan värillä on jonkinlainen suhde. Vähentämällä harmaasävyä voimme tummentaa väriä, jolloin suhde näkyy:
$ primääri: # 7EA800; .message-success @extend% -painike; tausta: $ primääri; väri: #fff; reunaväri: $ primääri - # 111;
Vaaleampi vähennetty väri, sitä tummempi tulos on. Kevyempi lisätty väri, kevyempi tuloksena oleva sävy.
tehtävät
Käytettävissä on monia toimintoja: Numerotoiminnot, merkkijonotoiminnot, luettelotoiminnot, väritoiminnot ja paljon muuta. Tutustu kehittäjän dokumentaation pitkään luetteloon. Katson pari täällä vain osoittamaan teille, miten he toimivat.
keventää ja tummentaa toimintoa voidaan käyttää värin vaaleuden muuttamiseen. Tämä on parempi kuin sävyjen vähentäminen, se tekee kaiken entistä modulaarisemmaksi ja ilmeisemmäksi. Tutustu edelliseen esimerkkimme pimeämistoimintoon.
$ primääri: # 7EA800; .message-success @extend% -painike; tausta: $ primääri; väri: #fff; reunaväri: tummenee ($ primääri, 5);
Toisen argumentin funktio on vaadittavan pimeyden prosenttiosuus. Kaikilla toiminnoilla on parametrit; tutustu asiakirjoihin nähdäksesi, mitä he ovat! Tässä muutamia muita itsestään selviä väritoimintoja: desaturate, kyllästää, inverttisokeri, harmaasävy.
katosta funktio, kuten PHP: ssä, palauttaa seuraavan pyöristetyn luvun. Tätä voidaan käyttää laskettaessa sarakkeen leveyksiä tai jos et halua käyttää paljon desimaaleja viimeisessä CSS: ssä.
.otsikko font-size: ceil ($ title_size * 1.3314);
Yleiskatsaus
Sassin ominaisuudet tarjoavat meille suuren voiman kirjoittaa parempaa CSS: ää pienemmällä vaivalla. Sekoittimien, laajennusten, toimintojen ja muuttujien oikea käyttö tekee tyylitaulukoistamme entistä ylläpidettävämpiä, luettavampia ja helpompi kirjoittaa.
Jos olet kiinnostunut toisesta vastaavasta CSS-esiprosessorista, suosittelen tarkastelemaan LESSiä (tai tutustu aloittelijan oppaaseen) - taustalla oleva pääperuste on paljon sama!
