Tyylitiedoston kehityksen kanssa Sass, jopa silloin, kun käytät sen alkeellisinta ominaisuuksia, kuten pesintä ominaisuuksia tai muuttujia, säästää arvokasta aikaa ja tekee elämästä helpompaa front-end kehittäjille. Se ei ole yllättävää, että CSS pre-prosessorit on laajalti hyväksytty, koska de facto tapa luoda tyylejä sivustoja ja sovelluksia; emme yksinkertaisesti voi elää ilman niitä enää.,
Kun se tulee teemallaname;, joka on, muuttaa ulkoasua sivuston ja samalla säilyttää layout, Sass’ ominaisuuksia—kuten mixins tai toimintoja—voi tuntea kuin ottaa kone eikä kävely! Tässä SCSS opetusohjelma, aiomme luoda minimaalinen teema ja käyttää SCSS antaa meidän CSS-ohjelmointi supervoimia.
Perus Mixin Lähestymistapa
sanotaan, että meillä on seuraavat layout:
meitä on pyydetty luoda useita teemoja sen., Teema on muuttaa värit kaikki astiat (mukaan lukien tärkeimmät säiliö) ja-painiketta, ja teema määräytyy luokan elin, tai se voi olla ”ulompi” kontti sekä:
<body class="theme-1">katsotaanpa rakentaa mixin nimeltä ”themable”, joka sisältää meidän värimaailma parametrit.,
Sitten käyttää sitä tuottaa teemat:
@include themable(theme-1, #f7eb80, #497265, #82aa91, #fff, #bc6a49);@include themable(theme-2, #e4ada7, #d88880, #cc6359, #fff, #481b16);tässä vaiheessa, olemme jo säästänyt paljon aikaa, mutta on olemassa joitakin ongelmia tämän lähestymistavan kanssa:
Teemat yleensä on paljon erilaisia ominaisuuksia vieressä värejä. Esimerkiksi, jos halusimme muuttaa Bootstrap teema, kirjallisesti mixin edellisen ”resepti” olisi vaikea ylläpitää ja koodi on vaikea lukea. Plus, emme oikeastaan seuraa Sass parhaita käytäntöjä—esimerkiksi syöttämällä hex värikoodeja suoraan mixin.,
Muotoilu Tyylejä Järjestelmän kanssa Sass Karttoja
avulla karttoja, jotka ovat pääasiassa kuten avain indeksoitu paneelit, voimme rakentaa enemmän semanttinen, merkityksellinen joukko tyylejä meidän teema, joka on helpompi ylläpitää ja ymmärtää kollegamme kehittäjille. Myös listat kelpaisivat, mutta itse pidän karttoja tähän tarkoitukseen paremmin sopivina. Listoilla ei ole avaimia, kun avaimet ovat itse selitettävissä.,
karttaa meidän uusi lähestymistapa on sisäkkäisiä kartta:
Jos halusimme käyttää jokainen osa meidän järjestelmä theme-1 ja sen osa-kartat, käytämme @each direktiivi silmukan läpi jokainen niistä:
@each $section, $map in $theme-1$section palaa avain nykyisen jakson, ja $map palaa sisäkkäisiä kartta, joka vastaa, että avain.,
Sitten, voimme käyttää ominaisuuksia kunkin kartan, sanotaan tausta (bg) omaisuutta, käyttämällä map-get tehtävä:
map-get($map, bg)Lopulta, yhdistyvät uuden mixin, joka perustuu kartan rakenne, voimme luoda niin monta teemoja kuin haluamme:
Huomaa, että olemme myös käyttää @if direktiivi erottaa ominaisuuksia kohdat, jotka eivät ole painikkeita.,
@if ($section != button) { height: map-get($map, height); width: map-get($map, width); }Tällä tavalla, voimme lisätä eri ominaisuuksia joitakin osia luoda erityisiä ominaisuuksia tai jopa sääntöjä, tai voimme erottaa keskeinen yhdellä arvo toinen sisäkkäinen kartta.
– Meidän teema voisi koostua myös monia karttoja käytetään useita mixins, soveltaa eri osien meidän tyylitiedoston. Kaikki riippuu perusasettelumme monimutkaisuudesta ja tietenkin henkilökohtaisesta lähestymistavastamme.,
Edelleen Optimointi
Sass tarjoaa hyödyllisiä sisäänrakennettuja toimintoja pelastaa meidät jopa enemmän työtä; esimerkiksi hsl: n toimintoja, kuten lighten tai darken laskea, esimerkiksi, väri-painiketta, kun leijuu se.
voimme muuttaa nappikoodia keventämään sen taustaa leijaillessa alkuperäisestä taustaväristä riippumatta. Näin meidän ei tarvitse lisätä uutta väriä tähän tilaan.,
@if ($section != button) { height: map-get($map, height); width: map-get($map, width);} @else { &:hover { background-color: lighten(map-get($map, bg), 20%); }}Myös käyttää Sass moduulit, meidän koodi voi olla jopa enemmän luettavissa ja skaalautuva; kunkin teeman kartta voi olla sisältyvät moduuli, ja sitten tuodaan tärkein tyylitiedoston.
@import 'theme-1';@import 'theme-2';@import 'theme-3';… … @mixin themable($theme-name, $theme-map) { .#{$theme-name} { .container {… … Tämä edellyttäisi, että moduulit voidaan sijoittaa hankkeeseen seuraavasti:
/├── _theme-1.scss├── _theme-2.scss└── _theme-2.scss
Jos olet kiinnostunut oppimaan lisää Sass KUIVUA CSS, mies Toptaler Justin Brazeau ja Sass harrastaja käsitellään vain tämä hänen loistava artikkeli Sass Mixins: Pidä Stylesheets KUIVA.