Stil et nettsted med SASS

Du kan gjøre mye med CSS - kanskje mer enn du kanskje tror - men det ærverdige stilarkspråket har sine begrensninger. I et moderne webprosjekt, med NPM-moduler, Javascript-rammer, ES6 og mer, kan det føles noe anakronistisk å falle tilbake til å skrive vanilje CSS.

Heldigvis finnes det alternativer der ute som lar deg bruke andre språk som kompilere til CSS. Referert til som "preprocessors", integreres disse verktøyene i webbyggingsprosessen din og genererer brukbare stilark fra hvilket utvidelsesspråk du har valgt.

Sass (syntaktisk kjempebra stilark) er en av de mest populære av disse alternativene - les mer med vår guide Hva er Sass? Sass legger til mange verdifulle nye språkfunksjoner som ikke er (for øyeblikket) tilgjengelig i CSS for å gjøre nettstedene dine og programmene mer vedlikeholdbare. Disse inkluderer ting som mixins og kontrolldirektiv, som høres skremmende, men er faktisk ganske enkle, og vi vil se på disse i denne opplæringen. Hvis du vil holde ting enda enklere, kan du bruke en Nettstedbygger .

• Cool CSS animasjoner for å gjenskape

Det er faktisk to forskjellige syntakser for Sass, en som bruker en .scss filtype, og en som bruker .sass. Den tidligere ser mer ut som CSS (faktisk, alle .CSS-filer er gyldige .scss-filer), mens sistnevnte eliminerer CSS 'parenteser og semikoloner til fordel for innrykk og newlines. Vi fokuserer på .scss, men valget er ganske enkelt ned til personlig preferanse. Oppgradering av nettstedet ditt? Pass på at din Web Hosting. Tjenesten gjør det du trenger det til, og få din skylagring Høyre, også.

Last ned filene for denne opplæringen her (utgave 282)

01. Sett opp kompilatoren

Bruke Sass krever i hovedsak en kompilator. Den enkleste måten å gjøre dette på, ville være på kommandolinjen. Du kan gjøre det ved å bruke homebrew. Sass Compiler er implementert på flere forskjellige språk, og homebrew vil installere DART-versjonen, som er rask.

brew install sass/sass/sass

02. Opprett en Sass-fil

La oss prøve å lage en enkel Sass-fil for å se kompilatoren i handling. En av de enkleste konseptene i Sass er variabler, som kan spesifiseres en gang med a $. prefiks og deretter brukt i hele koden din. Vi lager SASS-INPUT.SCSS .

 $ Tekstfarge: #CCCCCC;
kropp {
    Farge: $ Tekstfarge;
} 

03. Kommandolinjeksjon

Nå kan vi kjøre Sass Compiler på kommandolinjen for å konvertere vår .scss-fil til CSS-utgang. Du vil legge merke til i utdatafilen som variablene er borte, og vi er bare igjen med standard CSS-syntaks som kan brukes av nettleseren.

 SASS SASS-INPUT.SCSS CSS-OUTPUT.CSS 

04. Automatiser din bygning

Dette er flott, men du vil ikke kjøre Sass Compiler manuelt hver gang du gjør endringer. Ett alternativ er å få det til å lytte til endringer i filer i en katalog og automatisk kompilere utdataet til en annen katalog (konserveringsfilnavn). Dette lar deg også effektivt degregere kilden din. SCSS-filen fra de bygget CSS.

 mkdir src
mkdir src / sass
mkdir public.
MKDIR Offentlige / CSS
Sass - Watch Src / Sass /: Offentlige / CSS /

05. Spill med Sass Styling

La oss nå se på et enkelt startsted, som vi kan bruke til å leke med Sass Styling. Vi kan komme i gang med å klonge et ustysset eksempelsted. Den viktigste tingen å merke seg er at vår HTML-side vet ingenting om Sass. Den har et enkelt CSS-filinngangspunkt, som vi skal lage neste.

 CD-offentlig
curl -o index.html https: // rå.
githubusercontent.com/simon-a-j/sass-
opplæringen/
Master / Offentlig / Index.html 

06. Hovedstilene

Vi bruker Styles.CSS som vårt viktigste CSS-inngangspunkt, som senere bruker vi til å importere andre moduler. Dette betyr at vi må fortelle Sass for å generere denne filen, så vi må også opprette en styles.scss-fil i vår SRC / Sass-mappe. Hvis du kjører Sass - ... Som før vil dette automatisk bli samlet inn i CSS i Offentlige / CSS mappe, og forfriskende nettstedet ditt vil vise endringene sine. Prøv å lage noen modifikasjoner og forfriskende HTML-siden i nettleseren mens du går.

 // Styles.scss
kropp {
  Font-Family: Sans-serif;
  Tekstjustering: Senter;
}

07. Administrer fargevalg

