Üleminek CSS-ilt Sassile WordPressis

See artikkel ilmus algselt netiajakirja 265. numbris

Iga hea arendaja teab otsida viise, kuidas vähendada korduvat tööd ja lasta oma arvutil hakkama saada igapäevaste ja mõttetute ülesannetega. Sellised CSS-i eeltöötlejad nagu Sass annavad meile mitu väärtuslikku tööriista, mis aitavad eesseadme kodeerimisprotsessi automatiseerida. Näiteks saame Sassiga kasutada muutujaid. Nii et selle asemel, et käsk 'leida ja asendada' käivitaks pika CSS-faili kaudu värvi väärtuse muutmiseks, võime muutuja määratlust lihtsalt muuta.

Sass võimaldab meil kirjutada funktsioone ka korduva stiilikoodiga plokkide genereerimiseks. Näiteks võib nupu funktsioon aktsepteerida parameetrina värvi või stiili ja luua saidi nupu kasutajaliidese jaoks kõik standardsed CSS-id: äärise raadius, gradiendid, tekstivärvid ja nii edasi. Samuti võime jagada oma hiiglaslikud stiililehed organiseeritud mooduliteks. Peaaegu iga CMS, pistikprogramm ja veebirakendus kasutavad kataloogide ja osalisi koodide hooldatavuse parandamiseks: Sass võimaldab meil seda teha oma CSS-iga.

Selles õpetuses selgitatud tehnikad on konkreetsed Sassile, kasutades SCSS-i süntaks , kuid need on rakendatavad enamiku teiste eeltöötlejate jaoks Vähem või Stylus - samuti.

Teema stiilitabelite teisendamine

Kui teie kasutataval WordPressi teemal on juba kaasas Sass-failid, tehakse teie jaoks olemasolevate kujundusstiilide Sass-i teisendamine. Alustan tavaliselt uusi teemasid Automatticu malliga Allakriipsud (underderscores.me). Selle veebisaidilt uue teemapaketi loomisel leiate '_sassify!' suvand, kui klõpsate linki Täpsemad valikud. See pakub tühja teema allalaadimisel teile Automatticu vaikekogu Sass.

Alljooned

Teema Allakriipsutus WordPress pakub kasutajatele võimalust alla laadida teema versioon, mis sisaldab juba Sassi osalisi osi

Kui teie koostatav või muudetav teema ei sisalda Sassi faile, alustate olemasoleva CSS-faili teisendamisest Sassi. See samm paljastab Sassi (SCSS) kasutamise olulise eelise: Sassi kompilaator loeb tavalist CSS-i ilma probleemideta. Originaali style.css kasutamisel Sassina peate tegema vaid selle paljundamise ja stiili.scss ümbernimetamise.

Sassi osaliste seadistamine

Varem mainisin, et Sass parandab meie töövoogu, võimaldades meil tuhandeid CSS-i ridu murda moodulfailideks, mida nimetatakse osalisteks. Enne kompilaatori meetodite juurde jõudmist töötame selle sammu läbi.

Kui olete olemasoleva CSS-faili teisendanud Sassiks, on teil seni olemas vaid .scss-fail, mis on sama kohmakas kui CSS-fail, kust see pärineb. Siinkohal võite hakata kasutama muutujaid ja kirjutama miksi või funktsioone, kuid Sass pole veel modulaarne ega korraldatud. Soovite rühmitada oma CSS-fail jaotisteks, mis teenivad individuaalseid eesmärke. Eesmärk on välja selgitada, kust kood selle failinime põhjal leitakse.

Mõned koodimoodulid, mida tõenäoliselt soovite eraldada, hõlmavad navigeerimist, tüpograafilisi stiile, küljeriba vidinaid, jalus ja ruudustikusüsteemi (kuigi see loend pole sugugi ülevaatlik, on see lihtsalt lähtepunkt).

Seejärel lõikate ja kleepite iga CSS-i modulaarse osa oma Sassi osasse. Sassi osalise faili nimi algab alati alakriipsuga (_). See käsib kompilaatoritel mitte luua selle Sassi faili põhjal ainulaadset CSS-faili.

Kompilaatorirakendus, mis vaatab Sassi täis kausta ja loob automaatselt CSS-i, loob style.css põhinedes style.scss-l, kuid see ei loo navigation.css-i _navigation.scss-i põhjal. Kõigi äsja loodud osade kompileerimiseks lisage need @import oma peamisesse Sassi faili.

Iga kord, kui kopeerite koodiploki osaliseks, asendage see esmases .scss-failis nimega @import 'osaline nimi' ;. Kui teisaldate oma jalusstiilid saidile _footer.scss, lisage @import 'footer' ;. Ärge lisage importimisel _ ega .scss: lihtsalt faili nimi.

Kui soovite tõesti korrastada ja jaotada päise navigeerimine ja jalusega navigeerimine kaustas / navigation / kausta kaheks eraldi osaks, lisage kausta nimi importimisel:

