Stil en webbplats med Sass

Du kan göra mycket med CSS - kanske mer än du kanske tror - men det ärable stilarket har sina begränsningar. I ett modernt webbprojekt med NPM-moduler kan JavaScript-ramar, ES6 och mer, känna sig något anakronistiskt att falla tillbaka för att skriva vanilj CSS.

Lyckligtvis finns det alternativ där ute som låter dig använda andra språk som sammanställer CSS. Hänvisas till som "preprocessors", integrerar dessa verktyg i din webbbyggnadsprocess och genererar användbara stilark från vilket anbudsspråk du har valt.

Sass (syntaktiskt fantastiskt stilark) är en av de mest populära till dessa alternativ - läs mer med vår guide Vad är sass? SASS lägger till många värdefulla nya språkfunktioner som inte är (för närvarande) tillgängliga i CSS för att hjälpa till att göra dina webbplatser och appar mer underhållbara. Dessa inkluderar saker som mixins och kontrolldirektiv, som låter skrämmande men är faktiskt ganska okomplicerade, och vi kommer att titta på dessa i den här handledningen. Om du vill hålla sakerna ännu enklare, kan du använda en Website Builder .

• Coola CSS-animationer för att återskapa

Det finns faktiskt två olika syntaxer för SASS, en som använder en .scss-filtillägg och en som använder .SASS. Den förra ser mer ut som CSS (i själva verket är alla .css-filer giltiga .scss-filer), medan den senare eliminerar CSS-parentes och semikolon till förmån för indragning och nylinjer. Vi fokuserar på .scs, men valet är helt enkelt nere till personlig preferens. Uppgradera din webbplats? Se till att du webbhotell Tjänsten gör vad du behöver det till, och få din molnlagring Höger också.

Ladda ner filerna för den här handledningen här (nummer 282)

01. Ställ in kompilatorn

Att använda SASS kräver i huvudsak en kompilator. Det enklaste sättet att göra detta skulle vara på kommandoraden. Du kan göra det med hjälp av homebrew. SAS-kompilatorn är implementerad på flera olika språk, och Homebrew kommer att installera DART-versionen, vilket är snabbt.

brew install sass/sass/sass

02. Skapa en SASS-fil

Låt oss försöka skapa en enkel sassfil för att se kompilatorn i aktion. En av de enklaste koncepten i Sass är variabler, som kan specificeras en gång med a $ prefix och sedan används i din kod. Vi skapar sass-input.scss .

 $ Text-Färg: #cccccccc;
kropp {
    Färg: $ Text-Color;
} 

03. Kommandoradskompilering

Nu kan vi köra SASS-kompilatorn på kommandoraden för att konvertera vår .scss-fil till CSS-utgång. Du kommer att märka i utmatningsfilen att variablerna är borta och vi är bara kvar med standard CSS-syntax som är användbar av webbläsaren.

 SASS SASS-INPUT.SCSS CSS-OUTPUT.CSS 

04. Automatisera din byggnad

Det här är bra, men du vill inte köra Sass-kompilatorn manuellt varje gång du gör ändringar. Ett alternativ är att få det att lyssna på ändringar i filer i en katalog och automatiskt kompilera utmatningen till en annan katalog (bevarande filnamn). Detta gör det också effektivt möjligt att segregera din källa .scss-fil från din inbyggda CSS.

 MKDIR SRC
mkdir src / sass
mkdir allmänhet
MKDIR Public / CSS
SASS --WATCH SRC / SASS /: Public / CSS /

05. Spela med Sass Styling

Låt oss nu titta på en enkel startplats, som vi kan använda för att leka med Sass Styling. Vi kan komma igång med kloning av ett ostylat exempel. Den viktigaste saken att notera är att vår HTML-sida inte vet någonting om SASS. Den har en enda CSS-filinmatningspunkt, som vi ska skapa nästa.

 CD Public
curl -o index.html https: // rå.
githubusercontent.com/simon-a-j/sass-
handledning/
Master / Public / Index.HTML 

06. Main StyleSheet

Vi använder Styles.cs som vår huvudsakliga CSS-ingångspunkt, som senare använder vi för att importera andra moduler. Det betyder att vi måste berätta SASS för att generera den här filen, så vi behöver också skapa en formulär .scss-fil i vår SRC / SASS-mapp. Om du kör sass --watch Som tidigare kommer detta automatiskt att sammanställas i CSS i Offentlig / CSS Mappa och uppfriskande din webbplats kommer att visa sina ändringar. Försök att göra några modifieringar och uppfriskande HTML-sidan i webbläsaren när du går.

 // Styles.scss
kropp {
  Font-familj: sans-serif;
  Text-Justera: Center;
}

07. Hantera färgschema

