Style et websted ved hjælp af SASS

Du kan gøre meget med CSS - måske mere end du måske tror - men det ærværdige stilarksprog har sine begrænsninger. I et moderne webprojekt, med NPM-moduler, JavaScript-rammer, ES6 og meget, kan det føle noget anakronistisk at falde tilbage til at skrive Vanilla CSS.

Heldigvis er der muligheder derude, der giver dig mulighed for at bruge andre sprog, der kompilerer med CSS. Omkringet som "præprocessorer" integrerer disse værktøjer i din webopbygningsproces og genererer brugbare stilark fra hvilket udvidelsessprog, du har valgt.

Sass (syntaktisk Awesome Style Sheets) er en af ​​de mest populære af disse muligheder - læs mere med vores vejledning Hvad er sass? Sass tilføjer mange værdifulde nye sprogfunktioner, der ikke er (i øjeblikket) tilgængelige i CSS for at hjælpe med at gøre dine websteder og apps mere vedligeholdelige. Disse omfatter ting som Mixins og Control Directives, som lyder skræmmende, men er faktisk ret ligetil, og vi ser på disse i denne vejledning. Hvis du vil holde tingene endnu enklere, kan du bruge en Website Builder. .

• Cool CSS animationer for at genskabe

Der er faktisk to forskellige syntaksler til SASS, en, der bruger en .scss fil-udvidelse, og en, der bruger. Den førstnævnte ser mere ud som CSS (Faktisk er alle .CSS-filer gyldige .CSS-filer), mens sidstnævnte eliminerer CSS 'parenteser og semikoloner til fordel for indrykning og newlines. Vi vil fokusere på .scss, men valget er simpelthen ned til personlig præference. Opgradering af dit websted? Sørg for din Web Hosting. Service gør hvad du har brug for det til, og få din Sky lagring Højre også.

Download filerne til denne vejledning her (udgave 282)

01. Indstil kompilatoren

Brug af SASK kræver i det væsentlige en compiler. Den enkleste måde at gøre dette på, ville være på kommandolinjen. Du kan gøre det ved at bruge homebrew. Sass compiler implementeres på flere forskellige sprog, og homebrew vil installere dartversionen, som er hurtig.

brew install sass/sass/sass

02. Opret en SASS-fil

Lad os prøve at oprette en simpel Sass-fil for at se kompilatoren i aktion. En af de enkleste begreber i SASS er variabler, som kan specificeres en gang med a $ præfiks og derefter brugt i hele din kode. Vi opretter sass-input.scss. .

 $ Tekstfarve: #cccccc;
krop {
    Farve: $ Tekstfarve;
} 

03. Kommandolinjens kompilering

Nu kan vi køre Sass Compiler på kommandolinjen for at konvertere vores .scss-fil i CSS-udgang. Du vil bemærke i den outputfil, som variablerne er væk, og vi er lige tilbage med standard CSS-syntaks, der kan bruges af browseren.

 Sass Sass-input.scss CSS-Output.css 

04. Automatiser din bygning

Dette er fantastisk, men du vil ikke køre Sass compiler manuelt hver gang du foretager ændringer. En mulighed er at have det lytte til ændringer i filer i en mappe og automatisk genkompilere udgangen til en anden mappe (bevarelse af filnavne). Dette giver også effektivt mulighed for at adskille din kilde .scss-fil fra dine byggede CSS.

 mkdir src
mkdir src / sass
mkdir public.
MKDIR Offentlige / CSS
Sass --Watch SRC / SASS /: Offentlig / CSS /

05. Spil med Sass Styling

Lad os nu se på et simpelt startersted, som vi kan bruge til at lege med Sass Styling. Vi kan komme i gang ved at klone et ustyret eksempelsted. Den vigtigste ting at bemærke er, at vores HTML-side ikke kender noget om SASS. Det har et enkelt CSS-filindtastningspunkt, som vi opretter næste.

 CD Public
Curl -O index.html https: // RAW.
githubusercontent.com/simon-a-j/sass-
Tutorial /
Master / Offentlig / Index.html 

06. Hovedstylearket

Vi bruger Styles.css som vores vigtigste CSS-indgangspunkt, som senere vil bruge til at importere andre moduler. Det betyder, at vi skal fortælle SASS for at generere denne fil, så vi skal også oprette en stilarter.scss-fil i vores SRC / SASS-mappe. Hvis du kører sass --watch. Som før vil dette automatisk blive udarbejdet i CSS i Offentlig / CSS. mappe, og forfriskende dit websted vil vise sine ændringer. Prøv at lave nogle ændringer og forfriskende HTML-siden i browseren, mens du går.

 // Styles.scss
krop {
  Font-familie: SANS-SERIF;
  Tekst-Align: Center;
}

07. Administrer farveskema

