Sisältö
Aina viihdyttävä katselu, kuinka CSS-veteraani löytää Sassin ensimmäistä kertaa. Pesimisen, muuttujien ja sekoitusten kaltaiset käsitteet näyttävät niin luonnollisilta, ja kun syntaksin on sitoutunut muistiin, on vaikea muistaa aikaa ennen niiden saatavuutta. Relief on yleisin tunne: tunnustus siitä, että heksadesimaaliarvojen manuaalisen etuliitteen ja kopioinnin päivät ovat kuluneet.
Esikäsittelijän @extend ydinkäsitteistä erottuu kolmesta syystä: sillä on korkeimmat mahdollisuudet muuttaa työnkulkuasi huomattavasti; väärinkäyttö on vaarallista tyylisivusi terveydelle; ja uudet tulokkaat kamppailevat sen kanssa paljon enemmän kuin muut Sass-toiminnot. Seuraa oheisia malleja aloittaaksesi @extendin turvallisen käytön.
- Lataa tämän opetusohjelman lähdekoodi
Lisätään laajennus
Kun kaksi valitsinta jakaa tyylit tavallisessa CSS: ssä, suhde esitetään luettelossa pilkuilla erotettuna:
.sidebar, .notice {marginaali: 20px; }}
Sass yhdistää valitsimet @extend-direktiiviin:
.sidebar {marginaali: 20px; } .ilmoitus {@extend .sidebar; }}
Se voi vaikuttaa pienessä mittakaavassa tehottomalta, mutta taika on kyvyssä luoda nämä suhteet mistä tahansa tyylitaulukostasi. Mikä tahansa määrä valitsinta (tai tyyppiä) voi laajentaa .sidebarissa olevia tyylejä. Tämä luo yhden paikan ominaisuuksien päivittämiseen pakottamatta yhdistämään valitsimia manuaalisesti. Tarkastellaan yleisempää mallia. Tämä hyvin yksinkertainen esimerkki osoittaa, kuinka luodaan yhteinen painikeluokka ja lisätään lisää luokkia perusominaisuuksien muokkaamiseksi:
.btn {font-weight: lihavoitu; } .btn-virhe {tausta: punainen; } .btn-next {tausta: vihreä; }
Sen sijaan, että sisältäisit .btn- ja .btn-virheluokit HTML-koodissamme, laajenna pääpainityylit virhetilaan aina, kun vaaditaan punaista painiketta:
.btn-virhe {@extend .btn; tausta: punainen; }
Kun Sass kääntyy, .btn-valitsimesta tulee .btn, .btn-virhe. Luetteloa ylläpidetään automaattisesti, ja yksinkertainen .btn-virheen lisääminen elementtiin lisää kaikki tarvittavat tyylit.
Laajenna sudenkuoppia
Pesimisen tavoin @extend -direktiivi voi aiheuttaa ongelmia, jos sitä käytetään vastuuttomasti tai ymmärtämättä syntyviä yhteyksiä.
Jatkaessamme painike-esimerkkiä, teeskentelkäämme, että olemme laajentaneet .btn-tiedostoa .btn-next sisällä kuten teimme .btn-virheen kanssa. Lopulta meidän on muutettava peruspainiketta, kun se näkyy lomakkeen sisällä:
muoto .btn {reunan säde: 5 kuvapistettä; }
Normaalisti tämä on kelvollinen tyylin säätö. Muut .btn: n pituiset valitsimet tuodaan kuitenkin yhtälöön aina, kun .btn ilmestyy:
lomake .btn, muoto .btn-virhe, lomake .btn-seuraava {reunan säde: 5px; }
Joissakin tapauksissa haluat, että kaikki, mikä laajentaa .btn-tiedostoa, sisällytetään tähän, mikä ei ole pienessä mittakaavassa iso juttu. Jos kuitenkin tusina luokkaa laajensi pohjapainiketta, emmekä tarvinnut tuloksena olevaa laajennettua ketjua, olemme edessään turvotuksessa. Keskisuurissa ja suurissa sovelluksissa menee pieleen, voi helposti sitoa 30% tai enemmän tiedostokokoon. Tästä voi tulla vakava ongelma yhdistettynä huonoon pesimiseen.
Paikkamerkkien valitsimet
Paikkamerkkivalitsimet esiteltiin Sass 3.2: ssä, ja ne tarjoavat koukun, jota ei voi koota valitsimelle yksin. Käytä paikkamerkkiä valitsinta tarpeettomien @extend-valitsinten ryhmien käsittelemiseksi:
% sivupalkki {marginaali: 20px; } .ilmoitus {@extend% sivupalkki; }
% -Merkki tarkoittaa paikkamerkin valitsinta ja muuttaa käännettyjä tyylejä vain, kun jokin laajentaa sitä. Kun katsot taaksepäin painikeesimerkkiämme, yritä poistaa alkuperäiset laajennukset ja käytä sen sijaan paikkamerkkien valitsinta:
.btn,% btn {font-weight: lihavoitu; } .btn-virhe {@extend% btn; tausta: punainen; } .btn-seuraava {@extend% btn; tausta: vihreä; }
Lisäämällä paikkamerkkivalitsimen kaksi muokkausryhmäämme laajentavat paikkamerkkiä .btn-valitsimen sijaan. Tämä sallii .btn-määritteiden uudelleenkäytön (ja kattamisen) ilman turvotusta. Jos meidän ei tarvinnut käyttää .btn-valitsinta yksin, tässä voidaan käyttää vain paikkamerkkiä.
muoto .btn {reunan säde: 5 kuvapistettä; }
Nyt sisäkkäinen muutos .btn-tiedostoksi kääntyy yksinkertaisesti muodostaakseen .btn-tiedoston - ja olemme poistaneet mahdollisen turvotuksen uhkan.
Tarkista aina kootut tyylitaulukot pitkiä valintaketjuja ja jatkeita varten. Kokeile kokeilla @extend-, pesintä- ja paikkamerkki-valitsimia. Se vie jonkin verran kokeiluja ja virheitä täysin ymmärrettäväksi, mutta sallii todella merkittävän jäsentämisen.
Sanat: Nick Walsh
Tämä artikkeli ilmestyi alun perin verkkolehden numerossa 239