La oss se på hvordan Sass kan hjelpe oss med å administrere et fargevalg for nettstedet. Det er vanlig å ha en palett på fem eller seks farger for en nettside. Vi kan eksternisere disse i _colours.scss . Underscore prefikset forteller Sass ikke å kompilere dette til en ny HTML-fil (en "delvis"). Men vi kan bruke det på en litt annen måte.

 // _colours.scss
$ farge-primær: # 231651;
$ farge sekundær: # 2374ab;
$ farge-lys: # d6fff6;
$ Color-Highlight1: # 4DCCBD;
$ Color-Highlight2: # FF8484;

08. Bruk fargevariabler

For å bruke disse fargevariablene har vi nettopp satt opp, vi kan fortelle Sass å importere innholdet i _colours.scss inn i hovedstilen. Vi gjør dette ved hjelp av en @import uttalelse. Når du har gjort dette, legger du merke til hvordan variablene er løst i Output CSS-filen.

 // Styles.scss
@Import "_colours.scss";
kropp {
  Font-Family: Sans-serif;
  Tekstjustering: Senter;
  Bakgrunn: Lineær gradient (155DEG,
$ farge-primær 70%, $ farge-sekundær
70%);
  Farge: $ Farge-lys;
  min-høyde: 100vh;
}
h1 {
    Farge: $ Color-Highlight1;
}
h2 {
  farge: $ farge-høydepunkt2;
}

09. Nest stiler

En annen nyttig funksjon av Sass er evnen til å nest stilene. Det vil si at du kan spesifisere en stil for et element som bare brukes hvis det elementet oppstår i et foreldreelement. La oss bruke dette til å skille våre styling av lenker, avhengig av om de vises i overskriften eller kroppen.

 A {
  Farge: $ farge sekundær;
}
.profile-header {
  en {
    FONT-STØRRELSE: 16PX;
    margin-venstre: 10px;
    Margin-Høyre: 10px;
    polstring: 10px;
    Border-Radius: 5px;
    Farge: $ Farge-lys;
    Bakgrunnsfarge: $ farge-sekundær;
  }
}

10. Lag responsivt rutenett

La oss nå arrangere vårt innhold i et responsivt gridformat. Sass har et par funksjoner for å gjøre dette betydelig enklere å administrere. I tillegg til å bruke variabler for å spesifisere våre breakpoints, kan vi nest @media Spørringer i andre stiler, som gjør atferdspesifikk for skjermstørrelsen mye mer lesbar.

 $ breakpoint: 800px;
Profile-Body {
  Skjerm: Flex;
  Juster-elementer: strekk;
  rettferdiggjøre innhold: rom-rundt;
  Margin-Top: 32px;
  margin-venstre: 10vw;
  margin-høyre: 10vw;
  @Media skjerm og (maks bredde:
$ breakpoint) {
      Flex-retning: kolonne;
  }
}
.profile-seksjon {
  Bakgrunnsfarge: $ Fargehøydepunkt1;
  farge: $ farge-primær;
  Margin: 16px;
  Border-Radius: 10px;
  Bredde: 340px;
  .profile-innhold {
    polstring: 20px;
  }
  @Media skjerm og (maks bredde:
$ breakpoint) {
    Bredde: 100%;
  }
}

11. Introduser mixins.

Mixins er en annen kraftig Sass-funksjon, som du kan tenke på som en måte å definere gjenbrukbare stilartefunksjoner på. En blanding er definert en gang, kan ta parametere, og kan deretter påberopes hvor som helst i SASS-koden din. Ett bruk tilfelle for dette er å håndtere leverandørprefiksering. Hvis vi vil ha en CSS-transformasjon til å jobbe i eldre nettlesere, kan dette kreve en -Webkit. Prefiks for Chrome og Safari, for eksempel. La oss definere en mixin som tar vare på dette for oss.

12. Mixins og variabler

Vi kan også bruke en mixin med flere parametere, kombinert med noen variabler som vi definerer, for mer elegant håndtere styling av ulike deler av siden. Hvis vi lager en mixin som definerer forgrunns- og bakgrunnsfarge, vil dette gjøre det mulig for oss å velge utseende for forskjellige seksjoner fra en endelig liste over stilvariabler.

 $ Style1: (Forgrunnen: $ Farge-Light,
Bakgrunn: $ farge sekundær);
$ style2: (forgrunnen: $ farge-primær,
Bakgrunn: $ farge-høydepunkt1);
$ Style3: (forgrunnen: $ farge-primær,
Bakgrunn: $ Color-Highlight2);
@mixin innholdsstil ($ forgrung,
$ bakgrunn) {
  farge: $ forgrunnen;
  bakgrunnsfarge: $ bakgrunn;
} 

13. Bruk din nye mixin

 .profile-header {
  en {
    @include innholdsstil ($ style1 ...);
    // ...
  }
}
.profile-seksjon {
    @include innholdsstil ($ style2 ...);
  // ...
}

14. Forstå arv

