Paprastas ir paprastas vadovas suprasti Sassą
Prieš kurį laiką Thoriq Firdaus parašė puikų straipsnį apie tai, kaip pradėti „Sass“, kuris parodė, kaip įdiegti ir naudoti šią labai naudingą CSS išankstinio apdorojimo kalbą (galbūt norėsite jį patikrinti, ar žinote, kad pradėtumėte).
Šiame straipsnyje aš maniau, kad suteiksiu jums šiek tiek daugiau informacijos apie tai, ką galite padaryti su „Sass“ ir kaip kūrėjai ją naudoja kiekvieną dieną, kad sukurtų geresnį ir labiau modulinį CSS kodą. Pereiti į norimą skyrių:
- Prekybos įrankiai
- Kintamieji
- Lizdavimas
- Taisyklių išplėtimas
- Mišiniai
- Vietų parinkėjų pasirinkimas
- Operacijos
- Funkcijos
Prekybos įrankiai
„Thoriq“ parodė, kaip galite naudoti „Sass“ iš komandų eilutės naudojant „ sass - laikrodis komandą.
Jei pageidaujate GUI įrankių, galite eiti su savo asmenine mėgstamiausia programa „Codekit“, žiniatinklio kūrimo priemone „Sass“ kompiliuojant, susieti, automatiškai pataisyti ir daug daugiau. Prepros yra dar viena labai tinkama programa, kurią galima naudoti visose sistemose. Abu yra mokamas programas bet tai verta, jei juos naudosite ilgainiui.
Jei norite tiesiog išbandyti Sassą nemokėdami nieko galite naudoti terminalą arba „Koala“ (čia yra mūsų apžvalga), nemokamą daugialypės terpės funkciją turinčią programą, kuri gali išlaikyti savo pagrindą nuo aukščiausios kokybės kolegų.
Kintamieji
Vienas iš pirmųjų dalykų, kuriuos reikės apvynioti, yra kintamieji. Jei ateisite iš PHP ar kito panašaus kodavimo kalbos, tai jums bus antras pobūdis. Kintamieji skirti daugkartinio naudojimo informacijos kaupimas, kaip spalvos vertė, pavyzdžiui:
$ pirminės_palvos: # 666666; . mygtukas spalva: $ pirminė_palvė; .important color: $ pirminis_koloras;
Tai gali atrodyti ne taip naudinga, bet įsivaizduoti, kad turėtumėte 3000 kodų eilučių. Jei jūsų spalvų schema pasikeis, reikia pakeisti kiekvieną spalvų vertę CSS. Su Sass galite tiesiog keisti vertę iš $ pirminės spalvos kintamasis ir atliekamas su juo.
Kintamieji naudojami išsaugoti šriftų pavadinimus, dydžius, spalvas ir kitą informaciją. Didesniems projektams mes galime verti visus kintamuosius į atskirą failą (mes pažiūrėsime, kaip tai daroma greitai). Tai, ką tai leidžia padaryti, yra jūsų viso projekto spalvos atnaujinimas ir šriftų bei kitų pagrindinių aspektų keitimas niekada neliesdami faktinių CSS taisyklių. Viskas, ką jums reikia padaryti, yra pakeisti kai kuriuos kintamuosius.
Lizdavimas
Kitas esminis bruožas Sass suteikia jums gebėjimas laikytis taisyklių. Tarkime, kad kuriate navigacijos meniu. Turite nav elementas, kuriame yra neregistruotas sąrašas, sąrašo elementai ir nuorodos. CSS galite tai padaryti:
#header nav / * Navigacijos srities taisyklės * / #header nav ul / * Meniu taisyklės * / #header nav li / * Taisyklės sąrašo elementams * / #header nav a / * Taisyklės nuorodoms * /
Atrinktuvai mes daug kartojame. Jei elementai turi bendrų šaknų, mes galime naudoti lizdus rašykite mūsų taisykles daug švaresniu būdu.
Štai kaip pirmiau minėtas kodas gali atrodyti Sass:
#header nav / * Taisyklės navigacijos srityje * / ul / * Taisyklės meniu * / li / * Sąrašo elementų taisyklės * / a / * Nuorodų taisyklės * /
Lizdavimas yra labai naudingas, nes jis stilių lentelės (daug) tampa aiškesnės. Naudodami lizdą kartu su tinkama įdėjimu galite pasiekti labai lengvai įskaitomos kodo struktūros, net jei turite teisingą kodą.
Vienas lizdų trūkumas yra tas, kad jis gali sukelti nereikalingą specifiškumą. Pirmiau pateiktame pavyzdyje kalbėjau apie ryšius su #header nav a. Taip pat galite naudoti #header nav ul li a tai tikriausiai būtų per daug.
„Sass“ yra daug lengviau būti labai specifišku, nes viskas, ką jums reikia padaryti, yra lizdo savo taisykles. Toliau pateikiama daug mažiau aiški ir gana specifiška.
#header nav / * Taisyklės „Nav Area“ * / ul / * Meniu * / li / * Taisyklės sąrašo elementams * / a / * Nuorodų taisyklės * /
Taisyklių išplėtimas
Plėtra bus žinoma, jei dirbsite su objektais orientuotomis kalbomis. Geriausiai suprantama per pavyzdį, sukurkime 3 mygtukus, kurie yra nedideli vienas kito variantai.
.mygtukas ekranas: inline-block; spalva: # 000; fonas: # 333; pasienio spindulys: 4px; pagalvėlė: 8px 11px; .pagrindinis @extend .button; fonas: # 0091C2 .button-small @extend. mygtukas; šrifto dydis: 0.9em; paminkštinimas: 3px 8px;
The .mygtukas-pirminis ir .mygtukas mažas visos klasės pratęsia .mygtukas tai reiškia, kad jie prisiima visas savo savybes ir tada apibrėžia savo savybes.
Tai labai naudinga daugeliu atvejų, kai gali būti naudojami elemento variantai. Pranešimai (įspėjimas / sėkmė / klaida), mygtukai (spalvos, dydžiai), meniu tipai ir pan. Visi gali naudoti išplėstinę funkcionalumą, kad būtų užtikrintas didelis CSS efektyvumas.
Vienas iš pranašumų yra tai, kad jie neveiks žiniasklaidos užklausose kaip tikitės. Tai šiek tiek pažengusi, bet jūs galite skaityti viską apie šį elgesį, kai suprantate „Placeholder Selectors“ - vietovės žymeklio parinkėjai yra ypatingas pratęsimas, apie kurį kalbėsime greitai.
Mišiniai
„Mixins“ yra dar viena mėgstamiausia išankstinio apdorojimo naudotojų funkcija. „Mixins“ yra daugkartinio naudojimo taisyklės - puikiai tinka tiekėjo specifinėms taisyklėms arba trumpoms CSS taisyklėms.
Kaip sukurti pereinamojo laikotarpio taisyklę slinkties elementams:
@mixing hover-effect -webkit-perėjimas: fono spalva 200ms; -moz-perėjimas: fono spalva 200ms; -o-perėjimas: fono spalva 200ms; perėjimas: fono spalva 200ms; a @covere hover-effect; . mygtukas @ įtraukti hover-effect;
„Mixins“ taip pat leidžia naudoti kintamuosius apibrėžti mišinio vertes. Galėtume perrašyti aukščiau pateiktą pavyzdį į leiskite mums kontroliuoti tikslų perėjimo laiką. Mes galbūt norime, kad mygtukai pereitų, pavyzdžiui, šiek tiek lėčiau.
@mixin hover-effect ($ speed) -webkit-perėjimas: fono spalva $ speed; -moz-perėjimas: fono spalva $ speed; -o-perėjimas: fono spalvos $ greitis; perėjimas: fono spalvos $ greitis; a @incover hover-effect (200ms); . mygtukas @ įtraukti hover-effect (300ms);
Vietų parinkėjų pasirinkimas
Vietos parinktuvai buvo pristatyti su „Sass 3.2“ ir išsprendė problemą, kuri gali sukelti šiek tiek išpūstą jūsų sukurtą CSS kodą. Pažvelkite į šį kodą, kuris sukuria klaidų pranešimus:
.pranešimas font-size: 1.1em; paminkštinimas: 11px; sienos plotis: 1px; sienos stilius: kietas; .pranešimo pavojus @extend .message; fonas: # C20030; spalva: #fff; sienų spalva: # A8002A; .message-success @extend .message; fonas: # 7EA800; spalva: #fff; spalva: # 6B8F00;
Labiausiai tikėtina, kad žinučių klasė niekada nebus naudojama mūsų HTML: ji buvo sukurta išplėsti, nenaudojama kaip yra. Tai sukelia šiek tiek išsipūtimo jūsų sukurtame CSS. Jei norite, kad jūsų kodas būtų efektyvesnis, galite naudoti vietos žymeklio valdiklį, kuris nurodomas procentiniu ženklu:
% message font-size: 1.1em; paminkštinimas: 11px; sienos plotis: 1px; sienos stilius: kietas; .pranešimo pavojus @extend% mygtukas; fonas: # C20030; spalva: #fff; sienų spalva: # A8002A; .message-success @extend% mygtukas; fonas: # 7EA800; spalva: #fff; spalva: # 6D9700;
Šiame etape gali būti įdomu, koks yra skirtumas tarp pratęsimo ir maišymo. Jei naudojate vietos žymenis, jie elgiasi kaip parametrų neturintis mišinys. Tai tiesa, bet CSS išvestis skiriasi. Skirtumas yra tas mixins dublikatas taisykles kol vietos žymenys užtikrins, kad tos pačios taisyklės dalytųsi pasirinktimis, galiausiai sumažėja CSS.
Operacijos
Sunku pasipriešinti čia esančiam šuniui, bet dabar susilaikysiu nuo bet kokių medicininių anekdotų. Operatoriai leidžia jums atlikti tam tikrą matematiką savo CSS kode ir gali būti gana naudingi. „Sass“ vadovo pavyzdys puikiai tinka:
.konteineris plotis: 100%; Straipsnis float: kairėje; plotis: 600px / 960px * 100%; aside float: right; plotis: 300px / 960px * 100%;
Anksčiau pateiktas pavyzdys sukuria 960px grotelių sistemą su minimalia problema. Ji gerai suskaičiuos į šiuos CSS:
.konteineris plotis: 100%; Straipsnis float: kairėje; plotis: 62,5%; aside float: right; plotis: 31,25%;
Vienas iš puikių naudojimų, kuriuos aš rasiu operacijoms, yra iš tikrųjų maišyti spalvas. Jei pažvelgsite į sėkmės pranešimą „Sass“, neaišku, ar fono ir sienos spalva turi tam tikrą ryšį. Išskyrus pilkos spalvos atspalvį, galime tamsinti spalvą, kad santykiai būtų matomi:
$ pirminis: # 7EA800; .message-success @extend% mygtukas; fonas: $ pirminis; spalva: #fff; sienos spalva: $ pirminė - # 111;
Šviesesnė atimama spalva, tuo tamsesnis, bus atspalvis. Šviesesnė pridėta spalva, tuo lengvesnis atspalvis.
Funkcijos
Galima naudoti daug funkcijų: skaičių funkcijos, eilutės funkcijos, sąrašo funkcijos, spalvų funkcijos ir kt. Pažvelkite į ilgą kūrėjo dokumentacijos sąrašą. Čia pažiūrėsiu porą, kad parodytume, kaip jie dirba.
The apšviesti ir tamsinti funkcija gali būti naudojama spalvos lengvumui pakeisti. Tai geriau nei atimant atspalvius, todėl viskas dar labiau modulinė ir akivaizdi. Pažvelkite į mūsų ankstesnį pavyzdį, naudodami tamsinimo funkciją.
$ pirminis: # 7EA800; .message-success @extend% mygtukas; fonas: $ pirminis; spalva: #fff; sienos spalva: tamsėja ($ pirminė, 5);
Antrasis funkcijos argumentas - tai tamsinimo procentas. Visos funkcijos turi parametrus; pažiūrėkite į dokumentus, kad pamatytumėte, kas jie yra! Štai keletas kitų paaiškinamų spalvų funkcijų: desaturatas, sočiųjų, invertuoti, pilkos spalvos.
The ceil funkcija, kaip ir PHP, grąžina skaičių, suapvalintą iki kito sveikojo skaičiaus. Tai gali būti naudojama apskaičiuojant stulpelių plotį arba jei nenorite, kad galutiniame CSS būtų daug vietos po kablelio.
.title font-size: ceil ($ title_size * 1.3314);
Apžvalga
„Sass“ funkcijos suteikia mums didelę galią parašyti geresnę CSS su mažiau pastangų. Tinkamas mišinių, išplėtimų, funkcijų ir kintamųjų naudojimas padarys mūsų stilių lenteles patvaresnes, įskaitomas ir lengviau parašomas.
Jei jus domina kitas panašus CSS išankstinis apdorojimas, siūlau pažvelgti į „LESS“ (ar pasitikrinti mūsų pradedančiojo vadovą) - pagrindinė pagrindinė priemonė yra daug vienoda!