Låt oss titta på hur SASS kan hjälpa oss att hantera ett färgschema för webbplatsen. Det är vanligt att ha en palett på fem eller sex färger för en webbsida. Vi kan externaisera dessa i _colours.scss . Understreck-prefixet berättar att SAS inte kan sammanställa detta till en ny HTML-fil (en "partiell"). Men vi kan använda det på ett något annat sätt.

 // _colours.scss
$ färg-primär: # 231651;
$ Color-Sekundär: # 2374AB;
$ färgljus: # d6fff6;
$ Color-Highlight1: # 4DCCBD;
$ Color-Highlight2: # FF8484;

08. Använd färgvariabler

För att använda dessa färgvariabler som vi bara har ställt in kan vi berätta Sass att importera innehållet i _colours.scss in i vårt huvudsakliga stilark. Vi gör det här med en @importera påstående. När du har gjort det, märker du hur variablerna är löst i utmatnings-CSS-filen.

 // Styles.scss
@import "_colours.scss";
kropp {
  Font-familj: sans-serif;
  Text-Justera: Center;
  Bakgrund: Linjär-gradient (155deg,
$ färg-primära 70%, $ färg-sekundär
70%);
  Färg: $ färgljus;
  min-höjd: 100VH;
}
h1 {
    Färg: $ Color-Highlight1;
}
H2 {
  Färg: $ Color-Highlight2;
}

09. Neststilar

En annan användbar egenskap av Sass är förmågan att nest stilar. Det vill säga att du kan ange en stil för ett element som endast tillämpas om det elementet uppstår inom ett moderelement. Låt oss använda detta för att differentiera vår styling av länkar beroende på om de visas i rubriken eller kroppen.

 A {
  Färg: $ färg-sekundär;
}
.profile-header {
  a {
    FONT-STORLEK: 16PX;
    marginal-vänster: 10px;
    marginal-höger: 10px;
    Padding: 10px;
    Border-Radius: 5px;
    Färg: $ färgljus;
    Bakgrundsfärg: $ färg-sekundär;
  }
}

10. Gör responsivt rutnät

Låt oss nu ordna vårt innehåll i ett lyhört nätformat. Sass har ett par funktioner för att göra detta betydligt lättare att hantera. Förutom att använda variabler för att ange våra brytpunkter, kan vi boet @media Frågor inom andra stilar, vilket gör beteende som är specifikt för skärmstorlek mycket mer läsbar.

 $ brytpunkt: 800px;
.profil-kropp {
  Visa: Flex;
  Justeringsposter: Sträcka;
  rättfärdiga innehåll: rymd-runt;
  Margin-top: 32px;
  marginal-vänster: 10vw;
  marginal-höger: 10vw;
  @media skärm och (max-bredd:
$ breakpoint) {
      Flex-riktning: kolonn;
  }
}
.profile-sektion {
  Bakgrundsfärg: $ Color-Highlight1;
  Färg: $ färg-primär;
  Marginal: 16px;
  Border-Radius: 10px;
  Bredd: 340px;
  .profile-content {
    Padding: 20px;
  }
  @media skärm och (max-bredd:
$ breakpoint) {
    Bredd: 100%;
  }
}

11. Introducera mixins

Mixins är en annan kraftfull sassfunktion, som du kan tänka på som ett sätt att definiera återanvändbara stylesheet-funktioner. En mixin definieras en gång, kan ta parametrar och kan sedan åberopas någonstans i din SASS-kod. Ett användningsfall för detta är att hantera leverantörsprefix. Om vi ​​vill ha en CSS omvandla till jobbet i äldre webbläsare, kan det kräva en -WebKit Prefix för Chrome och Safari, till exempel. Låt oss definiera en mixin som tar hand om det här för oss.

12. Mixins och variabler

Vi kan också använda en mixin med flera parametrar, kombinerat med vissa variabler som vi definierar, för att elegant hantera styling av olika delar av sidan. Om vi ​​skapar en mixin som definierar förgrund och bakgrundsfärg, så att vi kan välja framträdanden för olika sektioner från en ändlig lista över stilvariabler.

 $ style1: (förgrund: $ färgljus,
Bakgrund: $ färg-sekundär);
$ style2: (förgrund: $ färg-primär,
Bakgrund: $ färg-highlight1);
$ style3: (förgrund: $ färg-primär,
Bakgrund: $ färg-highlight2);
@mixin innehåll-stil ($ förgrund,
$ bakgrund) {
  Färg: $ förgrund;
  Bakgrundsfärg: $ bakgrund;
} 

13. Använd din nya mixin

 .profile-header {
  a {
    @include Content-Style ($ Style1 ...);
    // ...
  }
}
.profile-sektion {
    @include Content-Style ($ Style2 ...);
  // ...
}

14. Förstå arv

