Nyt olen varma, että olet kuullut Sassista ja miten "Sinun on todella käytettävä sitä!"
Uuden työkalun oppiminen voi imeä ja löytää aika aikaiseksi, on mahdotonta, mutta joskus myös työkalu, joka muuttuu toimialoittain, on liian hyvä jättää huomioimatta.
Koska web-sivut ja sovellukset ovat entistä monimutkaisempia, tyyliarkkisi ovat entistä suurempia ja vaikeampia ylläpitää. CSS-esikäsittelyohjelmat, kuten Sass-apu, pitävät tyyliarkkiensa ytimekkäästi ja antavat meille mahdollisuuden modulaarisoida koodimme tarjoamalla samalla koko joukon ominaisuuksia, joita ei ole vielä saatavilla säännöllisessä CSS: ssä.
Nämä lisäominaisuudet tekevät niistä todella hauskaa käyttää! Nyt saatat nähdä jotain, joka näyttää tältä:
$i: 6;@while $i > 0 {.item-#{$i} {leveys: 2em * $ i; } $ i: $ i - 2;} // http://sass-lang.com/documentation/file.SASS_REFERENCE.html#_11
ja ajattelin, "Whatttttttttttt? Kiitos, mutta pidän säännöllisesti CSS: n. "
Myönnän, että se näyttää pelottavalta ja jotkut ihmiset tekevät jotain todella hullua, monimutkaisia juttuja Sassin kanssa, mutta olen täällä kerrottavaa, että kuka tahansa voi alkaa käyttää sitä ja voitot, joita saatte ensimmäisenä päivänä, tekevät sinusta Sassin uskovan.
Sassin perustaminen projektille on hieman tämän artikkelin ulottuvuus, mutta asennus on suhteellisen helppoa ja Sassin verkkosivustolla on ohjeet Linuxille, Macille tai PC: lle. Järkevä asia on, kun se on asennettu, voit ottaa minkä tahansa CSS-tiedoston ja nimetä sen uudelleen .scss joten se on Sass-tiedosto.
Kaikki oikein muotoillut CSS ovat voimassa Sass!
Tämä tarkoittaa sitä, että voit aloittaa Sassin kirjoittamisen samalla, kun kirjoitat tyylillesi kuten aina, hitaasti lisäämällä lisäominaisuuksia mukavuustason kasvaessa. Se on oikea ihminen, samoin sama. sama ol ", mutta tässä on viisi mahtavia voittoja, jotka sinulla on käytettävissänne:
Mikä on pääotsikon väri uudelleen? Kuinka kirjoitan fonttipinoa? Kuinka monta kertaa olet kirjoittanut CSS: n ja joutunut etsimään aikaisempien tyylisuuttasi arvoa varten tai joutuisikin erottamaan värikuljetin, vielä kerran selvittämään heksadesimaaliväri?
Sass antaa muuttujat keinona tallentaa tietoja, joita haluat käyttää uudelleen koko tyyliarkistasi. Nyt voit tallentaa värillisen arvon tai pitkän kirjasimen kuin jotain helppoa muistaa. Tapa, jolla ilmoitat muuttujan, on dollarin merkki $ jota seuraa nimi. Tämä nimi voi olla mitä haluat sen olevan. Sitten kirjoitat kaksoispiste : jota seuraa arvo ja puolipiste ; :
$mainFont: "Helvetica Neue", Arial, sans-serif;$mainColor: #CC6699;
Nyt, jos haluat käyttää jotain näistä arvoista, voit käyttää vain muuttujaa.
.mySelector { font-family: $mainFont; color: $mainColor; }
Mahtavaa, eikö? Tämä yksi ominaisuus yksin, tekee sen kannattaa asentaa, koska se säästää niin paljon aikaa kirjoitettaessa CSS. Se on niin hienoa, että se luultavasti luo CSS: n tekniset tiedot mutta kuka tietää, milloin voimme käyttää sitä? Onneksi meille, Sassin kanssa, emme tarvitse odottaa.
Nyt voit sanoa itsellesi "CSS on @import, se ei ole niin hienoa" ja olisit oikeassa, mutta CSS- ja Sass-versiot eroavat merkittävästi. Normaalissa CSS: ssä @import vetää muissa tyyliarkeissa, mutta tekee sen tekemällä toisen HTTP-pyynnön, jota yleensä haluamme välttää. Tästä syystä et ehkä ole edes käyttänyt @importia. Sass, toisaalta, on esiprosessori (korostetaan pre), joka vetää sen tiedoston ennen kuin se kokoaa CSS: n.
Tuloksena on yksi CSS-sivu, jota käsitellään yhdellä HTTP-pyynnöllä. Tämä tarkoittaa sitä, että voit jakaa css: n pienemmiksi, entistä paremmin ylläpidettäviksi paloiksi samalla, kun palvella vain yhtä sivua selaimeen. Tarvitseeko teksti korjata painikkeella? Ei enempää kuorimista tyyliarkkeja, jotka etsivät asiaankuuluvia painikkeita. Avaa painike osittain ja tee muutokset.
Mikä on osittainen? Juuri mitä he kuulostavat. Ne ovat osittaisia Sass-tiedostoja, jotka sisältävät pieniä CSS-koodeja, joita voit sisällyttää muihin Sass-tiedostoihin. Ne on nimetty käyttämällä johtavaa alaviivaa, jota seuraa nimi. _myFile.scss . Alamerkki antaa Sassille tietää, että tiedosto on vain osittainen tiedosto ja että sitä ei saa kääntää CSS: ään. Jos haluat tuoda tämän osittaisen, sinun tarvitsee vain lisätä @import tiedostoon seuraavasti:
@import 'partials/myPartial';
Joten tuon _myPartial.scss-tiedostoja, jotka sijaitsevat kansioon nimeltä partals. Sinun ei tarvitse lisätä alaviivaa tai tiedostopääte. Sass on tarpeeksi älykäs tietääkseni minkä tiedoston olet tarkoittamassa. Osioiden käyttö antaa meille erinomaisen tavan modulaarisoida koodimme, joten se on kannettava ja helppohoitoisempi.
Sass tuo toiminnot pitkin CSS-puolueelle. En tiedä, että jokainen on ohjelmoija, ja funktiokäsite voi olla pikemminkin pään yli, mutta älä huoli, monet lisäävät monia hyödyllisiä ominaisuuksia, mutta eivät ole liian monimutkaisia. Värien osalta on useita hyödyllisiä manipuloida niitä, mutta kolme erottuvat mahtaviksi ja helppokäyttöisiksi ihmisille vain aloitusajaksi. Katsotaanpa, kuinka käytämme niitä.
//syntax lighten($color, $amount) darken($color, $amount) rgba($color, $alpha)
Syntaksi on melko suoraan eteenpäin. Näissä kolmessa toiminnossa näet, että meillä on kaksi argumenttia. Ensimmäinen on väri, jota haluamme manipuloida. Tämä voi olla heksadesimaali, RGB tai jokin värimuoto, joka on oikea CSS. Se voi olla jopa muuttuja. Toinen on määrä, jonka haluamme muokata tätä väriä. Tee 10% tummempi, Vähennä 5%, Aseta alfa 0,6. Tämän toiminnon tulos on arvo, joka asetetaan koottuun CSS: hen. Joten alhaalla näet toimintojamme työssä
//in parenthesis you can put any color value followed by the amount you want to modify it by.//lighten(#000, 10%)//darken(rgb(0,0,0), 25%)//rgba(blue, 0.6)//rgba($mainColor, 0.6)//use case$color: #333;//set color variable.myButton {background-color: rgba($color, 0.8);color: lighten($color, 65%);border: 1px solid darken($color, 5%);}//this compiles to:.myButton {background: rgba(51, 51, 51, 0.8);color: #d9d9d9;border: 1px solid #262626;}Toivottavasti voit jo nähdä, miten tämä voisi olla hyödyllinen. On olemassa kymmenkunta tapaa hyödyntää näitä kolmea toimintoa lisäämällä melko viileä värinkontrastin ja niitä voidaan käyttää missä tahansa väriarvosta normaalisti. Nämä kolme ovat vain jäävuoren kärki. On paljon enemmän väritehtäviä ja monia luovia tapoja, joilla niitä voidaan käyttää.
Jotkut asiat CSS: ssä ovat hieman tylsiä kirjoittaa. Sekoittajat tekevät CSS-ilmoitusten ryhmiä, joita voimme käyttää uudelleen koko sivustollamme. CSS3-tyylit, jotka edellyttävät myyjän etuliitteitä, ovat täydellinen esimerkki miksauksen käytöstä. Sen sijaan, että kirjoittaisimme saman ominaisuuden uudestaan ja uudestaan, kirjoitamme mixin kerran ja soita sitten mixin milloin haluamme käyttää sitä. Ilmoittaa mixin käytämme @mixin avainsana. Sitten annamme sen nimen ja sovimme tyylisi välillä kiharaiset ripustimet kuten näin: @mixin box-sizing { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
Argumentteja voidaan jopa siirtää mixiiniksi, jotta se olisi joustavampi. Käyttämällä mixin käytämme vain @include avainsana.
//declare mixin(now being passed an argument)@mixin box-sizing($boxSize) {-webkit-box-sizing: $boxSize;-moz-box-sizing: $boxSize;box-sizing: $boxSize;}//use mixin.mySelector {@include box-sizing(border-box);}//compiled to:.mySelector {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
Kuten yllä olevassa esimerkissä näet, soitamme mixiniin @include jonka jälkeen sekoituksen nimi ja sitten suluissa olevat argumentit. Ajattele kuinka paljon aikaa tämä säästää. Miksi kaikki eivät käytä tätä?
Nämä työkalut olivat suuria, mutta olen tallentanut parhaan viimeiseksi. @extend on yksi hyödyllisimmistä ominaisuuksista, joiden avulla voimme jakaa joukon CSS-ominaisuuksia yhdestä valitsimesta toiseen. Ajattele pari nappia, kuten hyväksyntä- ja hylkäyspainike modaalivaiheessa. Koska ne ovat molempia painikkeita, ne todennäköisesti jakavat useimmat saman tyylin, mutta laskupainikkeella on punainen tausta, jotta se erottuu. Sass kirjoitti kaikkien painikkeiden oletustyylit ja "laajentaa" nämä tyylejä hylkäämispainikkeelle, johon lisäsimme punaisen taustan.
.button {background: rgba($color, .8);color: lighten($color, 65%);border: 1px solid darken($color, 5%);padding: 1em;display: block;max-width: 200px;}.button-decline {@extend .button;background: red;}//compiles to.button, .button-decline {background: rgba(51, 51, 51, 0.8);color: #d9d9d9;border: 1px solid #262626;padding: 1em;display: block;max-width: 200px;}.button-decline {background: red;}Mies, kuinka mahtavaa ei tarvitse toistaa itseäsi? Tämä ei vain edistä moduulointia tyylejämme, mutta se vähentää riskiä tyylit ovat pois painikkeesta painikkeeseen. Tämä on valtava aika tallentaa voitto! Kerro tämä kaikille sivuston tyyleille ja meillä on merkittävästi lyhennetty aikataulu CSS: n kirjoittamiseen.
Heck, kun säästämme koko ajan, voimme oppia Sassin monimutkaisempia näkökohtia.
Toivottavasti olen vakuuttanut sinua antamaan tämän hämmästyttävän työkalun kuvan ja kuvitteli joitain ominaisuuksia, jotka voivat parantaa tuottavuuttasi heti. Totuus on, voisin kirjoittaa tämän artikkelin uudelleen huomenna ja saada viisi todella todella siistiä ominaisuutta jakaa. Se on vain mahtava! Sass (ja muut esiprosessorit) ovat täällä pysyäkseen, joten tee itseäsi hyväksi ja käytä sitä. Niille, jotka ovat kiinnostuneita selvittämään enemmän nämä resurssit Twitterissä ja Webissä:
twits:
webs:
Ja jos olet Etelä-Floridan tri-läänin alueella, tulkaa mukaan South Florida Sass Meetup .