Skift fra CSS til Sass i WordPress

Denne artikel opstod oprindeligt i nummer 265 af netmagasinet

Enhver god udvikler ved at kigge efter måder til at reducere gentagne arbejde og lade deres computer håndtere verdslige, tankeløse opgaver. CSS preprocessorer som Sass giver os flere værdifulde værktøjer til at automatisere frontend-kodningsprocessen. For eksempel med Sass kan vi bruge variabler. Så i stedet for at køre en kommando 'find og erstat' gennem en lang CSS-fil for at finjustere en farveværdi, kan vi simpelthen ændre variabeldefinitionen.



Sass giver os også mulighed for at skrive funktioner til at generere blokke med gentagen stilkode. For eksempel kan en knapfunktion acceptere farven eller stilen som en parameter og generere al standard CSS for et websteds knap-UI: kantradius, gradienter, tekstfarver og så videre. Vi kan også opdele vores kæmpe stilark i organiserede moduler. Næsten ethvert CMS, plugin og webapp bruger mapper og delnumre for at forbedre vedligeholdelse af kode: Sass giver os mulighed for at gøre dette med vores CSS.



De teknikker, der er forklaret i denne vejledning, er specifikke for Sass ved hjælp af SCSS syntaks , men de kan anvendes på de fleste andre forprocessorer - som Mindre eller Stylus - såvel.

Konvertering af temastilark

Hvis WordPress-temaet, du bruger, allerede indeholder Sass-filer, er processen med at konvertere eksisterende temastilark til Sass gjort for dig. Jeg starter typisk nye temaer med Underscores-skabelonen fra Automattic (underscores.me). Når du opretter en ny temapakke fra sit websted, finder du en '_sassify!' indstilling, hvis du klikker på linket 'Avancerede indstillinger'. Dette giver Automattics standard Sass-bibliotek til dig, når du downloader det blanke tema.



Understreger

WordPress-temaet Understreger tilbyder en mulighed for brugere at downloade en version af temaet, der allerede indeholder Sass-partialer

Hvis det tema, du bygger eller redigerer, ikke inkluderer Sass-filer, begynder du dog med at konvertere den eksisterende CSS-fil til Sass. Dette trin afslører en stor fordel ved at bruge Sass (SCSS): Sass-compileren læser almindelig CSS uden problemer overhovedet. Alt hvad du skal gøre for at bruge den originale style.css som Sass er at duplikere den og omdøbe den style.scss.

lav dig selv til et videospilkarakter

Opsætning af Sass-partialer

Tidligere nævnte jeg, at Sass forbedrer vores arbejdsgang ved at lade os bryde tusindvis af CSS-linjer i modulære filer kaldet partials. Lad os gennemgå dette trin, før vi går til kompilatormetoder.



Hvis du har konverteret en eksisterende CSS-fil til Sass, er alt, hvad du hidtil har, en .scss-fil, der er lige så uhåndterlig som den CSS-fil, den kom fra. På dette tidspunkt kan du begynde at bruge variabler og skrive mixins eller funktioner, men Sass er ikke modulær eller organiseret endnu. Du vil gruppere din CSS-fil i sektioner, der tjener individuelle formål. Målet er at være i stand til at finde ud af, hvor koden findes baseret på dens filnavn.

Nogle kodemoduler, som du sandsynligvis vil isolere, inkluderer navigation, typografiske stilarter, sidebar-widgets, sidefod og et gittersystem (selvom listen ikke er omfattende på nogen måde, er det bare et udgangspunkt).

Derefter klipper og indsætter du hvert modulært afsnit af CSS i sin egen Sass-del. En Sass-parts filnavn starter altid med en understregning (_). Dette beder kompilatorer om ikke at oprette en unik CSS-fil baseret på denne Sass-fil.