Lad os se på, hvordan SASS kan hjælpe os med at styre et farveskema til webstedet. Det er almindeligt at have en palette på fem eller seks farver til en webside. Vi kan eksternisere disse i _colours.scss. . Underscore Prefix fortæller Sass ikke at kompilere dette til en ny HTML-fil (A 'partial'). Men vi kan bruge det på en lidt anden måde.

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

08. Brug farvevariabler

For at bruge disse farvevariabler, vi lige har oprettet, kan vi fortælle SASS for at importere indholdet af _colours.scss. ind i vores vigtigste stilark. Vi gør dette ved hjælp af en @importere udmelding. Når du har gjort dette, skal du lægge mærke til, hvordan variablerne løses i Output CSS-filen.

 // Styles.scss
@import "_colours.scss";
krop {
  Font-familie: SANS-SERIF;
  Tekst-Align: Center;
  Baggrund: Lineær-gradient (155deg,
$ Color-primary 70%, $ Color-sekundær
70%);
  Farve: $ farve-lys;
  Min-højde: 100Vh;
}
H1 {
    Farve: $ Color-Highlight1;
}
h2 {
  Farve: $ Color-Highlight2;
}

09. Nest Styles.

Et andet nyttigt træk ved SASS er evnen til at nest stilarter. Det vil sige, at du kan angive en stil for et element, der kun anvendes, hvis dette element forekommer inden for et forældrelement. Lad os bruge dette til at differentiere vores styling af links afhængigt af om de vises i overskriften eller kroppen.

 A {
  Farve: $ Color-sekundær;
}
.profil-header {
  en {
    Font-størrelse: 16px;
    Margin-venstre: 10px;
    Margin-højre: 10px;
    Padding: 10px;
    Border-radius: 5px;
    Farve: $ farve-lys;
    Baggrundsfarve: $ Color-sekundær;
  }
}

10. Lav lydhørt gitter

Lad os nu arrangere vores indhold i et lydhørt gitterformat. Sass har et par funktioner til at gøre dette betydeligt lettere at klare. Såvel som at bruge variabler til at angive vores breakpoints, kan vi nest @medier Forespørgsler inden for andre stilarter, hvilket gør adfærd, der er specifikke for skærmstørrelsen meget mere læsbar.

 $ BREAKPOINT: 800px;
.profil-krop {
  Display: Flex;
  Juster-genstande: Stretch;
  retfærdiggøre-indhold: pladsområdet;
  Margin-top: 32px;
  Margin-venstre: 10VW;
  Margin-højre: 10VW;
  @media skærm og (max bredde:
$ breakpoint) {
      FLEX-DIRECTION: Kolonne;
  }
}
.profil-sektion {
  Baggrundsfarve: $ Color-Highlight1;
  Farve: $ Color-Primary;
  Margin: 16px;
  Border-radius: 10px;
  Bredde: 340px;
  .profil-indhold {
    Padding: 20px;
  }
  @media skærm og (max bredde:
$ breakpoint) {
    Bredde: 100%;
  }
}

11. Introducer Mixins.

Mixins er en anden kraftfuld SAS-funktion, som du kan tænke på som en måde at definere genanvendelige stilarkfunktioner på. En mixin er defineret en gang, kan tage parametre, og kan derefter påberåbes overalt i din SASS-kode. Et brugssag til dette er at håndtere leverandørpræfikser. Hvis vi vil have en CSS omdanne til at arbejde i ældre browsere, kan dette kræve en -webkit Prefix for Chrome og Safari, for eksempel. Lad os definere en mixin, der tager sig af dette for os.

12. Mixins og variabler

Vi kan også bruge en mixin med flere parametre kombineret med nogle variabler, som vi definerer, til mere elegant håndtere styling af forskellige dele af siden. Hvis vi opretter en mixin, der definerer forgrunds- og baggrundsfarve, vil dette gøre det muligt for os at vælge udseende for forskellige sektioner fra en endelig liste over stilvariabler.

 $ STYLE1: (forgrund: $ Farve-lys,
Baggrund: $ Color-Secondary);
$ Style2: (forgrunden: $ Color-Primary,
Baggrund: $ Color-Highlight1);
$ Style3: (forgrunden: $ Color-Primary,
Baggrund: $ Color-Highlight2);
@mixin indholdsstil ($ forgrund,
$ baggrund) {
  Farve: $ forgrund;
  baggrundsfarve: $ baggrund;
} 

13. Brug din nye Mixin

. Profile-header {
  en {
    @include indholdsstil ($ Style1 ...);
    // ...
  }
}
.profil-sektion {
    @include Content-Style ($ Style2 ...);
  // ...
}

14. Forstå arv