En annen veldig kraftig funksjon i Sass er arv. Akkurat nå har vi to forskjellige stiler for lenker på vår side. Hvis vi ønsker å bruke vanlige stiler på tvers av begge, i stedet for å kopiere og lime inn CSS, hvorfor bruker vi ikke en plassholderklasse, betegnet med '%', som kan forlenges av begge, slik at de kan arve sine stiler?

% link-delt {
  FONT-STØRRELSE: 16PX;
  margin-venstre: 10px;
  Margin-Høyre: 10px;
  polstring: 10px;
  Border-Radius: 10px;
}

15. Utvid klassene

Nå kan vi utvide link-delte klassen for å definere koblingsstyling gjennom hele nettstedet vårt. Dette begynner å se ganske elegant ut. Vi definerer hva en lenke generelt ser ut som bare en gang, gjenbruk den gjennom, og angi farger fra paletten for hver lenke ved hjelp av en mixin.

 .profile-header {
  en {
    empextend% link-delt;
    @include innholdsstil ($ style1 ...);
  }
}
en {
  empextend% link-delt;
  @include innholdsstil ($ style3 ...);
}

16. Endre temaet

La oss ta en titt på hvor lett Sass gjør det til å endre temaet på nettstedet vårt. De nåværende fargene er kanskje ikke perfekte. Vi kan ikke bare endre fargevariablene, men vi kan også bruke noen SASS-funksjoner til prosedyrisk generere farger som samsvarer med en primær for vårt valg.

 // _colours.scss
$ farge-primær: # 2E1F27;
$ farge-sekundær: Lyser ($ farge-primær,
25%);
$ Farge-lys: Lyser ($ farge-primær,
75%);
$ Color-Highlight1:
lette (komplement ($ farge-primær), 50%);
$ Color-Highlight2:
lette (komplement ($ farge sekundær), 50%);

17. Velg et nytt sett med farger

Nå kan vi endre hele fargevalget for nettstedet ganske enkelt ved å angi en ny fargeprimær verdi i _colours.scss fil. Gi det en prøve ved å eksperimentere med alternative farger. Vi kunne også ha Sass randomise det (men husk dette refererer til det punktet hvor nettstedet ditt er bygget, ikke kjøretid). Du kan også prøve å justere logikken vi bruker for å utlede de andre fargene i temaet fra primæren.

 $ rød: tilfeldig (255);
$ grønn: tilfeldig (255);
$ blå: tilfeldig (255);
$ farge-primær: RGB ($ rød, $ grønn, $ blå); 

18. Bruk biblioteker

Sass's Module System gjør det også veldig grei å bruke tredjepartsbiblioteker med minimal innsats, og uten å sende store kjøretidsfiler til sluttbrukerne. La oss prøve det vinklede kanterbiblioteket, som vi kan bruke til å lage skrånende kanter for objekter på vår side.

 git klon https://github.com/josephfusco/
vinklet-kanter.git src / sass / vinklede kanter

19. De vinklede kantene mixin

Vi kan importere vinklede kanter på samme måte som vi gjorde for vår fargeskjema delvis. Det er da brukbart via en blanding som sendes med biblioteket. La oss prøve det i vår profil-seksjonsklasse.

 @Import "vinklede kanter / _angled-edges.scss";
.profile-seksjon {
  @include vinklet kant ("utenfor bunn",
"Nedre høyre", $ farge-høydepunkt1);
  @include vinklet kant ("utenfor toppen",
"Øvre høyre", $ farge-høydepunkt1);
  margin: 120px 16px 120px 16px;
  // ...
}

20. Utgangsformatering

La oss avslutte ved å se på utgangssystemet genererer. Hvis du har sporet CSS-filene dine som vi har gjort endringer, vil du legge merke til at de forblir ganske lesbare. Du kan imidlertid også ha Sass bygget kondensert CSS, som er mindre menneskelig lesbar, men fortsatt klar til å sende. Du kan gjøre dette ved hjelp av --stil kommandolinjeflagg.

 SASS SRC / SASS /: Offentlig / CSS / --Style
Komprimert 

21. Mer Sass.

Vi har nå utforsket ganske mange funksjoner i Sass, og nettstedet vårt ser ikke så ille ut. Forhåpentligvis begynner du å se hvordan Sass hjelper oss med å utvikle mer vedlikeholdsbare stilark. Vi har ikke dekket alle funksjoner på språket - det er mange flere nyttige funksjoner som sendes med den, og avanserte funksjoner som kontrolldirektiv (som for eksempel @hvis , @til og @samtidig som ) som ofte brukes til å lage komplekse biblioteksfunksjoner. Samlet husk at Sass er helt en stilistisk preferanse. Du kan gjøre alt vi har sett med rene CSS hvis du vil, men du bør definitivt tenke på pre-prosessering som arbeidet ditt blir mer komplisert.

Denne artikkelen ble opprinnelig publisert i utgave 282 av Webdesigner . Kjøpe utgave 282. eller Abonner her .

Les mer:

• 10 fantastiske nye CSS-teknologier
• 3 skinnende nye CSS-egenskaper for å prøve i dag
• Great Parallax Scrolling nettsteder