Lihtne ja lihtne juhend Sassi mõistmiseks
Mõni aeg tagasi kirjutas Thoriq Firdaus Sassiga alustamise kohta suurepärase artikli, mis näitas teile, kuidas seda väga kasulikku CSS eelprotsessori keelt installida ja kasutada (võiksite seda kontrollida, tead, et alustada).
Selles artiklis arvasin, et annan teile natuke rohkem teavet selle kohta, mida saate Sassiga teha ja kuidas arendajad seda iga päev kasutavad, et luua parem ja moodulisem CSS-kood. Liigu edasi soovitud sektsiooni juurde:
- Kaubanduse vahendid
- Muutujad
- Pesitsemine
- Reeglite laiendamine
- Segud
- Placeholder Selectors
- Toimingud
- Funktsioonid
Kaubanduse vahendid
Thoriq näitas, kuidas Sassit käsurealt kasutada sass - vaadata käsk.
Kui eelistate GUI tööriistu, võite minna koos oma isikliku lemmikrakendusega, Codekitiga, veebiarendustööriistaga Sassi kompileerimiseks, konkateniseerimiseks, automaatse taastamise ja palju muudeks. Prepros on teine väga võimekas rakendus, mida saab kasutada kõikides süsteemides. Mõlemad on makstud rakendusi kuid on seda väärt, kui kasutate neid pikas perspektiivis.
Kui sa tahad Sassit proovida maksmata midagi saate kasutada terminali või Koala (siin meie ülevaadet), tasuta platvormiülest funktsioonirikast rakendust, mis suudab oma aluse vastu lisatasude vastu.
Muutujad
Üks esimesi asju, mida peate pea ümber keerama, on muutujad. Kui te tulete PHP-st või mõnest muust sarnasest kodeerimiskeelest, on see Teile teine. Muutujad on mõeldud bittide ja korduvkasutatavate andmete salvestamine, näiteks värvi väärtus:
$ pirminne_värv: # 666666; nupp värv: $ primer_color; .vajalik värv: $ pirminis_värv;
See ei pruugi siin nii kasulik olla, vaid kujutada ette 3000 koodi rida. Kui teie värvilahendus muutub, tuleb iga värviväärtus CSS-is asendada. Sassiga saate lihtsalt väärtust muuta selle $ pirminne_värv muutuv ja seda teha.
Kasutatakse muutujaid fontide nimede, suuruste, värvide ja hulga muude andmete salvestamine. Suuremate projektide puhul väärib me kõik teie muutujad eraldi failina (vaatame, kuidas seda varsti tehakse). See võimaldab teil kogu oma projekti värvitada ja muuta fonte ja muid olulisi aspekte tegelikke CSS-reegleid puudutamata. Kõik, mida pead tegema, on mõne muutuja muutmine.
Pesitsemine
Teine põhiline omadus Sass annab teile võime pesa reegleid. Oletame, et te ehitate navigeerimismenüüd. Teil on nav element, mis sisaldab järjestamata nimekirja, loendiüksusi ja linke. CSS-is võite teha midagi sellist:
#header nav / * Navigatsioonipiirkonna reeglid * / #header nav ul / * Menüü reeglid * / #header nav li / * Reeglid loendiüksuste kohta * / #header nav a / * reeglid linkide jaoks * /
Valijates kordame palju. Kui elementidel on ühised juured, saame kasutada pesa kirjutage meie reeglid palju puhtamaks.
Järgnevalt näete, kuidas ülaltoodud kood Sassis näeb:
#header nav / * Reeglid navigatsioonipiirkonnale * / ul / * Menüü reeglid * / li / * Reeglid loendiüksuste kohta * / a / * linkide reeglid * /
Pesemine on äärmiselt kasulik, sest see muudab stiililehed (palju) loetavamaks. Kasutades pesitsemist koos sobiva süvendiga saate saavutada väga loetavad koodistruktuurid, isegi kui teil on õiglane summa kood.
Üks pesitsuse puudus on see, et see on võimalik põhjustab tarbetut spetsiifilisust. Ülaltoodud näites olen viidanud linkidele #header nav a. Võite kasutada ka #header nav ul li a mis oleks ilmselt liiga palju.
Sassis on palju lihtsam olla väga spetsiifiline, sest kõik, mida pead tegema, on reeglite pesemine. Järgnev on palju vähem loetav ja üsna spetsiifiline.
#header nav / * Reeglid navigatsioonipiirkonna * / ul / * reeglitele menüü * / li / * reeglid loendiüksuste kohta * / a / * linkide reeglid * /
Reeglite laiendamine
Laiendamine on tuttav, kas olete töötanud objektorienteeritud keeltega. See on kõige paremini arusaadav näite kaudu, loome 3 nuppu, mis on üksteise kerged variatsioonid.
.nupp kuva: inline-block; värv: # 000; taust: # 333; raadius: 4x; polsterdus: 8px 11px; .nupp-esmane @extend .button; taust: # 0091C2 .button-small @extend .button; fondi suurus: 0.9em; polsterdus: 3px 8px;
The .nupp-esmane ja .nupp-väike klassid kõik laiendavad .nuppu klassi, mis tähendab, et nad võtavad kõik oma omadused ja määravad seejärel oma.
See on äärmiselt kasulik paljudes olukordades, kus saab kasutada elemendi variatsioone. Sõnumid (hoiatus / edu / viga), nupud (värvid, suurused), menüü tüübid ja nii edasi võivad kasutada laiendamise funktsionaalsust suure CSS-efektiivsuse jaoks.
Üks hoiatus laienemisest on see, et nad ei tööta meedia päringutes nagu te ootate. See on natuke rohkem arenenud, kuid selle käitumise kohta saate lugeda kõigest, kui mõista Placeholder Selectors - kohatäitjate valijad on eriline laiendus, millest me peagi räägime.
Segud
Mixins on teine eelprotsessorikasutajate lemmikfunktsioon. Mixins on korduvkasutatavad reeglid - sobivad müüja-spetsiifilistele eeskirjadele või lühikeste CSS-reeglite jaoks.
Kuidas luua ülemineku reegli hoverelementidele:
@mixing-efekti -webkit-üleminek: taustavärv 200ms; -moz-üleminek: taustavärv 200ms; -o-üleminek: taustavärv 200ms; üleminek: taustavärv 200ms; a @include hover-effect; . nupp @ lisage hover-efekt;
Mixins võimaldab teil kasutada ka muutujaid määratleda segmendis olevad väärtused. Me võiksime ülaltoodud näite ümber kirjutada anname meile kontrolli ülemineku täpse aja üle. Võib-olla soovime näiteks nuppude üleminekut pisut aeglasemaks.
@mixin hover-effect ($ speed) -webkit-üleminek: taustavärvi $ kiirus; -moz-üleminek: taustavärvi $ kiirus; -o-üleminek: taustavärvi $ kiirus; üleminek: taustavärv $ kiirus; a @include hover-effect (200ms); . nupp @incover hover-effect (300ms);
Placeholder Selectors
Sass 3.2-ga tutvustati platsider-selektorid ja lahendati probleem, mis võib tekitada oma genereeritud CSS-koodi veidi. Vaadake seda koodi, mis tekitab veateateid:
.teade font-size: 1.1em; polsterdus: 11px; piiri laius: 1px; piiri-stiil: tahke; .sõnumi oht @extend .message; taust: # C20030; värv: #fff; äärevärv: # A8002A; .message-success @extend .message; taust: # 7EA800; värv: #fff; äärevärv: # 6B8F00;
On väga tõenäoline, et sõnumiklassi ei kasutata meie HTML-is kunagi: see on olnud loodud laiendamiseks, mida ei kasutata. See põhjustab oma genereeritud CSS-is veidi paistetust. Koodi tõhusamaks muutmiseks saate kasutada kohatäide valijat, mis on tähistatud protsendimärgiga:
% message font-size: 1.1em; polsterdus: 11px; piiri laius: 1px; piiri-stiil: tahke; .sõnumi oht @extend% nupp; taust: # C20030; värv: #fff; äärevärv: # A8002A; .message-success @extend% nupp; taust: # 7EA800; värv: #fff; äärevärv: # 6D9700;
Selles etapis võib tekkida küsimus, milline on laienduste ja segude erinevus. Kui kasutate kohahoidjaid, käituvad nad parameetriteta. See on tõsi, kuid väljund CSS-is erineb. Erinevus on see mixins reeglite dubleerimist samal ajal kohahoidjad tagavad, et samad reeglid jagavad valijaid, tulemuseks on vähem CSS.
Toimingud
Siin on raske vastu seista, aga ma hoidun praegu meditsiinilistest naljadest. Operaatorid lubavad teil teha CSS-koodis mõningaid matemaatikaid ja neid võib olla üsna kasulik. Näide Sass juhendis on ideaalne selle näitamiseks:
.mahuti laius: 100%; artikkel float: vasakule; laius: 600px / 960px * 100%; aside float: right; laius: 300 px / 960px * 100%;
Ülaltoodud näide loob 960px baasil põhineva võrgusüsteemi minimaalse vaevaga. See kompileerib hästi järgmisele CSS-ile:
.mahuti laius: 100%; artikkel float: vasakule; laius: 62,5%; aside float: right; laius: 31,25%;
Üks suur kasutusvõimalusi on värvide segamine. Kui te vaatate Sass'i edulõnumit, siis pole selge, kas taustal ja piiril on mingisugune suhe. Halli tooni lahutamisega saame värvi tumedamaks muuta, muutes seos nähtavaks:
$ primaarne: # 7EA800; .message-success @extend% nupp; taust: $ primaarne; värv: #fff; äärevärv: $ primaarne - # 111;
Heledam lahutatud värv, seda tumedam on varjund. Mida kergem on lisatud värv, seda heledam on varjund.
Funktsioonid
Kasutamiseks on palju funktsioone: numbrifunktsioonid, stringifunktsioonid, loendifunktsioonid, värvifunktsioonid ja palju muud. Heitke pilk arendaja dokumentatsiooni pika loendisse. Ma vaatan siin paari, et näidata teile, kuidas nad töötavad.
The kergendada ja tumeneb funktsiooni saab kasutada värvi heleduse muutmiseks. See on parem kui toonide lahutamine, see muudab kõik veelgi moodulisemaks ja ilmsemaks. Vaadake meie eelmist näidet tumenemise funktsiooni abil.
$ primaarne: # 7EA800; .message-success @extend% nupp; taust: $ primaarne; värv: #fff; äärevärv: tumeneb ($ primaarne, 5);
Funktsiooni teine argument on pimeduse protsent. Kõigil funktsioonidel on parameetrid; vaadake dokumentatsiooni, et näha, mida nad on! Siin on mõned muud iseenesestmõistetavad värvifunktsioonid: desaturaat, küllastunud, inverts, halltoonid.
The ceil Funktsioon, nagu PHP-s, tagastab järgmise täisarvuni ümardatud numbri. Seda saab kasutada veergude laiuse arvutamisel või kui te ei soovi lõplikus CSS-s kasutada palju kümnendkoha.
.pealkiri font-size: ceil ($ title_size * 1.3314);
Ülevaade
Sass'i funktsioonid annavad meile suure võimsuse, et kirjutada paremat CSS-i väiksema vaevaga. Segude, laienduste, funktsioonide ja muutujate nõuetekohane kasutamine muudab meie stiilitabelid hooldatavamaks, loetavamaks ja kergemini kirjetavaks..
Kui olete huvitatud mõnest muust sarnasest CSS eelprotsessorist, siis soovitan pilk LESS'ile (või vaadake meie algaja juhendit) - aluseks olev põhisumma on palju sama!