Et andet meget kraftfuldt træk ved SASS er arv. Lige nu har vi to forskellige stilarter til links på vores side. Hvis vi vil bruge fælles stilarter på tværs af begge, snarere end at kopiere og indsætte CSS, hvorfor bruger vi ikke en pladsholderklasse, betegnet med '%', som kan udvides af begge, så de kan arve sine stilarter?

% link-delte {
  Font-størrelse: 16px;
  Margin-venstre: 10px;
  Margin-højre: 10px;
  Padding: 10px;
  Border-radius: 10px;
}

15. Udvid klasserne

Nu kan vi udvide den link-delte klasse for at definere link styling i hele vores hjemmeside. Dette begynder at se ganske elegant ud. Vi definerer, hvad et link generelt ser ud som en gang, genbruge det hele, og angive farver fra paletten for hvert link ved hjælp af en mixin.

. Profile-header {
  en {
    @extend% link-delte;
    @include indholdsstil ($ Style1 ...);
  }
}
en {
  @extend% link-delte;
  @include indholdsstil ($ stil3 ...);
}

16. Rediger temaet

Lad os nu se på, hvor Easy Sass gør det til at ændre temaet på vores hjemmeside. De nuværende farver er måske ikke perfekte. Vi kan ikke kun ændre farvevariablerne, men vi kan også bruge nogle SASS-funktioner til procedurer for at generere farver, der matcher en primær af vores valg.

 // _colours.scss
$ Color-Primary: # 2E1F27;
$ Color-Secondary: Lighten ($ Color-Primary,
25%);
$ Color-Light: Lighten ($ Color-Primary,
75%);
$ Color-Highlight1:
lyse (komplement ($ farvefarre), 50%);
$ Color-Highlight2:
lyse (komplement ($ farve-sekundær), 50%);

17. Vælg et nyt sæt farver

Nu kan vi ændre hele farveskemaet for webstedet ved blot at angive en ny farvestyringsværdi i _colours.scss. fil. Prøv det ved at eksperimentere med alternative farver. Vi kunne også have SAS-randomise det (men husk det refererer til det punkt, hvor dit websted er bygget, ikke runtime). Du kan også prøve at justere logikken, vi bruger til at udlede de andre farver i temaet fra den primære.

 $ rød: tilfældig (255);
$ grøn: tilfældigt (255);
$ blå: tilfældig (255);
$ Color-Primary: RGB ($ rød, $ grøn, $ blå); 

18. Brug Biblioteker

Sassens modulsystem gør det også meget ligetil at bruge tredjepartsbiblioteker med minimal indsats, og uden forsendelse af store runtime-filer til dine slutbrugere. Lad os prøve det vinklede kantbibliotek, som vi kan bruge til at oprette skrånende kanter til objekter på vores side.

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

19. De vinklede kanter mixin

Vi kan importere vinklede kanter på samme måde som vi gjorde for vores farveskema delvis. Det kan så brugbart via en mixin, der sender med biblioteket. Lad os prøve det i vores profil-sektionsklasse.

 @import "vinklet kanter / _angled-edges.scss";
.profil-sektion {
  @include vinklet kant ("udenfor bunden",
"Nedre højre", $ Color-Highlight1);
  @include vinklet kant ("udenfor top",
"Øverste højre", $ farve-højdepunkt1);
  Margin: 120px 16px 120px 16px;
  // ...
}

20. Output formatering.

Lad os afslutte ved at se på output sass genererer. Hvis du har sporet dine CSS-filer, som vi har foretaget ændringer, vil du bemærke, at de forbliver ganske læsbare. Du kan dog også have SASS Build kondenseret CSS, hvilket er mindre menneskelig læsbar, men stadig klar til at sende. Du kan gøre dette ved hjælp af --stil Command-line flag.

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

21. Flere SASS.

Vi har nu udforsket ganske få funktioner i SASS, og vores hjemmeside ser ikke for dårligt ud. Forhåbentlig er du begyndt at se, hvordan SASS hjælper os med at udvikle mere vedligeholdelige stilark. Vi har ikke dækket alle dele af sproget - der er mange flere nyttige funktioner, der leveres med det, og avancerede funktioner som kontroldirektiver (f.eks @hvis Vi @til og @mens ) der ofte bruges til at skabe komplekse biblioteksfunktioner. Samlet set husk, at SASS er helt en stilistisk præference. Du kan gøre alt, hvad vi har set med rene CSS, hvis du vil, men du bør helt sikkert tænke på forbehandling, da dit arbejde bliver mere komplekst.

Denne artikel blev oprindeligt offentliggjort i udstedelse 282 af Webdesigner . Købe Udgave 282. eller Abonner her .

Læs mere:

• 10 fantastiske nye CSS-teknologier
• 3 skinnende nye CSS egenskaber for at prøve i dag
• Great Parallax Scrolling Websites