@import 'navigation/header-nav'; // imports /navigation/_header-nav.scss @import 'navigation/footer-nav'; // imports /navigation/_footer-nav.scss

Oluline on meeles pidada, et CSS-i kaskaad kehtib endiselt Sassis kirjutatud koodi kohta. Hiljem imporditud osaliselt kirjutatud stiilidel on võimalus alistada varem imporditud osade stiilid.

Samuti on mõistlik importida partiisid, mis sisaldavad teie miksi ja muutujaid esmase Sassi faili alguses, et hilisemad partiid saaksid neid muutujaid ja miksi kasutada.

WordPressi kommentaarid

Vastavalt WordPressi style.css nõuetele peame veenduma, et meie kompilaator säilitaks WordPressi kommentaarid style.css ülaosas. Kui Sassi väljundsõlme väärtuseks on seatud: tihendatud, eemaldab see CSS-i koostamisel kõik kommentaarid.

Nende kommentaaride puutumatuse tagamiseks lisage stiil.scss kommentaariploki algusesse hüüumärk (!):

/*! Theme Name: Sassy WordPress Theme Theme URI: http://jamessteinbach.com/sass/ Author: James Steinbach Author URI: http://jamessteinbach.com Description: From CSS to Sass Sample Theme Code */ // Import all your .scss partials below

Refaktor CSS Sassile

Nüüd, kui oleme pika stiililehe väiksemateks modulaarseteks osadeks jaotanud, võime hakata algset CSS-i ümber kujundama, et see vastaks meie Sassi eelistustele. Mõned kasulikud Sassi tööriistad koodi ümbertegemiseks on muutujad, pesitsemine, funktsioonid ja miksid.

Kui soovite mõnda värvi muuta või standardset tüüpi skaalat seada, on muutujad parim viis salvestada kõik need andmed ühte kohta ja hõlpsalt kogu saidi ulatuses muudatusi teha. Kui te pole veel loonud osalist nime _variables.scss, soovitan seda teha kohe ja importida see oma põhilise Sassi faili ülaossa. Siin on mõned muutujad, mille võiksite osaliselt lisada:

$red: #FF4136; $blue: #0074D9; $blue-dark: #001F3F; $orange: #FF851B $type-small: 12px; $type-medium: 16px; $type-large: 21px; $type-hero: 44px;

Kui olete need muutujad seadistanud, saate otsida osalisi ja asendada väärtused muutujate nimedega.

body { color: $blue-dark; } .page-title { font-size: $type-large; }

Komplekssete selektorite loetavamaks muutmiseks võite kasutada Sassi funktsiooni, mida nimetatakse pesitsemiseks. Teie algne CSS võib saidi küljeribal sisaldada mitme elemendi stiile:

