Hvis du er en aspirerende WordPress-temadesigner, står du sannsynligvis allerede overfor problemet med lange CSS-filer, samtidig som du holder dem strukturerte, skalerbare og lesbare. Dessuten har du sikkert hørt at mange designere og frontend-utviklere anbefaler å bruke et CSS-preprosessorspråk som Sass eller LESS. Men hva er det? hvordan begynne å jobbe med dem? I denne artikkelen viser vi deg hvordan du kommer i gang med Sass. Vi vil også forklare hva en CSS-forprosessor er, hvorfor du trenger den, og hvordan du installerer og bruker den riktig.
Hva er Sass?
CSS-en vi bruker er designet for å lage stilark for nettsteder. Men etter hvert som nettet utviklet seg og behovene til designere utviklet seg, var det nødvendig med et stilarkspråk som ville tillate deg å gjøre mer med mindre tid og krefter. CSS-forprosessorspråk som Sass lar oss bruke funksjoner som for øyeblikket ikke er tilgjengelige i CSS, for eksempel bruk av variabler, grunnleggende matematiske operatorer, nestede regler, mixins, etc.
Det ligner på mange måter PHP, som er en forprosessor som kjører skript på serveren og genererer HTML ved utgangen. Sass analyserer også .scss-filer for å generere CSS-filer som kan brukes av nettlesere.
Siden versjon 3.8 har WordPress admin stilark blitt portert for å bruke Sass for utvikling. Det er mange WordPress-butikktemaer der ute, og utviklere har med hell brukt Sass for å fremskynde utviklingsprosessen.
Bruke Sass til å utvikle WordPress-temaer
De fleste temautviklere bruker lokal hosting for arbeidet sitt før de ruller ut et tema til en live-side. Siden Sass er et preprosessorspråk, må du installere det på din lokale vert.
Først må du installere Sass. Den kan brukes som en kommandolinje, men det er flere GUI-applikasjoner for Sass. Vi anbefaler å bruke Koala siden det er gratis, åpen kildekode og tilgjengelig for Mac, Windows og Linux.
For å teste dette eksemplet, må du lage et nytt tema. Bare opprett en ny mappe på / wp-innhold / temaer /... Du kan navngi det hva du vil, for eksempel "mytema". Inne i denne tomme mappen, lag en annen mappe og navngi den stilark.
Lag en fil i stilarkmappen style.scss ved å bruke et hvilket som helst tekstredigeringsprogram som Notisblokk.
Nå må du åpne Koala og klikke på plusstegnet for å legge til et nytt prosjekt. Deretter velger du temamappen din og legger den til i prosjektet ditt. Du vil legge merke til at Koala automatisk finner Sass-filen i stilarkmappen din og viser den.
Høyreklikk på Sass-filen og velg alternativet Angi utgangsbane... Deretter velger du rotmappen til temaet ditt, fra vårt eksempel vil dette være / wp-innhold / temaer / mytema / og trykk Enter. Koala vil generere utdata-CSS-filen i temamappen din. For å teste den må du åpne Sass-filen din - style.scss- i et tekstredigeringsprogram som Notisblokk og legg til følgende kode til det:
$ fonter: arial, verdana, sans-serif; body (font-family: $ fonts;)
Lagre nå endringene og gå tilbake til Koala. Høyreklikk på Sass-filen din, og et sidefelt dukker opp til høyre. For å kompilere Sass-filen din, klikk ganske enkelt på knappen 'Kompilere'... Du kan se resultatet ved å åpne filen style.css i temamappen din og resultatet blir dette:
Brødtekst (font-familie: arial, verdana, sans-serif;)
Merk at vi har definert variabelen $ fonter i Sass-filen vår. Nå, uansett hvor vi trenger å legge til en skriftfamilie, trenger vi ikke å skrive alle skriftene om og om igjen. Vi kan bare bruke $ fonter.
Hvilke nyttige ting bringer Sass til CSS?
Sass er utrolig kraftig, bakoverkompatibel og ekstremt lett å lære. Som vi nevnte tidligere, kan du lage variabler, nestede regler, mixins, bruke importer, matematiske og logiske operatorer, etc. Nå skal vi vise deg noen eksempler, og du kan prøve dem på WordPress-temaet ditt.
Administrere flere stilark
En av de største utfordringene du vil møte som WordPress-temadesigner er store stilark med mange seksjoner. Du vil sannsynligvis rulle opp og ned i filen mange ganger for å endre egenskaper mens du jobber med temaet. Ved å bruke Sass kan du importere flere filer til hovedstilarket ditt og ende opp med en enkelt CSS-fil for temaet ditt.
Hva med CSS @import?
Problemet med å bruke @import i CSS-filen din er at hver gang du legger til en @import, sender CSS-filen en ekstra HTTP-forespørsel til serveren. Dette påvirker sidelasting, noe som ikke er veldig bra for et prosjekt. På den annen side, når du bruker @import i Sass, vil den inkludere filene i Sass-filen og slå den sammen til én CSS-fil for alle nettlesere.
For å forstå hvordan du bruker @import i Sass, må du først opprette en fil reset.scss i temaets stilarkmapp og lim inn følgende kode i den.
/ * http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 Lisens: ingen (offentlig domene) * / html, body, div, span, applet, objekt, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, akronym, adresse, stor, sitere, kode, del, dfn, em, img, ins, kbd, q, s, samp, liten, strike, sterk, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, feltsett, form, etikett, legende, tabell, bildetekst, tbody, tfoot, thead, tr, th, td, article, side, canvas, details, embed, figure, figcaption, footer, header, hgroup, meny, nav, utdata, rubin, seksjon, sammendrag, tid, merke, lyd, video (margin: 0; utfylling: 0; kantlinje: 0; skriftstørrelse: 100 %; font: arv; vertikaljustering: grunnlinje ;) / * HTML5 display-rolle tilbakestilt for eldre nettlesere * / article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section (display: block;) body (line-height: 1;) ol, ul (listestil: ingen;) blokksitat, q (anførselstegn: ingen;) blokksitat: før, blokksitat: etter, q: før, q: etter (innhold: ""; innhold: ingen;) tabell (grense- kollaps: c ollapse; kantlinjeavstand: 0; )
Åpne nå hovedfilen style.scss og legg til følgende linje der du vil importere tilbakestillingsfilen.
Artikkelen "SASS for designere og ikke bare" for 2013-02-21 ble omdøpt til " SASS-syntaks"og oppdatert (2014-02-17)
Sass er et preprosessorspråk; forprosessorer kompilerer CSS-koden som vi skriver i prosesseringsspråket (SASS) til ren CSS-kode.
SASS-dokumentasjon er mer rettet mot programmerere, så designere er ikke alltid villige til å begynne å jobbe med SASS. I tillegg er fordelene ved å bruke SASS fra designeres synspunkt ikke alltid eksplisitt oppgitt.
I denne artikkelen vil jeg dekke noen få enkle prinsipper. Jeg er ingen SASS-ekspert, men jeg bør påpeke at bruk av sass er en klok avgjørelse.
Så hva er disse fordelene? Du vil være i stand til å strukturere koden logisk, og dermed fremskynde prosessen med å skrive kode; antall repetisjoner vil bli betydelig redusert (variabler vil hjelpe oss med dette), koden vil bli mye enklere å vedlikeholde. SASS-språket gjør det enkelt å jobbe med et prosjekt, uansett hvem du er – en programmerer eller designer. Dette er faktisk tilfelle.
Variabler
I SASS, navnet variabel starter med et dollartegn ($). Variableverdier er identiske med CSS-egenskapsverdier.
La oss starte med det grunnleggende, nemlig variabler. La oss se på variabler basert på følgende eksempel. Vi har en tendens til å bruke flere farger i dokumentet vårt. Som et resultat må du skrive om og om igjen fargeverdier i hex- eller rgb-format. Hvis vi ønsker å endre en hvilken som helst farge, må vi gå gjennom automatisk erstatning gjennom hele dokumentet. Når det er sagt, kan vi ikke være sikre på at vi ikke vil fange unødvendig verdi.
A (farge: # 822733;) .summary (farge: # 822733;) .copyright (farge: # 822733;)
Du kan for eksempel ha flere regler som definerer den mørkerøde fargen for de ønskede velgerne. SASS-språket lar oss gjøre følgende: i begynnelsen av dokumentet kan vi definere en variabel som heter $ brand-color og deretter i dokumentet, i stedet for selve verdien, sette navnet på variabelen. Så, hvis vi trenger å endre fargen, trenger vi bare å endre verdien av variabelen $ merke-farge og dette vil endre fargen på alle reglene som bruker variabelen $ merke-farge.
// Mitt SASS-fargebibliotek $ merkefarge: # 822733; a (farge: $ merke-farge;) .summary (farge: $ merke-farge;) .copyright (farge: $ merke-farge;)
Numeriske verdier for variabler
Variabler kan inneholde ikke bare strenger, men også tall som du kan manipulere. Hvis du bruker rutenett, eller hvis layouten din skaleres basert på spesifikke verdier, bruker du sannsynligvis disse verdiene gjennom hele stilfilen. For eksempel, hvis du konsekvent bruker 10px, kan du definere en variabel, for eksempel $ unit = 10px. Denne variabelen kan brukes gjentatte ganger i koden din. Som vanlig vil verdien (10px) erstatte variabelnavnet.
Men hva om du trenger å doble verdien av en variabel? For eksempel vil du doble bunnmargen til et element. Ved å bruke SASS kan du legge til litt enkel matematikk (+, -, *, /,%), for eksempel for vårt tilfelle:
$ enhet = 10px; h1, h2, h3 (margin-bottom: $ unit;) p (margin-bottom: $ unit;) til side (margin-bottom: $ unit * 2; / * 20px * /) bunntekst (margin-top: $ unit * 4; / * 40px * /)
Urenheter
Innblanding kan sammenlignes med en blokk med deklarasjoner som gjentas i kode. Dette er et stykke kode som du kan bruke hvor som helst i dokumentet. Du vil ikke bare eliminere unødvendig repetisjon, men også gjøre koden din renere, da du slipper behovet for å bruke samme klasse for forskjellige elementer.
For eksempel har du en separator på nettstedet ditt som du bruker ganske ofte. Du kan for eksempel bruke dem til å bryte hovedblokker (for eksempel artikler og overskrift) eller til og med avsnitt. Skillet har bunnpolstring, bunnmarg, kant og skygge.
For å lage en separator kan du legge til klassen.shadow-border i elementet. Men dette vil "forurense" html- og css-filen din betydelig.
Shadow-border (border-bottom: 1px solid # a4a4a4; -webkit-box-shadow: 0px 2px 5px 0px rgba (200, 200, 200, 0.6); box-shadow: 0px 2px 5px, 200px 0px 200px , 0,6); padding-bottom: 20px; margin-bottom: 40px;)
Hvis du vil ha riktig struktur i css-filen og ren html-oppmerking, må du legge til regelen ovenfor til de tilsvarende html-elementene. Det er verdt å merke seg at hvis det er mange elementer med en separator, vil dette "ødelegge" stilfilen betydelig, noe som gjør det vanskelig å vedlikeholde stilfilen.
Header, article, p.intro (border-bottom: 1px solid # a4a4a4; -webkit-box-shadow: 0px 2px 5px 0px rgba (200, 200, 200, 0.6); box-shadow: 0px 2px 5px 5px (2px 2px 5px) , 200, 200, 0,6); padding-bottom: 20px; margin-bottom: 40px;)
Ved hjelp av @mixin, kan du definere et navn for deklarasjonsblokken. Dette navnet skal ikke på noen måte knyttes til HTML-koden din.
@mixin shadow-border (border-bottom: 1px solid # a4a4a4; -webkit-box-shadow: 0px 2px 5px 0px rgba (200, 200, 200, 0.6); box-shadow: 0px 2px 0px 0px (0px 2px 0px 0rg , 200, 0,6); padding-bottom: 20px; margin-bottom: 40px;)
Deretter, for å inkludere en mixin på et element, trenger du bare å inkludere mixin-navnet: @include shadow-border;
@mixin shadow-border (border-bottom: 1px solid # a4a4a4; -webkit-box-shadow: 0px 2px 5px 0px rgba (200, 200, 200, 0.6); box-shadow: 0px 2px 0px 0px (0px 2px 0px 0rg , 200, 0.6); padding-bottom: 20px; margin-bottom: 40px;) artikkel (@include shadow-border;) header (@include shadow-border;) p.intro (@include shadow-border;)
Ser bra ut.
Parametre for urenheter
Parametrene for mixin er spesifisert i parentes etter navnet på mixin; mixin-innholdet er omsluttet av krøllete seler.
@mixin border-radius ($ radius: 1px) (-webkit-border-radius: $ radius; -moz-border-radius: $ radius; border-radius: $ radius;) / * USE * / .example-class ( bakgrunnsfarge: # 900; @inkluder kantradius (20px);)
Hekkende urenheter
Noen ganger er det veldig praktisk å kunne hekke en urenhet i en annen. For eksempel må vi legge til en mixin til en eksisterende mixin:
$ kantfarge: # a4a4a4; $ enhet: 10px; @mixin subtle-shadow (-webkit-box-shadow: 0px 2px 5px 0px rgba (200, 200, 200, 0.6); box-shadow: 0px 2px 5px 0px rgba (200, 200,.0); shadow-border (@include subtil-shadow; border-bottom: $ unit / 10 solid $ border-color; padding-bottom: $ unit * 2; margin-bottom: $ unit * 4;) artikkel (@include shadow-border ;) header (@inkluder skyggekant;) p.intro (@inkluder skyggekant;)
Vedlegg
Mixins er ikke det eneste du kan neste i CSS-velgere (eller rettere sagt, i deklarasjonsblokker i en sass-fil). I SASS kan du reirelementer i hverandre... Dette vil eliminere dupliserte velgere og gjøre koden lettere å lese.
/ * vanlig CSS * / .module h3 (font-weight: bold;) .module p (padding-bottom: 10px;)
/ * skriv i SASS * / .module (h3 (font-weight: bold;) p (padding-bottom: 10px;))
Vedlegg og @ medieforespørsler
Vedlegg blir ekstremt nyttige når du arbeider med medieforespørsler. Vanligvis, når du jobber med mediespørringer, må du lage flere stiler for forskjellige skjermoppløsninger, og noen ganger til og med lage en egen stilfil.
/ * viewport - alle, inkludert nettlesere som ikke støtter @media * / article (font-size: 14px; line-height: 25px;) article h2 (font-size: 18px; padding-bottom: 15px;) / * for 300px visningsporter og bredere (mobil først) * / @media only-skjerm og (min-bredde: 300px) (artikkel (linjehøyde: 20px; bredde: 90%;) artikkel h2 (polstring-bunn: 10px;)) / * for 600px visningsporter og bredere * / @media only-skjerm og (min-bredde: 600px) (artikkel (linjehøyde: 25px; bredde: 80%;) artikkel h2 (polstring-bunn: 15px;)) / * for 900px viewports og bredere * / @media only screen og (min-bredde: 900px) (artikkel (bredde: 60%;)) / * 1200px viewports og bredere * / @media only screen and (min-width: 1200px ) (artikkel ( font-size: 16px; line-height: 30px; width: 50%;) artikkel h2 (font-size: 21px; line-height: 35px; padding-bottom: 20px;))
SASS, derimot, lar deg legge alle mediespørringer rett inne i elementene. Dette vil gjøre det enklere å finne og redigere stiler som påvirker responsiv layout.
Artikkel (font-size: 14px; line-height: 25px; h2 (font-size: 18px; padding-bottom: 15px;) @media only-skjerm og (min-bredde: 300px) (linje-høyde: 20px; bredde: 90%; h2 (utfylling-bunn: 10px;)) @media only-skjerm og (min-bredde: 600px) (linjehøyde: 25px; bredde: 80%; h2 (utfylling-bunn: 15px;)) @media only skjerm og (min-bredde: 900px) (bredde: 60%;) @media only-skjerm og (min-bredde: 1200px) (skriftstørrelse: 16px; linjehøyde: 30px; bredde: 50%; h2 (font- størrelse: 21px; linjehøyde: 35px; polstring-bunn: 20px;)))
Importerer @import-setningen i SASS
@Importoperatør
lar deg inkludere innholdet i en tredjeparts CSS (SCSS) fil i gjeldende CSS (SCSS) fil.
@import er ikke tillatt å settes inn etter noen annen erklæring enn @charset eller annen @import.
For å inkludere innhold, for eksempel _style_two.scss, må du skrive slik:
@import "style_two.scss"; / * inkluderer uten understrek * /
Viktig: hvis du ikke inkluderer en spesifikk fil, men en mappe, vil ikke css-filer bli generert for filer som starter med _
.
For eksempel vil tilstedeværelsen av en style.scss-fil resultere i opprettelsen av style.css, men tilstedeværelsen av en _some.scss-fil vil ikke. Dermed betyr et understrek at filen ikke er et uavhengig stilark og bare kan importeres til et annet stilark.
Løkker i SASS
Syntaksen for loop-setningen (hver) er som følger: $ var in ... $ var er navnet på variabelen, og
oppgi verdien av $ var-variabelen.
I stedet for $ var, verdier fra , så vises innholdet i loopen i stilfilen (etter antall verdier
).
For eksempel:
SCSS
@hvert $ dyr i puma, sjøsnegl, egret, salamander (. # ($ dyr) -ikon (bakgrunnsbilde: url ("/ bilder / # ($ dyr) .png");))Kompilert til:
CSS
.puma-icon (bakgrunnsbilde: url ("/ bilder / puma.png");) .sea-slug-icon (bakgrunnsbilde: url ("/ images / sea-slug.png");) .egret -ikon (bakgrunnsbilde: url ("/ bilder / egret.png");) .salamander-ikon (bakgrunnsbilde: url ("/ bilder / salamander.png");)@Utvid operatør
Det oppstår ofte en situasjon når en klasse må ha alle stilene til en annen klasse, i tillegg til sine egne stiler. Den vanligste løsningen er å bruke to klasser; den første inneholder generelle stiler, den andre - spesifikke.
@extend-operatoren unngår disse problemene ved å la én velger arve stiler fra en annen velger. For eksempel:
SCSS
.error (border: 1px # f00; bakgrunnsfarge: #fdd;) .error.intrusion (bakgrunnsbilde: url ("/ image / hacked.png");) .seriousError (@extend .error; border-width : 3px ;)Kompilert til:
CSS
.error, .seriousError (kantlinje: 1px # f00; bakgrunnsfarge: #fdd;) .error.intrusion, .seriousError.intrusion (bakgrunnsbilde: url ("/ image / hacked.png");) .seriousError ( kantbredde: 3px;)Oversettelse av artikkelen: Den absolutte nybegynnerguiden til Sass.
Andrew Chalkley.
Hva er SASS?
SASS er en forkortelse for Syntaktisk fantastiske stilark Er et CSS-basert metaspråk, hvis navn kan oversettes som "CSS med god syntaks" designet av Hampton Catlin.
Det er et verktøy for å forenkle prosessen med å generere CSS-stiler, noe som gjør det mye enklere å utvikle og vedlikeholde koden din.
Har du for eksempel noen gang måttet gå gjennom hele innholdet i et stilark når du henvender deg til en bestemt ubesluttsom klient for å finne en viss HEX-fargeverdi for å erstatte den med en annen? Eller gå til en ikke alltid tilgjengelig kalkulatorapplikasjon for å beregne kolonnebredden for en mal med flere kolonner?
SASS har verktøy til disposisjon for å redde deg fra denne typen rutiner. Disse inkluderer variabler, blandinger, hekking og velgerarv.
I prinsippet ligner SASS-kode på CSS, men det viktigste kjennetegnet som er umiddelbart slående er fraværet av et semikolon etter hvert eiendomsverdi-par og krøllete klammeparenteser.
La oss ta følgende del av CSS som et eksempel:
#skyskraperannonse
{
display: blokk;
bredde: 120px;
høyde: 600px;
}
#leaderboard_ad
{
display: blokk;
bredde: 728px;
høyde: 90px;
}
Som tilsvarer denne SASS:
#skyskraperannonse
display: blokk
bredde: 120px
høyde: 600px
#leaderboard_ad
display: blokk
bredde: 728px
høyde: 90px
SASS bruker et intervall (innrykk i begynnelsen av neste linje) som er lik to mellomrom for å indikere nesting av kodefragmenter. ( * I det siste utdraget for klarhets skyld fremhevet jeg disse områdene med rød bakgrunn.)
Nå som vi har en ide om hvordan SASS-koden genereres, la oss se på spørsmålene som gjør det på denne måten. utmerket.
Variabler.
I SASS må du bruke dollartegnet $ før variabelnavnet for å deklarere en variabel. Og hvis navnet på variabelen din er rød, kan vi etter kolon spesifisere den tilsvarende verdien slik:
SASS har innebygde funksjoner som mørkere og lysere som kan brukes til å endre verdiene til denne typen variabler.
Så i følgende eksempel vil skriftfargen i avsnitt også være rød, men mørkere enn den som brukes i h1-overskrifter:
$ rød: # FF4848
$ skriftstørrelse: 12px
h1
farge: $ rød
s
farge: mørkere ($ rød, 10%)
Du kan utføre aritmetiske operasjoner med variabler, som addisjon og subtraksjon, så lenge verdiene som brukes er av samme datatype. Hvis vi for eksempel trenger å bruke en mørkere nyanse, er alt vi trenger å gjøre å trekke fra fargeverdien som allerede er brukt i koden, lagret i en variabel, en liten heksadesimal HEX-verdi lik for eksempel #101. Det samme gjelder tilfellet når det er nødvendig å endre verdien på skriftstørrelsen, for eksempel å øke den med 10 piksler, for dette legger vi bare til de manglende piksler:
p.addisjon_og_subtraksjon
farge: $ rød - # 101
font-size: $ fontsize + 10px
Hekking.
Det er to typer hekking i SASS.
Velger hekking.
Dette er den første typen nesting som ligner på den som brukes til å strukturere HTML-kode:
$ skriftstørrelse: 12px
Høyttaler
.Navn
font:
vekt: fet
størrelse: $ fontstørrelse + 10px
.posisjon
font:
størrelse: $ skriftstørrelse
Hvis du tar en titt på den resulterende CSS-koden, vil eventuelle kommentarer være overflødige. Ved å legge .name-klassen inn i .speaker-klassen ( * på samme måte - med to mellomrom i begynnelsen av neste linje) CSS-velgeren .speaker.name genereres. Det samme gjelder for det neste klassenavnet .posisjon, plassert etter deklarasjonen av egenskaper for den første velgeren, som et resultat av nesting som den andre .speaker.posisjonsvelgeren er dannet av:
Speaker.name (
font-weight: fet;
skriftstørrelse: 22px; )
.speaker.position (
skriftstørrelse: 12px; )
Hekkeegenskaper.
Den andre typen nesting lar deg strukturere egenskaper med ett prefiks (* fontfamilie, skriftstørrelse, skriftvekt eller kantstil, kantfarge, kantradius osv.):
$ skriftstørrelse: 12px
Høyttaler
.Navn
font:
vekt: fet
størrelse: $ fontstørrelse + 10px
.posisjon
font:
størrelse: $ skriftstørrelse
I eksemplet ovenfor bruker vi den overordnede generiske egenskapserklæringsfonten: og deretter på en ny linje etter innrykk med to mellomrom spesifiserer vi den andre delen av egenskapen, som vanligvis er etter bindestreken.
Det vil si at hvis vi spesifiserer font:-egenskapen, på neste linje etter to mellomrom, vekt:-egenskapen, vil resultatet tilsvare den velkjente font-weight-egenskapen.
Speaker.name (
font-weight: fet;
skriftstørrelse: 22px; )
.speaker.position (
skriftstørrelse: 12px; )
Modulen gir støtte for alle bindestreksegenskaper.
Denne typen nesting er en fin måte å organisere og strukturere CSS på og unngå unødvendige repetisjoner. ( *TØRKE- "Ikke gjenta deg selv" - "Ikke gjenta deg selv." Situasjoner der stilene deres gjentas og/eller overstyres andre steder ved CSS-formatering av visse elementer, noe som kompliserer lesbarheten og vedlikeholdet av koden).
Mixins.
En annen flott SASS-funksjon er blandinger.
Mixins lar deg gjenbruke hele biter av SASS-kode og til og med sende argumenter til dem om nødvendig. Og, viktigere, kan du også spesifisere deres opprinnelige verdier.
For å definere en mixin, bruk @mixin nøkkelordet spesielt reservert i SASS, etterfulgt av navnet på mixin du ønsker. Hvis du trenger argumenter, skriv dem i parentes. Verdiene satt for standardargumentet er spesifisert når du definerer mixin, atskilt med kolon. ( * Med andre ord, mixins er CSS-funksjoner.)
Prosedyren for å bruke mixins er veldig enkel - etter @include nøkkelordet, spesifiser navnet på ønsket mixin og oppgi de nødvendige parameterne, hvis noen, i parentes.
Ta en titt på følgende eksempel:
@mixin border-radius ($ beløp: 5px) / * definer mixin * /
-moz-border-radius: $ beløp
-webkit-border-radius: $ beløp
border-radius: $ beløp
h1 / * bruk mixin * /
@inkluder kantradius (2px)
Høyttaler
@inkluder kantradius
Denne SASS vil bli konvertert til følgende CSS etter kompilering:
h1 (
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
kantradius: 2x; )
høyttaler (
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
kantradius: 5px; )
For h1-overskriften spesifiserte vi eksplisitt radiusen til kanthjørnene, men for elementet med klassenavnet .speaker gjorde vi ikke dette, så standardverdien på 5px ble tatt.
Velger arv.
En annen utmerket en funksjon i SASS-syntaksen er muligheten til velgere til å arve alle stiler definert for andre velgere. For å dra nytte av denne funksjonen må du bruke nøkkelordet @extend, etterfulgt av en velger hvis egenskaper du vil arve:
h1
kantlinje: 4px solid # ff9aa9
Høyttaler
@utvid h1
kantbredde: 2px
Som vil bli kompilert til:
h1, .speaker (
kantlinje: 4px solid # ff9aa9; )
høyttaler (
kant-bredde: 2px; )
(* Legg merke til grenseerklæringen: 4px solid # ff9aa9; gjentas ikke innenfor regelen med .speaker-velgeren, men i stedet legges en andre velger til den første regelen. Det er med andre ord ingen duplisering av kode.)
Prøv SASS i aksjon.
På nett.
Du kan bli kjent med SASS online uten først å installere modulen på din lokale datamaskin.
Men før du begynner å eksperimentere, velg alternativet nederst på siden "Innrykket syntaks".
Ved å installere på en PC.
SASS i seg selv er en Ruby-plattformperle. Derfor, for å installere det, kan man ikke gjøre uten først å installere selve plattformen og pakkebehandleren til dette programmeringsspråket RubyGems. Etter å ha installert selve plattformen og administratoren, kjør følgende kommando i konsollen:
gem install sass
SASS-modulen kan brukes som et kommandolinjeverktøy for å konvertere SASS-filer til CSS-formatfiler.
Dette kan for eksempel gjøres ved å skrive inn følgende kommando:
sass --watch sass_folder: stylesheets_folder
Der sass_folder er banen til mappen som inneholder SASS-filene (det vil si med .sass-utvidelsen), og stylesheets_folder er banen til mappen der de resulterende CSS-filene vil bli lagret etter kompilering. Kommandoen --watch forteller modulen å se etter endringer i den angitte mappen, og hvis det er noen, konverter original.sass-filene til tilsvarende .css-filer etter å ha lagret dem.
Omvendt CSS til SASS konvertering.
Du kan begynne å bruke SASS ved å konvertere stilene som brukes i dine eksisterende prosjekter til dette formatet ved å bruke "sass-convert"-verktøyet.
For å gjøre dette, på kommandolinjen, skriv inn banen til mappen hvis innhold du vil konvertere ( * det vil si, bare gå til ønsket katalog der kildefilene er plassert). Kjør deretter verktøyet nevnt ovenfor og fortell det følgende parametere:
sass-konverter --fra css --til sass -R.
Der -R-flagget spesifiserer den rekursive måten å utføre operasjonen på. Og poenget etter det. betyr at de resulterende sass-filene vil bli lagret i gjeldende katalog. ( * Om nødvendig, i stedet for et punktum, kan du spesifisere banen til mappen der du vil lagre de resulterende filene.)
Hva er Sass, hvorfor du trenger det, dets muligheter, installasjon og hvordan du bruker det i prosjektene dine
Hva er Sass
Sass(Syntactically Awesome Stylesheets) er en av de mest avanserte, stabile og funksjonsrike forprosessorene. Det er veldig populært blant utviklere. Sass er mer avansert versjon av CSS som har mye et bredere spekter av funksjoner, og Sass er designet for å forenklinger cascading stilark.
Sass-syntaks er av 2 typer: SASS og SCSS... SCSS ligner mer på CSS, mens SASS ligner mer på krøllete tannregulering. Nestede elementer implementeres med innrykk. Dette er syntaksen vi skal bruke her.
Hvorfor trenger du Sass
For å forstå hvorfor du trenger Sass, her er noe av det. muligheter:
- Sass lar deg bygge CSS-regler i hverandre
- Hekkeegenskaper
- Bruke variabler
- Støtte for aritmetiske operasjoner
- Operasjoner med farger
- Evne til å importere til sass-fil frekk, scss og css filer
- Bruker blandinger
- Og mye mer
Kort sagt, hvorfor trenger du Sass: det akselererer og forenkler utviklingsprosess.
Slik bruker du Sass
Det er forskjellige måter å begynne å bruke Sass på:
- Bruke applikasjoner (Koala, CodeKit, Compass og andre)
- Bruke kommandolinjen
- Bruker oppgavebehandlere
- Enkel Sass til CSS-konvertering ved bruk av onlinetjenester
Vurder å bruke Sass for oppgaveleder Gulp... Før du starter installasjonen, er det tilrådelig å gjøre deg kjent med det grunnleggende om Gulp.
Installere og koble til gulp-sass
For å installere plugin gulp-sass til prosjektet vårt, åpne en ledetekst i prosjektmappen. La oss skrive inn følgende kommando:
npm i gulp - sass - save - devProgramtillegget vil bli installert i node_modules-mappen og den tilsvarende oppføringen vil bli lagt til filen package.json. Etter vellykket installasjon trenger vi å plugge vår pakke i fil gulpfile.js.
var gulp = kreve ("gulp"); sass = kreve ("sass");La oss nå lage en oppgave frekk.
gulp. oppgave ("sass", funksjon () (retur gulp. src ("app / sass / main.sass"). pipe (sass (). på ("feil", sass. logError)). pipe (gulp. dest ( "app / css"));));gulp.src– Hva vi tar for behandling
.pipe (sass ())- Konverter Sass til CSS
kjip ()- i parentes kan du angi tilleggsinnstillinger for visning av CSS på utgangen.
For eksempel sass ((outputStyle: " utvidet")) - fullstendig utvidet CSS.
Andre betydninger: nestet(misligholde), kompakt- hver velger på en annen linje, komprimert- alt på én linje.
Hvis vi plutselig gjør en feil, kan vi vise en melding på skjermen der den befinner seg. For å gjøre dette, legg til .on ("feil", sass.logError).
La oss utføre vår opprettede oppgave gulp-sass... Skriv inn på kommandolinjen gulp sass.
Gulp konverterte automatisk SASS til CSS og opprettet en fil main.css.
Hvis du trenger å velge mer enn én fil, men flere, kan du velge alle filene samtidig. For å gjøre dette, la oss endre litt på linjen der vi velger sass-filene for konvertering:
gulp. src ("app / sass / ** / *. sass")sass / ** / *. sass- betyr valg av alle filer (med filtypen .sass) i alle mappene i sass-mappen.
Å oppsummere: plugget inn gulp-sass, opprettet en oppgave frekk og la til en feilutgang (hvis noen). Nå kan du lage en standardoppgave. De. vår taxk gulp-sass vil bli drevet av kommandoen gulp.
gulp. oppgave ("standard", ["sass"]);Vi får følgende gulpfile.js
var gulp = kreve ("gulp"); var sass = kreve ("gulp-sass"); gulp. oppgave ("sass", funksjon () (retur gulp. src ("app / sass / ** / *. sass"). pipe (sass (). på ("feil", sass. logError)). pipe (sass . dest ("app / css")))); gulp. oppgave ("standard", ["sass"]);La oss se på noen Sass-funksjoner med eksempler.
Det er et stort antall av dem, vi vil bare vurdere de mest populære. En fullstendig liste finner du på den offisielle nettsiden.
Hekkingsregler
Hekkeegenskaper
Bruke $-variabler
Aritmetiske operasjoner med tall
Aritmetiske operasjoner med farger
Kombiner programmeringskraft med fleksibilitet
Hvis du utvikler cascading style sheets, kan Sass gjøre denne prosessen mye enklere. Sass er et gjennomgripende stilarkspråk og forprosessor som legger til tradisjonelle kodingsattributter til CSS. Sass implementerer en rekke programmeringsfunksjoner, inkludert variabler, stilnesting, mixins, argumenter og arv. Hvis du lager stilark for nettstedet ditt, kan Sass gjøre livet ditt mye enklere ved å få standard CSS-oppmerking ved å transformere Sass-koden.
I denne artikkelen vil du lære om nøkkelprinsippene til Sass. Denne artikkelen inneholder praktiske eksempler som viser hvordan du kan forenkle og øke hastigheten på CSS-utviklingen din med Sass.
Sassy CSS Syntax (SCSS) er en CSS3-utvidelse; enhver SCSS-kode er brukbar CSS-kode. Alle eksemplene i denne artikkelen er skrevet i SCSS.
Hvorfor Sass
Sass syntaks
- SCSS er den vanligste syntaksen og er en utvidelse av CSS-syntaksen.
- .sass er en gammel syntaks der nestede elementer er rykket inn.
Sass er en robust, konfigurerbar og funksjonell løsning for CSS-utvikling. I stedet for de eldre statiske CSS-reglene, bruker den prinsippet om dynamisk strukturgenerering. Hvis du vil holde deg til din vanlige programmeringsstil og ha tilgang til strukturene til programmeringsspråket, så er Sass det beste valget.
CSS-forprosessorer har alle funksjonene som kreves for ethvert webutviklingsmiljø. De tillater:
- Reduser utviklingstiden.
- Implementer DRY (Don "t Repeat Yourself)-prinsippet i CSS-utvikling.
- Gjør koden din renere og enklere å forstå.
Det er mange CSS-forbehandlingsteknologier der ute. I denne artikkelen valgte vi Sass på grunn av dens fleksibilitet og bredde av muligheter.
Installerer Sass
Den viktigste Sass-implementeringen er i Ruby, selv om andre implementeringer finnes. Det første trinnet er å installere Sass gjennom Ruby-komponentene.
- Last ned og installer Ruby hvis den ikke allerede er installert på systemet ditt.
- Windows-brukere: Last ned Ruby-installasjonsprogrammet for Windows.
- For Mac OS X-brukere: Ruby er allerede installert på operativsystemet ditt.
- For Linux-brukere: Installer Ruby ved å bruke hvilken som helst pakkebehandling.
- Installer Ruby Sass-perlen ved å bruke gem install sass-kommandoen.
Klargjøring av en Sass arbeidsbenk
Lag en .scss-fil i et hvilket som helst tekstredigeringsprogram. Sass-syntaksstøtte (utheving av forskjellige kodebiter med farge) er forskjellig i forskjellige tekstredigerere; listen over redaktører finner du i seksjonen.
Kopier koden fra oppføring 1 og lim den inn i den genererte scss-filen.
Oppføring 1. Eksempel på Sass-kode
#blueBar (posisjon: relativ; høyde: 37px; venstre: 0; høyre: 0; topp: 0;)Sass-språket er en utvidelse av CSS3. I Sass versjon 3.2.1 fungerer alle fungerende CSS-koder også Sass-kode. Et eksempel på slik kode er vist i oppføring 1. Sass-koden i oppføring 1 må imidlertid konverteres til CSS, ellers vil ikke nettlesere kunne tolke stilarket riktig. I stedet for konstant å manuelt konvertere Sass til CSS ved å bruke sass-convert-kommandoen, setter vi Sass til å automatisk konvertere sass-filen til CSS når den er lagret. For å la Sass hele tiden spore filen du ønsker, kjør kommandoen i Listing 2 på kommandolinjen.
Oppføring 2. Spore en fil
sass --watch style.scss: style.cssDu kan også konfigurere Sass til å holde styr på hele katalogen, som vist i oppføring 3.
Oppføring 3. Katalogsporing
sass --watch stylesheets / sass: stylesheets / kompilertSass vil nå automatisk konvertere koden din til fungerende CSS når vi lagrer sass-filen, og vi kan komme i gang.
Variabler
Variabler er nøkkelfunksjonalitet som mangler i CSS. Det er mye repetisjon i stilark, så det er veldig nyttig å kunne sette en bestemt verdi én gang og så referere til den senere. Anta at du har et stilark som ligner det i oppføring 4.
Oppføring 4. Definere fargen på elementer i CSS
#someElement (farge: # 541B32;) #anotherElement (farge: # 541B32;) #yetAnotherElement (farge: # 541B32;)Standard CSS krever at alle verdier spesifiseres eksplisitt, noe som fører til repetisjon i Listing 4. Du kan bruke Sass på en mer effektiv måte, som vist i Listing 5.
Listing 5. Listing 5. Definere elementfarger i Sass
$ lilla farge: # 541B32; #someElement (farge: $ purplishColor;) #anotherElement (farge: $ purplishColor;) #yetAnotherElement (farge: $ purplishColor;)Fordelen er åpenbar. Nå kan du endre fargen på alle elementene på ett sted. Oppføring 5 inneholder $ purplishColor-variabelen, som kan endres når som helst i Sass-filen. Sass-variabler er typeløse; den samme variabelen kan tildeles streng- og heltallsverdier og til og med fargekoder.
Moduler
Du kan enkelt dele opp CSS-koden din i separate moduler som Sass-motoren kan trekke sammen. Du kan importere moduler ved å bruke @import-direktivet, som vist i oppføring 6. Direktivet må spesifisere et filnavn, hyperkobling eller en annen bane. Du kan kombinere CSS- og SCSS-filer samtidig i samme dokument.
Oppføring 6. Importere moduler til Sass
@import "colors.scss" @import "links.scss"Tilnærmingene til modularisering av CSS og Sass varierer betydelig. Når du deler opp CSS-en din i mindre stilark, må du lage en separat HTTP-forespørsel for å laste inn hvert av stilarkene. I Sass laster @import-direktivet modulkoden umiddelbart, slik at du alltid ender opp med en enkelt CSS-fil.
Strenger og erstatning
Sass støtter strengsammenkobling og variabel substitusjon. I stedet for å bare bruke variabler for å tilordne verdier til egenskaper, kan du også sette inn verdiene deres direkte i egenskaps- og velgernavn, som vist i oppføring 7.
Oppføring 7. Handlinger med strenger og variabler i Sass
$ image_dir: "bilder / web /"; $ side: 10; .button (bakgrunnsbilde: url ($ image_dir + "image.gif");: før (innhold: "Side # ($ side)";))Liste 8 viser koden fra oppføring 7, konvertert til CSS.
Oppføring 8. Handlinger med strenger og variabler i CSS
.button (bakgrunnsbilde: url ("images / web / image.gif") .button: before (innhold: "Side 10";)Matematiske beregninger
Sass støtter standard matematiske operasjoner på tall, som vist i liste 9. Du kan utføre enkle matematiske operasjoner på variable verdier.
Oppføring 9. Sass Number matematiske operasjoner
.block ($ block_width: 500px; width: $ block_width - (10px * 2) - (1px * 2);)Liste 10 viser koden fra oppføring 9 konvertert til CSS.
Oppføring 10. CSS nummer matematikk
.block (bredde: 478px;)Fargekodematematikk støttes også, som vist i oppføring 11.
Oppføring 11. Matematiske operasjoner med fargekoder i Sass
.block ($ farge: # 010203; farge: $ farge; kantfarge: $ farge - # 010101;)Liste 12 viser koden fra oppføring 11, konvertert til CSS.
Oppføring 12. CSS fargekode matematikk
.block (farge: # 010203; kantfarge: # 000102;)Nestede velgere og egenskaper
En av de mest etterspurte funksjonene som mangler i CSS er nestede velgere (bruke en stil på en velger i en annen velger). For å opprette en nestet velger i CSS, må du spesifisere overordnet velger på nytt for hver underordnede velger du definerer. Sass forenkler prosessen med å lage nestede velgere, som du kan se i oppføring 13.
Oppføring 13. Nestede velgere i Sass
#some (kant: 1px solid rød; .some (bakgrunn: hvit;))Liste 14 viser koden fra oppføring 13, konvertert til CSS.
Oppføring 14. Nestede velgere i CSS
#noen (kant: 1px solid rød;) #noen .noen (bakgrunn: hvit;)Kontrolldirektiver
Sass kontrolldirektiver legger ut datastrømmer og logikk i CSS-kode. I denne delen skal vi se på hovedkontrolldirektivene @if, @for og @each.
@hvis
Sass støtter grunnleggende if/else-funksjoner som kan kompileres til CSS. Vurder oppføring 15, der vi ønsker å gjøre koblingsfargen svart i alle tilfeller bortsett fra når grunnfargen allerede er svart. Hvis grunnfargen allerede er svart, endrer vi den til hvit. Oppføring 15. Sass @if eksempel
Oppføring 15. Et eksempel på @if-direktivet i Sass
$ farge: svart; .link (@if $ color == svart (farge: hvit;) @else (farge: svart;))Liste 16 viser koden fra oppføring 15, konvertert til CSS.
Oppføring 16. Et eksempel på @if-direktivet i CSS
.link (farge: hvit;)Her fungerer @if-direktivet på samme måte som i andre programmeringsspråk. Etter @if-setningen kan du spesifisere flere @else if-setninger og én @else-setning. Hvis @if-betingelsen ikke er oppfylt, forsøkes @else if-setningene å kjøre en om gangen til en av dem lykkes eller @else-setningsblokken er nådd.
@til
@for-direktivet går gjennom et sett med stiler. Hver iterasjon bruker en tellervariabel, som vist i oppføring 17.
Oppføring 17. Et eksempel på @for-direktivet i Sass
@for $ i fra 1 til 5 (.knapp - # ($ i) (bredde: 1px * $ i;))Liste 18 viser koden fra oppføring 17 konvertert til CSS.
Oppføring 18. Et eksempel på @for-direktivet i CSS
.button-1 (bredde: 1px;) .button-2 (bredde: 2px;) .button-3 (bredde: 3px;) .button-4 (bredde: 4px;) .button-5 (bredde: 5px;)@Hver
@each-direktivet leser elementer fra den angitte listen og genererer stiler ved å bruke verdiene deres, som vist i oppføring 19.
Oppføring 19. Et eksempel på @each-direktivet i Sass
@each $ company i IBM, Motorola, Google (. # ($ company) -ikon (bakgrunnsbilde: url ("/ images / # ($ company) .jpg");))Liste 20 viser koden fra oppføring 19, konvertert til CSS.
Oppføring 20. Et eksempel på @each-direktivet i CSS
.IBM-ikon (bakgrunnsbilde: url ("/ bilder / IBM.jpg"). Motorola-ikon (bakgrunnsbilde: url ("/ bilder / Motorola.jpg") .Google-ikon (bakgrunn -image: url ("/ bilder / Google.jpg");)Funksjoner
Du kan bruke funksjoner i Sass. Vurder å abstrahere og dele opp metoder i separate stykker kode, slik at du kan portere dem og bruke dem i andre prosjekter.
Sass har mange innebygde funksjoner. For eksempel er fargebehandlingsfunksjonene rgb () og mørkere (), vist i liste 21. Du kan bruke disse funksjonene til å endre fargetone, metning, lyshet, gjennomsiktighet, jevnhet og mange andre fargeegenskaper. Du kan også definere dine egne funksjoner og bruke dem etter behov.
Oppføring 21. Funksjoner i Sass
#someElement (farge: rgb (150, 50, 100);) #someDarkYellowElement (farge: mørkere (gul, 33%));)Liste 22 viser koden fra oppføring 21 konvertert til CSS.
Oppføring 22. CSS-funksjoner
#someElement (farge: # 963264;) #someDarkYellowElement (farge: # 575700;)Sass inkluderer også matematiske funksjoner, funksjoner for å jobbe med strenger og lister, introspeksjonsfunksjoner og mange andre. Du finner en fullstendig liste over funksjoner i seksjonen.
Mixins
Mixins (gjenbrukbare deler av CSS) er definert ved å bruke @mixin-direktivet, som vist i oppføring 23. I mixins kan du definere egenskapsverdi-parmaler og bruke dem i andre regelsett. Å bruke mixins forenkler koden for stilarkene dine og gjør dem lettere å lese. I hovedsak er @mixin en brukerdefinert funksjon. Mixins kan også godta argumenter, noe som betyr at du kan lage mange stiler med et lite antall mixins.
Oppføring 23. Mixins i Sass
@mixin rounded-corners ($ radius: 5px) (border-radius: $ radius; -webkit-border-radius: $ radius; -moz-border-radius: $ radius;) #header (@include rounded-corners;) #bunntekst (@inkluder avrundede hjørner (10px);)Liste 24 viser koden fra oppføring 23, konvertert til CSS.
Oppføring 24. CSS-mikser
#header (border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px;) #footer (border-radius: 10px; -webkit-border-radius: 10px; -moz-border -radius: 10px;)Mixins ligner på funksjoner og kan også fungere med variabler. Forskjellen mellom en mixin og en funksjon er at en funksjon alltid returnerer en verdi, og en mixin - kodelinjer.
Kompass
Compass er et åpen kildekode CSS-utviklingsrammeverk som bruker Sass-språket. Gjenbrukbare designmønstre (basert på mixins) lar deg lage store og kraftige stilark. Compass kjernebibliotek er et må-ha-verktøy når du utvikler i Sass.
I hovedsak er Compass en CSS-innpakning. Compass takler vanlige CSS-problemer som nettleserkompatibilitet, skjemaer og stilarkoptimaliseringer gjennom CSS-sprites og en rekke andre teknologier.
I likhet med Sass distribueres Compass som en Ruby-perle. For å installere Compass, kjør kommandoen gem install kompass på kommandolinjen.
Du vil da kunne bruke mixinene (funksjonene) definert i Compass, samt mange av de innebygde CSS3-funksjonene, -klassene og støttede funksjonene. For mer informasjon om Compass, se avsnittet.
Konklusjon
I denne artikkelen lærte du om flere konsepter som kan hjelpe deg med å implementere Sass-kode på nettstedet ditt. Du lærte om variabler, substitusjoner, nesting, funksjoner og noen direktiver.
Sass er ikke den eneste CSS-forprosessoren. Dens nærmeste konkurrent, LESS (se avsnitt), nyter også en viss popularitet. Generelt sett er det ikke mange forskjeller mellom Sass og LESS. Hovedstyrken til Sass er Compass, en utvidelse som LESS mangler. Det er viktig å jobbe med så mange CSS-forprosessorer som mulig for å finne ut hvilken som passer best for dine behov.
