Núna er ég viss um að þú hafir heyrt um Sass og hvernig "Þú þarft virkilega að byrja að nota það!"
Að læra nýtt tól getur sogið og að finna tíma til að gera það er næstum ómögulegt en stundum kemur tól sem breytir iðnaði okkar og er of gott til að hunsa.
Þar sem vefsíðum okkar og forritum verða flóknari verða stíllblöðin þín stærri og erfiðara að viðhalda. CSS preprocessors eins og Sass hjálpa með því að halda stílblöðunum þínum nákvæmar og leyfa okkur að breyta númerinu okkar á meðan að bjóða upp á heilan hóp af eiginleikum sem ekki eru tiltækar í reglulegu CSS.
Þessir auka eiginleikar gera þeim líka gaman að nota! Nú hefur þú séð eitthvað sem lítur svona út:
$i: 6;@while $i > 0 {.item-#{$i} {breidd: 2em * $ i; } $ i: $ i - 2;} // http://sass-lang.com/documentation/file.SASS_REFERENCE.html#_11
og hugsaði, "Whatttttttttttt? Takk, en ég mun halda reglulega OSS minn. "
Ég viðurkenni, það lítur út fyrir að vera erfitt og sumir gera eitthvað mjög brjálað, flókið efni með Sass en ég er hér til að segja þér að einhver geti byrjað að nota það og hagnaðurinn sem þú færð á fyrsta degi mun gera þig Sass trúaðan.
Getting Sass sett upp fyrir verkefni er svolítið utan umfang þessarar greinar en uppsetningu er tiltölulega auðvelt og Sass vefsíðan hefur leiðbeiningar fyrir Linux, Mac eða tölvu. The kaldur hlutur er, þegar það er sett upp, getur þú tekið hvaða CSS skrá þú hefur og endurnefna það .scss gera það það Sass skrá.
Öll rétt sniðin CSS er gild Sass!
Þetta þýðir að þú getur byrjað að nota Sass meðan þú heldur áfram að skrifa stíll þinn eins og þú hefur alltaf, hægt að fella inn fleiri möguleika þar sem þægindi þín aukast. Það er rétt fólk, bara sama ol '. sama ol 'en hér eru fimm frábærar hagnaður sem þú hefur nú til ráðstöfunar:
Hver er þessi aðalhausarlitur aftur? Hvernig skrifar ég þennan leturgerð? Hversu oft hefur þú verið að skrifa CSS og þurfti að leita í gegnum fyrri stíl þína til að meta eða þurfti að brjóta út litaskiptaanninn, enn og aftur, til að komast að því að hátíðir litur?
Sass býður upp á breytur sem leið til að geyma upplýsingar sem þú vilt endurnýta í gegnum stílblað þitt. Nú getur þú geymt það lit gildi eða langur letur stafla sem eitthvað auðvelt að muna. Leiðin sem þú lýsir breytu er með dollara skilti $ fylgt eftir með nafni. Þetta nafn getur verið það sem þú vilt að það sé. Þá skrifar þú ristill : fylgt eftir með gildi og hálf-ristill ; :
$mainFont: "Helvetica Neue", Arial, sans-serif;$mainColor: #CC6699;
Nú ef þú vilt nota eitt af þessum gildum geturðu bara notað breytu í staðinn.
.mySelector { font-family: $mainFont; color: $mainColor; }
Ógnvekjandi, ekki satt? Þessi eiginleiki einn, gerir það þess virði að setja upp þar sem það sparar svo miklum tíma þegar þú skrifar CSS. Það er svo frábært að það muni líklega leiða inn í CSS sérstakur en hver veit hvenær við munum geta notað það? Til hamingju með okkur, við Sass, við þurfum ekki að bíða.
Nú ertu kannski að segja við sjálfan þig "CSS hefur @import, það er ekki svalt" og þú myndir vera rétt en CSS og Sass útgáfur eru mismunandi á verulegan hátt. Í venjulegum CSS @import dregur í aðra blöð í stíl en það gerir þetta með því að gera aðra HTTP beiðni, eitthvað sem við viljum yfirleitt að forðast. Af þessum sökum getur þú ekki einu sinni notað @import áður. Sass, hins vegar, er forvinnari (áhersla á fyrirfram) sem mun draga í þá skrá áður en hann samþykkir CSS.
Niðurstaðan er ein CSS síðu sem er meðhöndluð með einum HTTP beiðni. Hvað þetta þýðir er að þú getur brotið upp tölvuna þína í smærri, viðhaldslegan klumpur en ennþá aðeins að birta eina síðu í vafrann. Þarftu að laga textann á hnappinn? Ekki fleiri skimming stíl blöð að leita að viðeigandi hnappur stíl. Bara opnaðu hnappinn þinn hluta og gerðu breytingarnar.
Hvað er að hluta til? Bara hvað þeir hljóma eins. Þau eru hluti Sass skrár sem innihalda litla sneiðar af CSS sem þú getur tekið með í öðrum Sass skrám. Þeir eru nefndir með því að nota leiðandi undirstrik sem á eftir er nafn. _myFile.scss . Undirstrikið gerir Sass grein fyrir því að skráin sé aðeins hluti skrá og að hún ætti ekki að vera safnað saman í CSS. Til að flytja inn þessa hluta þarftu bara að bæta @import við skrána eins og svo:
@import 'partials/myPartial';
Svo er ég að flytja _myPartial.scss sem er staðsett í möppu sem heitir hluta. Þú þarft ekki að innihalda undirstrikið eða skráarsniðið. Sass er klár nóg til að vita hvaða skrá þú átt við. Notkun hluta gerir okkur kleift að móta kóða okkar, gera það meira flytjanlegt og auðveldara að viðhalda.
Sass færir störf meðfram CSS aðila. Ég veit ekki allir eru forritari og hugmyndin um virka getur verið tad yfir höfuðið en ekki hafa áhyggjur, margir bæta við tonn af gagnlegum eiginleikum en ekki vera of flókið. Eins og langt eins og litir, þá eru nokkrir gagnlegar sjálfur til að vinna þau en þrír standa út eins og ógnvekjandi, hagstæður hagnaður fyrir fólk sem byrjar bara. Skulum líta á hvernig við notum þau.
//syntax lighten($color, $amount) darken($color, $amount) rgba($color, $alpha)
Setningafræði er frekar beint fram á við. Í þremur aðgerðum hér að ofan sjáum við að við höfum tvö rök fyrir hvern. Fyrsta er liturinn sem við viljum vinna. Þetta getur verið hálffaldastig, RGB eða hvaða litasnið sem er rétt CSS. Það getur jafnvel verið breytilegt. Annað er sú upphæð sem við viljum breyta þeim lit með. Gera 10% dökkari, létta um 5%, Stilla alfa í 0,6. Niðurstaðan af þessari aðgerð er gildið sem er sett í samanlagð CSS. Svo niður fyrir neðan sjáum við störf okkar í vinnunni
//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;}Vonandi geturðu nú þegar séð hvernig þetta gæti verið gagnlegt. Það eru tugi leiðir til að nýta þessar þrjár aðgerðir til að bæta við nokkuð flottum litamynstri og hægt er að nota hvar sem lit gildi myndi venjulega fara. Þessir þrír eru bara toppurinn af ísjakanum. Það eru nóg fleiri litaviðgerðir og margar skapandi leiðir sem hægt er að nota.
Sumir hlutir í CSS eru svolítið leiðinlegt að skrifa. Mixins gera hópa af CSS yfirlýsingum sem við getum endurnýtt á síðuna okkar. CSS3 stíll sem krefst seljanda forskeyta er fullkomið dæmi um hvenær á að nota mixin. Í stað þess að slá inn sömu eignir aftur og aftur skrifum við mixin einu sinni og þá hringjum sem blanda hvenær sem við viljum nota það. Til að lýsa blanda við notum við @mixin leitarorð. Við gefum því nafni og beitt stíll okkar á milli krullufestingar eins og svo: @mixin box-sizing { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
Rök geta jafnvel farið fram í mixin til að gera það sveigjanlegt. Til að nota mixin okkar notum við bara @include leitarorð.
//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;}
Eins og þú sérð í dæminu hér að ofan, kallarðu okkar blanda við @include fylgt eftir með nafn mixin þá allir rök innan sviga. Hugsaðu um hversu mikinn tíma þetta mun spara þér. Afhverju notar ekki allir þetta?
Þessi verkfæri voru frábær en ég hef vistað það besta fyrir síðasta. @extend er einn af gagnlegur lögun sem gerir okkur kleift að deila sett af CSS eiginleikum frá einum val til annars. Hugsaðu um par af hnöppum, eins og að samþykkja og hafna hnappi á vinnustað. Þar sem þeir eru báðir hnappar munu þeir líklega deila flestum sömu stíl en hnignunarhnappurinn mun hafa rauttan bakgrunn til að gera það standa út. Með Sass skrifum við sjálfgefin stíll fyrir alla hnappa og þá "framlengja" þessar stafir á hnitaknappinn þar sem við myndum bæta við rauðu bakgrunni.
.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;}Maður, hversu ógnvekjandi er það að þurfa ekki að endurtaka þig? Þetta stuðlar ekki aðeins að því að stíll okkar verði mótað en það dregur úr hættu á að stíll sé af hnappi í hnappinn. Þetta er gríðarlegur tími spara vinna! Margfalda þetta fyrir allar stíll vefsvæðisins og við höfum verulega minni tímaramma til að skrifa CSS.
Heck, með allan tímann sem við erum að spara, gætum við kannski lært meira flókna þætti Sass.
Ég vona að ég hafi sannfært þig um að gefa þetta frábæra tól skot og sýndu nokkrar aðgerðir sem gætu bætt framleiðni þína strax. Sannleikurinn er að ég gæti skrifað þessa grein aftur á morgun og hefur fimm fleiri mjög snyrtilegar aðgerðir til að deila. Það er bara það frábært! Sass (og aðrir preprocessors) eru hérna til að vera svo gera sjálfan þig greiða og byrja að nota það. Fyrir þá sem hafa áhuga á að finna út fleiri kíkja á þessar auðlindir á Twitter og á vefnum:
Twits:
Vefsíður:
Og ef þú ert í Suður-Flórída Tri-sýsla svæði komdu með okkur á Suður-Flórída Sass Meetup .