.sidebar h1 { //styles } .sidebar p { //styles } .sidebar ul { //styles }

Stiile saab pesitseda teistesse stiiliplokkidesse ja Sass ühendab keeruliste selektorite loomiseks selektorid. Allpool olev kood kompileeritakse algse CSS-iga samaks väljundiks (nagu on näidatud ülaltoodud koodis).

.sidebar { h1 { //styles } p { //styles } ul { //styles } }

Pesitsedes saab seda kasutada kogu selle kohal asuva selektorite stringi kohahoidjaks. Kuna pesitsemine paneb selektorite vahele ruumi, võib see olla kasulik pseudoklasside ja pseudoelementide kasutamisel:

a { color: $blue; &:hover { color: $blue-dark; } } .clearfix { &::before, &::after { content: ''; display: table; clear: both; } }

& Saab kasutada ka valijate järjestuse dubleerimiseks või ümberpööramiseks:

p { & + & { margin-top: 1em; } } .menu-link { color: $gray; .menu-item:hover & { color: $gray-light; } }

Võite mõelda, kas tasub oma aega pesitsusomaduste abil ümber kujundada. Kuigi pesitsemine võib suurendada loetavust (kuigi see on subjektiivne), on see ka tööriist, mida tuleb hoolikalt kasutada. Enamik Sassi asjatundjaid soovitab Sassi pesitsemisel kasutada algusreeglit: kunagi ei tohi pesitseda rohkem kui kolme taseme sügavusel. Mõistlik on Sassi pesitsemist säästlikult kasutada. Kui teie töövoos pole mõtet, ärge sundige seda.

Sass

Sass on kõige küpsem, stabiilsem ja võimsam professionaalse klassi CSS-i laienduse keel

Kui arvutate oma CSS-is korduvalt teatud omadusi, saate selle protsessi asendada funktsiooniga Sass. Funktsioon võtab teile antud parameetrid ja tagastab väärtuse. See ei genereeri CSS-i atribuudiväärtuste paare, kuid võib luua väärtusi teie jaoks.

Siin on näide funktsioonist heledate värvide arvutamiseks:

// This goes in _functions.scss: @function hover-color($color) { @return lighten($color, 10%); } // This is how you use the function in other partials: .button { background-color: $red; &:hover { background-color: hover-color($red); } }

Samuti saame oma koodi ümber kujundada, võttes korduvad koodiplokid ja asendades need miksiinidega. Hea näide kasulikust miksinist on clearfix.

// This goes in _mixins.scss: @mixin clearfix() { &::after { content: “”; display: table; clear: both; } } // This is how you use the mixin in other partials: .content-container { @include clearfix; }

Mixins võib kohandatud väljundi loomiseks võtta ka parameetreid. See on väga kasulik kujundusmustrite jaoks, nagu nupud või märguanded:

// This goes in _mixins.scss: @mixin alert($color) { border-radius: .5em; box-shadow: 0 0 .25em 0 rgba(0,0,0,.5); border-top: 4px solid $color; color: $color; } // This is how you use this mixin: .alert-error { @include alert($red); } .alert-success { @include alert($green); }

alljooned.me

Teema underderscores.me sorteerib osalised kaustadesse, sealhulgas elemendid, vormid, paigutus ja meedia

Üks levinum nõuanne, mida veebis näete, on brauseriteüleseks prefiksimiseks kasutada miksiine. Tavaliselt soovitan siiski selle vastu. Ma leian selle Automaatne parandaja on palju parem viis eesliidete automatiseerimiseks.

Kui te ei saa Autoprefixerit käivitada ja peate toetuma Sassi miksijatele, Kompassi miksikukogu võimaldab kasutaja konfigureerimist ja on kursis Kas ma võin kasutada andmed.

Korraldage oma partiid

Kokkuvõtteks võtsime teema olemasoleva stiililehe lahti ja parandasime koodi, et muuta asi puhtamaks ja sassierilisemaks. Nüüd saame oma osalised korraldada, et pikemas perspektiivis parandada hooldatavust.

oma CSS-i korraldamine

Teie CSS-i korraldamine Sassi abil saavad arendajad oma CSS-i korraldamiseks ja automatiseerimiseks kasutada selliseid muutujaid, pesitsemist, funktsioone ja miksi.

Pidage meeles, et kaskaad on endiselt oluline. Sassi kompileeritud CSS on täpselt nagu tavaline CSS, kuna hiljem stiililehes ilmuvad stiilid võivad varem ilmunud stiilid alistada. Reeglina importige oma üldised stiilid enne konkreetsete stiilide importimist.

Sarnaseid osalisi saab korraldada kaustadesse. Sassi osaliste failide importimiseks kataloogidest on kaks võimalust. Esimene on importida iga fail faili style.scss, sealhulgas kaustanimi impordidirektiivis, järgmiselt:

@import 'base/variables'; // imports _variables.scss from the /base/ directory @import 'base/mixins'; // imports mixins.scss from the /base/ directory @import 'base/grid'; // imports _grid.scss from the /base/ directory

Teine (ja tõepoolest keerulisem) meetod on luua kohatäide osaline igas kataloogis, mis impordib ülejäänud selles kataloogis olevad osad (järgmine veerg):

// in style.scss @import 'base/base'; // in /base/_base.scss @import 'variables'; // imports _variables.scss from the /base/ directory @import 'mixins'; // imports mixins.scss from the /base/ directory @import 'grid'; // imports _grid.scss from the /base/ directory

Mõlemad meetodid impordivad samu osi samas järjekorras. Esimene meetod on pinnal lihtsam, kuid teise meetodi eeliseks on style.scss-i hoidmine ja igasuguse keerukuse viimine moodulitesse, millele ta tugineb.

Sassi osaliste osade korraldamiseks on peaaegu sama palju võimalusi kui Sassi osaliste osade korraldamiseks. Mitu head valikut leiate jaotisest „Ressursid” lk 88.

Siin on üks üsna lihtne organisatsiooniskeem, mida saaksite kasutada:

  • / base / (muutujad, miksid, lähtestamine, tüpograafia)
  • / layout / (ruudustik, päis, jalus)
  • / vendors / (pistikprogrammid, müüjad jne)
  • / komponendid / (nupud, menüüd, vormid, vidinad)
  • / pages / (avaleht, sihtleht, portfell)

Summeerida

Selles artiklis hakatakse uurima ainult Sassi kasutamise võimalusi WordPressi teemaarenduses. On suur tõenäosus, et otsite nüüd lisateavet, eriti kui see on esimene asi, mida te sel teemal lugenud olete.

Selle teema kohta lisateabe saamiseks vaadake kasti 'Ressursid' - need artiklid sisaldavad mitmeid Sass-WordPressi töövoo variatsioone. Mõni nende nõuanne erineb minu soovitusest (eriti osaliste korraldamise teemal), kuid see on tore - leidke endale sobivad tehnikad ja töövood!

James Steinbach on selle õpetuse juurde loonud eksklusiivse ekraanikuva, mida saate vaadata allpool.

Sõnad: James Steinbach