En annan mycket kraftfull egenskap hos Sass är arv. Just nu har vi två olika stilar för länkar på vår sida. Om vi ​​vill använda vanliga stilar över båda, snarare än att kopiera och klistra in CSS, varför använder vi inte en platshållarklass, betecknad med "%", som kan förlängas av båda, så att de kan erva sina stilar?

% länk-delad {
  FONT-STORLEK: 16PX;
  marginal-vänster: 10px;
  marginal-höger: 10px;
  Padding: 10px;
  Border-Radius: 10px;
}

15. Utöka klasserna

Nu kan vi förlänga den länk-delade klassen för att definiera länkstyling under hela vår webbplats. Detta börjar se ganska elegant ut. Vi definierar vad en länk i allmänhet ser ut som en gång, återanvända den hela och specificera färger från paletten för varje länk med hjälp av en mixin.

 .profile-header {
  a {
    @ extend% länk-delad;
    @include Content-Style ($ Style1 ...);
  }
}
a {
  @ extend% länk-delad;
  @include content-style ($ style3 ...);
}

16. Ändra temat

Nu kan vi ta en titt på hur lätt sass gör det till att ändra temat på vår webbplats. De nuvarande färgerna kanske inte är perfekta. Vi kan inte bara ändra färgvariablerna, men vi kan också använda vissa sassfunktioner för att procedurellt generera färger som matchar ett primärt att vi väljer.

 // _colours.scss
$ färg-primär: # 2e1f27;
$ Color-Sekundär: Lighten ($ Color-Primary,
25%);
$ Color-Light: Lighten ($ Color-Primary,
75%);
$ färg-highlight1:
Lighten (komplement ($ färg-primär), 50%);
$ färg-highlight2:
Lighten (komplement ($ färg-sekundär), 50%);

17. Välj en ny uppsättning färger

Nu kan vi ändra hela färgschemat för webbplatsen helt enkelt genom att ange ett nytt färgprimärt värde i _colours.scss fil. Ge det ett försök genom att experimentera med alternativa färger. Vi kunde också ha sass randomise det (men kom ihåg det här hänvisar till den punkt där din webbplats är byggd, inte körtid). Du kan också försöka justera den logik vi använder för att härleda de andra färgerna i temat från den primära.

 $ röd: slumpmässigt (255);
$ grön: slumpmässigt (255);
$ blå: slumpmässigt (255);
$ Color-Primary: RGB ($ Red, $ Green, $ Blue); 

18. Använd bibliotek

Sassens modulsystem gör det också väldigt enkelt att använda bibliotek från tredje part med minimal ansträngning och utan att skicka stora runtime-filer till dina slutanvändare. Låt oss prova det vinklade kanterbiblioteket, som vi kan använda för att skapa sluttna kanter för objekt på vår sida.

 git klon https://github.com/josephfusco/
vinklade kanter.git src / sass / vinklade kanter

19. De vinklade kanterna mixin

Vi kan importera vinklade kanter på samma sätt som vi gjorde för vårt färgschema partiellt. Det är då användbart via en mixin som skickar med biblioteket. Låt oss prova i vår profil-sektionsklass.

 @import "vinklade kanter / _angled-kanter.scss";
.profile-sektion {
  @include vinklad-kant ("yttre botten",
"Nedre höger", $ Color-Highlight1);
  @include vinklad-kant ("utanför toppen",
"Övre rätt", $ färg-highlight1);
  Marginal: 120px 16px 120px 16px;
  // ...
}

20. Utmatningsformatering

Låt oss avsluta genom att titta på produktionen SASS genererar. Om du har spårat dina CSS-filer som vi har gjort ändringar, märker du att de är ganska läsbara. Du kan dock också ha SASS-byggd kondenserad CSS, vilket är mindre mänskligt läsbart men fortfarande redo att skicka. Du kan göra det med hjälp av --stil Command-line flagga.

 SASS SRC / SASS /: Public / CSS / --STYLE
komprimerad 

21. Mer sass

Vi har nu utforskat en hel del funktioner i Sass, och vår webbplats ser inte så illa ut. Förhoppningsvis börjar du se hur Sass hjälper oss att utveckla mer underhållta stilark. Vi har inte täckt alla funktioner i språket - det finns många fler användbara funktioner som skickas med det, och avancerade funktioner som kontrolldirektiv (t.ex. @om , @för och @medan ) som ofta används för att skapa komplexa biblioteksfunktioner. Sammantaget kom ihåg att Sass är helt en stilistisk preferens. Du kan göra allt vi har sett med ren CSS om du vill, men du borde definitivt tänka på förbehandling när ditt arbete blir mer komplext.

Denna artikel publicerades ursprungligen i utgåva 282 av Webbdesigner . köpa Utgåva 282 eller prenumerera här .

Läs mer:

• 10 fantastiska nya CSS-tekniker
• 3 Glänsande nya CSS-egenskaper att prova idag
• Stora Parallax Scrolling webbplatser