En compiler-app, der ser en mappe fuld af Sass og automatisk genererer CSS, opretter style.css baseret på style.scss, men den opretter ikke navigation.css baseret på _navigation.scss. For at kompilere alle de partialer, du lige har oprettet, skal du @importere dem i din vigtigste Sass-fil.

Hver gang du kopierer en kodeblok til en delvis, skal du erstatte den i den primære .scss-fil med @import 'partial-name' ;. Hvis du flytter dine sidefodstil til _footer.scss, skal du tilføje @import 'sidefod' ;. Medtag ikke _ eller .scss i importen: kun navnet på filen.

Hvis du ønsker at blive rigtig organiseret og bryde overskriftsnavigation og sidefodsnavigation i to separate partialer i en / navigation / mappe, skal du inkludere mappenavnet i importen:

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

Det er vigtigt at huske, at CSS-kaskaden stadig gælder for kode skrevet i Sass. Stilarter skrevet i deltekster importeret senere har muligheden for at tilsidesætte typografier i deltekster importeret tidligere.

Det er også klogt at importere partialer, der indeholder dine mixins og variabler i begyndelsen af ​​din primære Sass-fil, så senere partials faktisk kan bruge disse variabler og mixins.

WordPress-kommentarer

I henhold til WordPress style.css-krav er vi nødt til at sikre, at vores kompilator bevarer WordPress-kommentarerne øverst i style.css. Når Sass 'output_style er indstillet til: komprimeret, stripper den alle kommentarer, når den kompilerer CSS.

For at sikre, at disse kommentarer efterlades intakte, skal du tilføje et udråbstegn (!) Til begyndelsen af ​​kommentarblokken i style.scss:

