Vaihda CSS: stä Sassiksi WordPressissä

Tämä artikkeli ilmestyi alun perin verkkolehden numerossa 265

Jokainen hyvä kehittäjä tietää etsivän tapoja vähentää toistuvaa työtä ja antaa tietokoneen hoitaa arkipäivän, järjettömiä tehtäviä. CSS-esiprosessorit, kuten Sass, antavat meille useita arvokkaita työkaluja, jotka auttavat automatisoimaan käyttöliittymän koodausprosessin. Esimerkiksi Sassin avulla voimme käyttää muuttujia. Joten sen sijaan, että suoritamme 'etsi ja korvaa' -komennon pitkän CSS-tiedoston läpi väriarvon säätämiseksi, voimme yksinkertaisesti muuttaa muuttujan määrittelyä.



Sass antaa meille myös mahdollisuuden kirjoittaa funktioita toistuvan tyylikoodin lohkojen luomiseksi. Esimerkiksi painiketoiminto voi hyväksyä värin tai tyylin parametrina ja luoda kaikki standardin CSS: n sivuston painikkeen käyttöliittymälle: reunan säde, kaltevuudet, tekstin värit ja niin edelleen. Voimme myös jakaa jättimäiset tyylitaulukot järjestettyihin moduuleihin. Lähes jokaisessa CMS: ssä, laajennuksessa ja verkkosovelluksessa käytetään hakemistoja ja osioita koodin ylläpidettävyyden parantamiseksi: Sass antaa meille mahdollisuuden tehdä tämä CSS: llä.



Tässä opetusohjelmassa selitetyt tekniikat ovat ominaisia ​​Sassille SCSS-syntakse , mutta ne soveltuvat useimpiin muihin esiprosessoreihin - kuten Vähemmän tai Neula - yhtä hyvin.

Teeman tyylitaulukoiden muuntaminen

Jos käyttämässäsi WordPress-teemalla on jo mukana Sass-tiedostoja, prosessi, jolla nykyiset teematyylitaulukot muunnetaan Sassiksi, on tehty sinulle. Aloitan tyypillisesti uudet teemat Automatticin alaviivat-mallilla (underscores.me). Kun luot uuden teemapaketin sen verkkosivustolta, löydät '_sassify!' vaihtoehto, jos napsautat Lisäasetukset-linkkiä. Tämä tarjoaa Automatticin oletusarvoisen Sass-kirjaston sinulle, kun lataat tyhjän teeman.



Alaviivat

Alaviivat WordPress-teema tarjoaa käyttäjille mahdollisuuden ladata teeman version, joka sisältää jo Sass-osiot

Jos rakennamasi tai muokkaamasi teema ei sisällä Sass-tiedostoja, aloitat muuntamalla nykyisen CSS-tiedoston Sassiksi. Tämä vaihe paljastaa suuren edun Sassin (SCSS) käytössä: Sass-kääntäjä lukee tavallisen CSS: n ilman mitään ongelmia. Kaikki mitä sinun tarvitsee tehdä, jotta voit käyttää alkuperäistä style.css-tiedostoa Sassina, on kopioida se ja nimetä se uudelleen style.scss-tiedostoksi.

kuinka tehdä pikapiirustus video

Sass-osien asettaminen

Aikaisemmin mainitsin, että Sass parantaa työnkulkua antamalla meille hajottaa tuhansia CSS-rivejä modulaarisiksi tiedostoiksi, joita kutsutaan osittaisiksi. Työskentelemme tämän vaiheen läpi ennen siirtymistä kääntäjämenetelmiin.



Jos olet muuttanut olemassa olevan CSS-tiedoston Sassiksi, kaikki mitä sinulla on toistaiseksi, on .scss-tiedosto, joka on yhtä raskas kuin CSS-tiedosto, josta se tuli. Tässä vaiheessa voit alkaa käyttää muuttujia ja kirjoittaa miksauksia tai toimintoja, mutta Sass ei ole vielä modulaarinen tai organisoitu. Haluat ryhmitellä CSS-tiedostosi osioihin, jotka palvelevat yksittäisiä tarkoituksia. Tavoitteena on pystyä selvittämään, mistä koodi löytyy sen tiedostonimen perusteella.

Jotkut koodimoduulit, jotka luultavasti haluat eristää, ovat navigointi, typografiset tyylit, sivupalkin widgetit, alatunniste ja ruudukkojärjestelmä (vaikka luettelo ei ole millään tavalla kattava, se on vain lähtökohta).

Leikkaa ja liitä sitten kukin CSS: n modulaarinen osa omaan Sass-osaansa. Sass-osan tiedostonimi alkaa aina alaviivalla (_). Tämä kertoo kääntäjille, että heidän ei pidä luoda ainutlaatuista CSS-tiedostoa tämän Sass-tiedoston perusteella.