hvad der gør et godt karakterdesign
/*! 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 til Sass

Nu hvor vi har brudt et langt typografiark i mindre modulære partialer, kan vi begynde at omformulere den originale CSS, så den passer til vores Sass-præferencer. Nogle nyttige Sass-værktøjer til refactoring af kode er variabler, indlejring, funktioner og mixins.

Hvis du vil ændre nogle farver eller oprette en standardtypeskala, er variabler den bedste måde at gemme alle disse data på et enkelt sted og nemt foretage ændringer på hele webstedet. Hvis du ikke allerede har oprettet en del kaldet _variables.scss, anbefaler jeg at gøre det nu - og importere det øverst i din vigtigste Sass-fil. Her er nogle variabler, du måske vil sætte i den delvise:

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

Når du har konfigureret disse variabler, kan du søge i dine partialer og erstatte værdier med variabelnavne:

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

Du kan bruge en Sass-funktion kaldet 'nesting' til at gøre komplekse vælgere mere læsbare. Din start-CSS kan omfatte typografier for flere elementer i sidens sidepanel:

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

Du kan rede stilarter inde i andre stilblokke, og Sass vil kombinere vælgere for at oprette de komplekse vælgere. Koden nedenfor kompileres til den samme output som den originale CSS (som vist i koden ovenfor).

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

I indlejring og kan bruges som pladsholder for hele strengen af ​​vælgere over den. Da indlejring sætter et mellemrum mellem vælgerne, kan det være nyttigt, når du bruger pseudoklasser og pseudoelementer:

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

& Kan også bruges til at duplikere eller vende rækkefølgen af ​​vælgerne:

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

Du undrer dig måske over, om det er værd at bruge tid på at refakte ved at indlejre egenskaber. Mens indlejring kan øge læsbarheden (selvom dette er subjektivt), er det også et værktøj, der skal bruges omhyggeligt. De fleste Sass-eksperter anbefaler en 'Inception-regel' til Sass-reden: aldrig rede mere end tre niveauer dybt. Det er klogt at bruge Sass nesting sparsomt. Hvis det ikke giver mening i din arbejdsgang, skal du ikke tvinge den.

Sass

Sass er det mest modne, stabile og kraftfulde professionelle CSS-udvidelsessprog

Hvis du gentagne gange beregner bestemte egenskaber i din CSS, kan du erstatte denne proces med en Sass-funktion. En funktion tager de parametre, du giver den, og returnerer en værdi. Det genererer ikke CSS-egenskabsværdipar, men det kan generere værdier for dig.

Her er et eksempel på en funktion til beregning af falmede farver ved svævning:

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

Vi kan også omlægge vores kode ved at tage gentagne blokke af kode og erstatte dem med mixins. Et godt eksempel på et nyttigt mixin er en 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 kan også tage parametre for at generere tilpasset output. Dette er meget nyttigt til designmønstre som knapper eller alarmer:

hvordan man laver en animation i Photoshop
// 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); }

understreger. mig

Undercores.me-temaet sorterer deldele i mapper inklusive 'elementer', 'formularer', 'layout' og 'medier'

Et almindeligt råd, som du muligvis ser online, er at bruge mixins til prefixing på tværs af browsere. Jeg anbefaler dog normalt imod dette. Jeg finder det Autofrefixer er en meget bedre måde at automatisere præfikser på.

Hvis du ikke er i stand til at køre Autoprefixer og er afhængig af Sass-mixins, Kompas 'mixin-bibliotek tillader brugerkonfiguration og holder sig ajour med Kan jeg bruge data.

Organiser dine partials

For at opsummere har vi taget temaets eksisterende stilark fra hinanden og omformuleret nogle koder for at gøre tingene renere og Sassier. Nu kan vi organisere vores partialer for at forbedre vedligeholdelsesevnen på lang sigt.

organisering af din CSS

Organisering af din CSS Med Sass kan udviklere bruge værktøjer som variabler, indlejring, funktioner og mixins til at organisere og automatisere deres CSS

Husk, at kaskaden stadig betyder noget. Sass-kompileret CSS er ligesom almindelig CSS, idet typografier, der vises senere i typografiarket, kan tilsidesætte typografier, der vises tidligere. Importer som regel dine generelle typografier, inden du importerer specifikke typografier.

Lignende partialer kan organiseres i mapper. Der er to måder at importere Sass-partialer fra mapper på. Den første er at importere hver fil til style.scss inklusive mappenavnet i importdirektivet, som dette:

@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

Den anden (og ganske vist mere komplicerede) metode er at oprette en pladsholderpartial i hver mappe, der importerer de andre deldele i den mappe (næste kolonne):

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

Begge disse metoder importerer de samme partialer i samme rækkefølge. Den første metode er enklere på overfladen, men den anden metode har fordelen ved at holde style.scss pæn og flytte enhver kompleksitet til de moduler, den er afhængig af.

Der er næsten lige så mange måder at organisere Sass-partials på, som der er udviklere, der prøver at organisere Sass-partials. Du finder flere gode muligheder i boksen 'Ressourcer' på side 88.

Her er en ret simpel organisationsplan, du kan bruge:

hvordan man tegner en brølende løve
  • / base / (variabler, mixins, reset, typografi)
  • / layout / (gitter, sidehoved, sidefod)
  • / leverandører / (plugins, leverandører osv.)
  • / komponenter / (knapper, menuer, formularer, widgets)
  • / sider / (hjem, destinationsside, portefølje)

Opsummering

Denne artikel begynder kun at undersøge potentialet ved at bruge Sass i WordPress-temaudvikling. Chancerne er stærke for, at du er ivrig efter mere information nu, især hvis dette er den første ting, du har læst om emnet.

Tjek boksen 'Ressourcer' for mere læsning omkring emnet - disse artikler indeholder flere variationer på en Sass-WordPress-arbejdsgang. Nogle af deres råd adskiller sig fra det, jeg har anbefalet (især om emnet til organisering af partialer), men det er fint - find de teknikker og arbejdsgange, der fungerer for dig!

James Steinbach har oprettet en eksklusiv screencast til at gå med denne vejledning, som du kan se nedenfor.

Ord: James Steinbach