Kääntäjäsovellus, joka seuraa Sass-täynnä kansiota ja luo automaattisesti CSS: n, luo style.css: n tyylin.scss perusteella, mutta se ei luo navigation.css: ää _navigation.scss: n perusteella. Voit koota kaikki juuri luomasi osiot @ tuoda ne Sass-päätiedostoon.

Aina kun kopioit koodilohkon osaan, korvaa se ensisijaisessa .scss-tiedostossa nimellä @import 'osittainen nimi' ;. Jos siirrät alatunnistetyypit kansioon _footer.scss, lisää @import 'alatunniste' ;. Älä sisällytä _ tai .scss tuontiin: vain tiedoston nimi.

Jos haluat organisoitua todella ja jakaa otsikkojen navigoinnin ja alatunnisteen navigoinnin kahteen erilliseen osaan a / navigation / -kansiossa, sisällytä kansion nimi tuontiin:

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

On tärkeää muistaa, että CSS-kaskadi koskee edelleen Sassissa kirjoitettua koodia. Myöhemmin tuotuina osina kirjoitetuilla tyyleillä on mahdollisuus ohittaa aiemmin tuotujen osien tyylit.

On myös viisasta tuoda osiot, jotka sisältävät sekoituksesi ja muuttujat ensisijaisen Sass-tiedostosi alussa, jotta myöhemmät osiot voivat tosiasiallisesti käyttää näitä muuttujia ja sekoituksia.

WordPress-kommentit

WordPress style.css -vaatimusten mukaan meidän on varmistettava, että kääntäjämme säilyttää WordPress-kommentit tyylin.css yläosassa. Kun Sassin output_style-asetukseksi on asetettu pakattu, se poistaa kaikki kommentit CSS: ää kääntäessään.

Varmista, että nämä kommentit jätetään ehjiksi, lisäämällä huutomerkki (!) Kommenttilohkon alkuun tyylillä.scss:

miten saada palkkiot taiteesta
/*! 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

Refactor CSS Sassille

Nyt kun olemme hajottaneet pitkän tyylitaulukon pienempiin modulaarisiin osiin, voimme aloittaa alkuperäisen CSS: n muokkaamisen vastaamaan Sass-asetuksiamme. Joitakin hyödyllisiä Sass-työkaluja koodin korjaamiseen ovat muuttujat, pesiminen, toiminnot ja mikit.

Jos haluat muuttaa joitain värejä tai perustaa vakiotyyppisen asteikon, muuttujat ovat paras tapa tallentaa kaikki kyseiset tiedot yhteen paikkaan ja tehdä muutoksia koko sivustoon helposti. Jos et ole vielä luonut osaa nimeltä _variables.scss, suosittelen tekemään se nyt - ja tuomalla se Sass-päätiedostosi yläosaan. Tässä on muutamia muuttujia, jotka haluat ehkä laittaa tähän osaan:

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

Kun olet määrittänyt nämä muuttujat, voit etsiä osituksia ja korvata arvot muuttujien nimillä:

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

Voit käyttää Sass-ominaisuutta nimeltä 'pesiminen', jotta monimutkaiset valitsimet ovat helpommin luettavissa. Aloittava CSS voi sisältää tyylit useille elementeille sivuston sivupalkissa:

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

Voit sijoittaa tyylejä muiden tyylilohkojen sisään, ja Sass yhdistää valitsimet monimutkaisten valitsimien luomiseksi. Alla oleva koodi kootaan samaan lähtöön kuin alkuperäinen CSS (kuten yllä olevassa koodissa näkyy).

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

Pesinnässä & sitä voidaan käyttää paikkamerkkinä koko sen yläpuolella olevalle valitsimille. Koska pesiminen asettaa tilaa valitsimien välille, siitä voi olla hyötyä käytettäessä pseudoluokkia ja pseudoelementtejä:

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

& Voidaan käyttää myös kopioimaan tai kääntämään valitsimien järjestystä:

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

Saatat miettiä, onko sinun aikaasi refaktoroida pesimällä ominaisuuksia. Vaikka pesiminen voi lisätä luettavuutta (vaikka tämä on subjektiivista), se on myös työkalu, jota käytetään varovasti. Suurin osa Sassin asiantuntijoista suosittelee aloitussääntöä Sassin pesimiseen: älä koskaan pesi yli kolmen tason syvyydessä. On viisasta käyttää Sassin pesimistä säästeliäästi. Jos sillä ei ole järkeä työnkulussa, älä pakota sitä.

Sass

Sass on kypsin, vakain ja tehokkain ammattitason CSS-laajennuskieli

Jos lasket toistuvasti tiettyjä ominaisuuksia CSS: ssäsi, voit korvata prosessin Sass-toiminnolla. Funktio ottaa antamasi parametrit ja palauttaa arvon. Se ei luo CSS-ominaisuus-arvo-pareja, mutta se voi luoda arvoja sinulle.

Tässä on esimerkki funktiosta, jolla lasketaan hiipuneet värit:

// 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); } }

Voimme myös muokata koodiamme ottamalla toistuvia koodilohkoja ja korvaamalla ne miksauksilla. Erinomainen esimerkki hyödyllisestä mixinistä 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 voi myös ottaa parametreja räätälöidyn tuotoksen luomiseksi. Tämä on erittäin hyödyllinen suunnittelumalleille, kuten painikkeille tai hälytyksille:

mitä kirjasimesi sanoo sinusta
// 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); }

alaviivat.me

Alaviivat.me-teema lajittelee osiot kansioihin, mukaan lukien elementit, muodot, asettelut ja media

Yksi yleinen neuvo, jonka saatat nähdä verkossa, on käyttää yhdistelmiä selainten väliseen etuliitteeseen. Suosittelen yleensä tätä vastaan. Minusta se Automaattinen korjaus on paljon parempi tapa automatisoida etuliitteet.

Jos et pysty suorittamaan Autoprefixer-ohjelmaa ja sinun on luotettava Sass-yhdistelmiin, Kompassi 'mixin-kirjasto mahdollistaa käyttäjän määritykset ja pysyy ajan tasalla Voinko käyttää tiedot.

Järjestä osasi

Yhteenvetona olemme ottaneet teeman olemassa olevan tyylitaulukon erilleen ja muokkaaneet osan koodista, jotta asiat olisivat puhtaampia ja yksinkertaisempia. Nyt voimme järjestää osamme parantamaan ylläpidettävyyttä pitkällä aikavälillä.

kuinka poistaa alueen valinta Photoshopissa

CSS: n järjestäminen

CSS: n järjestäminen Sassin avulla kehittäjät voivat käyttää muuttujia, sisäkkäisyyttä, toimintoja ja yhdistelmiä CSS: n järjestämiseen ja automatisointiin

Muista, että kaskadilla on edelleen merkitystä. Sass-käännetty CSS on aivan kuin tavallinen CSS, sillä tyylitaulukossa myöhemmin näkyvät tyylit voivat ohittaa aiemmin näkyvät tyylit. Tuo yleensä tyylisi ennen tiettyjen tyylien tuomista.

Vastaavat osiot voidaan järjestää kansioihin. Sass-osiot voidaan tuoda hakemistoista kahdella tavalla. Ensimmäinen on tuoda kukin tiedosto style.scss-tiedostoon, mukaan lukien tuontidirektiivin kansion nimi, seuraavasti:

@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

Toinen (ja tosin monimutkaisempi) menetelmä on luoda paikkamerkkiosa jokaiseen hakemistoon, joka tuo muut osiot kyseiseen hakemistoon (seuraava sarake):

// 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

Molemmat näistä menetelmistä tuovat samat osiot samassa järjestyksessä. Ensimmäinen menetelmä on pinnaltaan yksinkertaisempi, mutta toisen menetelmän etuna on pitää style.scss siistinä ja siirtää kaikki monimutkaisuudet moduuleihin, joihin se luottaa.

On lähes yhtä monta tapaa järjestää Sass-partit kuin kehittäjät, jotka yrittävät järjestää Sass-partisaleja. Löydät useita hyviä vaihtoehtoja Resurssit-kentästä sivulla 88.

Tässä on yksi melko yksinkertainen organisaatiomalli, jota voit käyttää:

  • / base / (muuttujat, mikit, nollaus, typografia)
  • / layout / (ruudukko, otsikko, alatunniste)
  • / toimittajat / (laajennukset, myyjät jne.)
  • / components / (painikkeet, valikot, lomakkeet, widgetit)
  • / sivut / (etusivu, aloitussivu, salkku)

Yhteenvetona

Tässä artikkelissa alkaa vain tutkia Sassin käytön mahdollisuuksia WordPress-teeman kehittämisessä. Mahdollisuudet ovat vahvat siitä, että olet innokas lisätietoja nyt, varsinkin jos tämä on ensimmäinen asia, jonka olet lukenut aiheesta.

Tutustu Resurssit-ruutuun, jos haluat lukea lisää aiheesta - nämä artikkelit sisältävät useita muunnelmia Sass-WordPress-työnkulusta. Jotkut heidän neuvoistaan ​​poikkeavat suosittelemistani (etenkin osien järjestämisestä), mutta se on hieno - löydä sinulle sopivat tekniikat ja työnkulut!

James Steinbach on luonut tämän opetusohjelman ohella eksklusiivisen kuvaruudun, jonka voit katsoa alla.

Sanat: James Steinbach