Stijl een site met Sass

Je kunt veel doen met CSS - Misschien meer dan je zou denken - maar de eerbiedwaardige taal van de stijlbladen heeft zijn beperkingen. In een modern webproject, met NPM-modules, JavaScript Frameworks, ES6 en MEER, kan het enigszins anachronistisch voelen om terug te vallen naar het schrijven van vanille CSS.

Gelukkig zijn er opties die u in staat stellen om andere talen die op CSS compileren te gebruiken. Als u 'preprocessors' wordt aangeduid, integreren deze gereedschappen in uw webbouwproces en genereren bruikbare stijlbladen van welke uitbreidingstaal die u hebt gekozen.

SASS (syntactisch geweldige stijlbladen) is een van de meest populaire van deze opties - Lees meer met onze gids Wat is sass? Sass voegt veel waardevolle nieuwe taalfuncties toe die niet (momenteel) beschikbaar zijn in CSS om uw sites en apps te laten onderhouden. Deze omvatten dingen zoals mixins en controle-richtlijnen, die ontmoedigend klinken, maar zijn eigenlijk vrij eenvoudig, en we zullen deze in deze tutorial bekijken. Als u de dingen nog eenvoudiger wilt houden, kunt u gebruiker een website bouwer ​

• Cool CSS-animaties om te recreëren

Er zijn eigenlijk twee verschillende syntaxis voor Sass, een die een .SCSS-bestandsextensie gebruikt, en een die gebruik maakt van .Sass. De eerste lijkt meer op CSS (in feite, alle .CSS-bestanden zijn geldig .SCSS-bestanden), terwijl de laatste CSS-beugels en puntkomma's ten gunste van inkeping en newlines elimineert. We richten ons op .scss, maar de keuze is gewoon tot persoonlijke voorkeur. Uw site upgraden? Zorg ervoor dat je web hosting Service doet wat je nodig hebt, en krijg je cloud opslag Ook ook.

Download de bestanden voor deze tutorial hier (nummer 282)

01. Stel de compiler in

Het gebruik van SASS vereist in essentie een compiler. De eenvoudigste manier om dit te doen, zou op de opdrachtregel zijn. Je kunt dit doen met behulp van homebrew. De Sass Compiler wordt geïmplementeerd in verschillende talen en Homebrew installeert de DART-versie, die snel is.

brew install sass/sass/sass

02. Maak een SASS-bestand aan

Laten we proberen een eenvoudig SASS-bestand te maken om de compiler in actie te bekijken. Een van de eenvoudigste concepten in Sass is variabelen, die eenmaal kunnen worden opgegeven met een ​ Voorvoegsel en vervolgens in uw code gebruikt. We zullen creëren sass-input.scss ​

 $ TEXT-COLOR: #CCCCCC;
lichaam {
    Kleur: $ Text-color;
} 

03. Compilatie van de opdrachtregel

Nu kunnen we de Sass Compiler op de opdrachtregel uitvoeren om ons .SCSS-bestand in CSS-uitvoer te converteren. U zult merken in het uitvoerbestand dat de variabelen verdwenen zijn en we zijn gewoon achtergelaten met standaard CSS-syntaxis die bruikbaar is voor de browser.

 Sass Sass-Input.SCSS CSS-Output.CSS 

04. Automatiseer uw build

Dit is geweldig, maar je wilt de Sass-compiler niet handmatig uitvoeren telkens wanneer je wijzigingen aanbrengt. Eén optie is om het te laten luisteren naar wijzigingen in bestanden in een map en automatisch de uitvoer opnieuw selecteren in een andere map (behoud van bestandsnamen). Hiermee kunt u ook effectief uw bron .SCSS-bestand uit uw gebouwde CSS scheiden.

 MKDIR SRC
mkdir src / sass
Mkdir Public
MKDIR Public / CSS
Sass - Watch SRC / SASS /: Public / CSS /

05. Speel met Sass Styling

Laten we nu kijken naar een eenvoudige starterplaats, die we kunnen gebruiken om rond te spelen met Sass Styling. We kunnen aan de slag door een niet-geïnstalleerde voorbeeldplaats te klonen. Het belangrijkste ding om op te merken is dat onze HTML-pagina niets weet over SASS. Het heeft een enkel CSS-bestandsinvoerpunt, dat we volgende zullen maken.

 CD-publiek
curl -o-index.html https: // rauw.
githubusercontent.com/simon-a-j/sass-
tutorial /
Master / Public / Index.html 

06. De hoofdstijlen

We gebruiken Styles.CSS als ons hoofd-CSS-invoerpunt, dat later zullen gebruiken om andere modules te importeren. Dit betekent dat we Sass moeten vertellen om dit bestand te genereren, dus we moeten ook een Styles.SCSS-bestand maken in onze SRC / SASS-map. Als je gebruikt Sass -watch Zoals eerder wordt dit automatisch gecompileerd in CSS in de Openbaar / CSS Map en verfrissend uw site zal zijn wijzigingen tonen. Probeer enkele wijzigingen aan te brengen en de HTML-pagina in de browser te vernieuwen terwijl u gaat.

 // stijlen .scss
lichaam {
  Font-familie: Sans-serif;
  Tekst-Uitlijnen: Centrum;
​

07. Kleurschema beheren

Laten we eens kijken hoe Sass ons kan helpen een kleurenschema voor de site te beheren. Het is gebruikelijk om een ​​palet van vijf of zes kleuren te hebben voor een webpagina. We kunnen deze externaliseren in _colours.scss ​Het underscore-voorvoegsel vertelt Sass om dit niet te compileren in een nieuw HTML-bestand (een 'gedeeltelijk'). Maar we kunnen het op een iets andere manier gebruiken.

 // _colours.scss
$ Kleur-primair: # 231651;
$ Color-Secondary: # 2374AB;
$ kleurlicht: # D6FFF6;
$ Color-Highlight1: # 4DCCBD;
$ Color-Highlight2: # FF8484;

08. Gebruik kleurvariabelen

Om deze kleurvariabelen te gebruiken die we zojuist hebben ingesteld, kunnen we SASS vertellen om de inhoud van te importeren _colours.scss in ons hoofdstijlblad. We doen dit met behulp van een @importeren uitspraak. Zodra u dit hebt gedaan, moet u op hoe de variabelen zijn opgelost in het uitvoer-CSS-bestand.

 // stijlen .scss
@Import "_colours.scss";
lichaam {
  Font-familie: Sans-serif;
  Tekst-Uitlijnen: Centrum;
  Achtergrond: lineair -gradiënt (155 deg,
$ Kleur-primaire 70%, $ Color-Secondary
70%);
  Kleur: $ kleurlicht;
  MIN-HOOG: 100VH;
​
H1 {
    Kleur: $ Kleur-Highlight1;
​
H2 {
  Kleur: $ Color-Highlight2;
​

09. Neststijlen

Een andere nuttige functie van SASS is het vermogen om stijlen te nestelen. Dat wil zeggen, u kunt een stijl opgeven voor een element dat alleen wordt toegepast als dat element optreedt binnen een ouderelement. Laten we dit gebruiken om onze styling van links te onderscheiden, afhankelijk van of ze in de kop of het lichaam voorkomen.

 A {
  Kleur: $ Kleur-secundair;
​
.Profile-header {
  een {
    FONT-GROOTTE: 16PX;
    Margin-links: 10px;
    Margin-rechts: 10px;
    Vulling: 10px;
    Border-Radius: 5px;
    Kleur: $ kleurlicht;
    Achtergrondkleur: $ Kleur-secundair;
  ​
​

10. Maak een responsief raster

Laten we nu onze inhoud regelen in een responsief rasterformaat. SASS heeft een aantal functies om dit aanzienlijk gemakkelijker te beheren. Evenals het gebruik van variabelen om onze breekpunten te specificeren, kunnen we nestelen @media Query's in andere stijlen, waardoor het gedrag specifiek is voor het schermformaat veel leesbaarder.

 $ breekpunt: 800px;
.profile-body {
  Display: Flex;
  Uitlijnen-items: stretch;
  Rechtvaardig-inhoud: ruimtelijk;
  MARGIN-TOP: 32PX;
  MARGIN-LINKER: 10VW;
  Margin-rechts: 10VW;
  @media-scherm en (max-breedte:
$ breekpunt) {
      Flex-richting: kolom;
  ​
​
.profile-sectie {
  Achtergrondkleur: $ Kleur-Highlight1;
  Kleur: $ Kleur-primair;
  marge: 16px;
  Border-Radius: 10px;
  Breedte: 340px;
  .profile-content {
    Vulling: 20px;
  ​
  @media-scherm en (max-breedte:
$ breekpunt) {
    Breedte: 100%;
  ​
​

11. Introduceer Mixins

Mixins zijn een andere krachtige Sass-functie, die je kunt bedenken als een manier om herbruikbare stylesheetfuncties te definiëren. Een mixin wordt eenmaal gedefinieerd, kan parameters nemen en kan dan overal in uw SASS-code worden aangeroepen. Een gebruiksgeval hiervoor is om het voorvoegsel van de verkoper aan te pakken. Als we een CSS-transformeren willen om in oudere browsers te werken, heeft dit mogelijk een -Webkit Voorvoegsel voor chroom en safari, bijvoorbeeld. Laten we een mixin definiëren die voor ons zorgt.

12. Mixins en variabelen

We kunnen ook een mixin gebruiken met meerdere parameters, gecombineerd met enkele variabelen die we definiëren, om een ​​elegantere styling van verschillende delen van de pagina te ondersteunen. Als we een mixin maken die voorgrond- en achtergrondkleur definieert, kunt u ons in staat stellen verschijningen voor verschillende secties uit een eindige lijst met stijlvariabelen te selecteren.

 $ Style1: (voorgrond: $ kleurlicht,
Achtergrond: $ kleur-secundair);
$ Style2: (voorgrond: $ kleur-primair,
Achtergrond: $ kleur-highlight1);
$ Style3: (voorgrond: $ kleur-primair,
Achtergrond: $ Kleur-Highlight2);
@mixin content-stijl ($ voorgrond,
$ achtergrond) {
  Kleur: $ voorgrond;
  Achtergrond-kleur: $ achtergrond;
} 

13. Gebruik je nieuwe mixin

 .Profile-header {
  een {
    @include content-stijl ($ style1 ...);
    ​
  ​
​
.profile-sectie {
    @include content-stijl ($ style2 ...);
  ​
​

14. Begrijp overerving

Een ander zeer krachtig kenmerk van Sass is erfenis. Op dit moment hebben we twee verschillende stijlen voor links op onze pagina. Als we gemeenschappelijke stijlen over beide willen gebruiken, in plaats van het kopiëren en plakken van CSS, waarom gebruiken we dan geen tijdelijke aanduidingsklasse, aangeduid met '%', die door beide kunnen worden uitgebreid, zodat ze zijn stijlen kunnen erven?

% Link-Shared {
  FONT-GROOTTE: 16PX;
  Margin-links: 10px;
  Margin-rechts: 10px;
  Vulling: 10px;
  Border-Radius: 10px;
​

15. Extend klassen

Nu kunnen we de klasse-gedeelde klasse uitbreiden om linkstyling op onze site te definiëren. Dit begint vrij elegant uit te zien. We definiëren wat een link er in het algemeen eenmaal uitziet, het overal hergebruikt en kleuren uit het palet opgeven voor elke link met behulp van een mixin.

 .Profile-header {
  een {
    @extend% link-shared;
    @include content-stijl ($ style1 ...);
  ​
​
een {
  @extend% link-shared;
  @include content-stijl ($ style3 ...);
​

16. Wijzig het thema

Laten we nu eens kijken hoe Easy Sass het maakt om het thema van onze site te wijzigen. De huidige kleuren zijn misschien niet perfect. We kunnen de kleurvariabelen niet alleen wijzigen, maar we kunnen ook sommige sass-functies gebruiken om kleuren te genereren die overeenkomen met een primaire van onze keuze.

 // _colours.scss
$ Kleur-primair: # 2E1F27;
$ Color-Secondary: Lighten ($ Color-Primary,
25%);
$ Color-Light: Lighten ($ Color-Primary,
75%);
$ Color-Highlight1:
licht (aanvulling ($ kleur-primair), 50%);
$ Color-Highlight2:
licht (complement ($ kleur-secundair), 50%);

17. Selecteer een nieuwe reeks kleuren

Nu kunnen we het volledige kleurenschema voor de site wijzigen door eenvoudigweg een nieuwe kleur-primaire waarde in de _colours.scss het dossier. Geef het eens door te experimenteren met alternatieve kleuren. We kunnen ook Sass Worldise IT hebben (maar onthoud dat dit verwijst naar het punt waarop uw site is gebouwd, niet runtime). U kunt ook proberen de logica aan te passen die we gebruiken om de andere kleuren in het thema uit het primaire af te leiden.

 $ rood: willekeurig (255);
$ groen: willekeurig (255);
$ blauw: willekeurig (255);
$ Kleur-primair: RGB ($ rood, $ groen, $ blauw); 

18. Gebruik bibliotheken

Sass's Modulesysteem maakt het ook heel eenvoudig om bibliotheken van derden met minimale inspanning te gebruiken, en zonder grote runtime-bestanden naar uw eindgebruikers. Laten we de Hoekige Randenbibliotheek uitproberen, die we kunnen gebruiken om schuine randen op te maken voor objecten op onze pagina.

 Git Clone https://github.com/josephfusco/
Angled-Edges.Git Src / Sass / Angled-randen

19. The Angled Randen Mixin

We kunnen hoekige randen importeren op dezelfde manier die we hebben gedaan voor ons gedeeltelijke kleurenschema. Het is dan bruikbaar via een mixin die wordt verzonden met de bibliotheek. Laten we het uitproberen in onze profiel-sectieles.

 @Import "Angled-randen / _angled-edges.SCSS";
.profile-sectie {
  @include Angled-Edge ("Buitenkant",
"Rechtsonder", $ kleur-highlight1);
  @include Angled-Edge ("Buiten Top",
"Rechtsboven", $ Color-Highlight1);
  Marge: 120px 16px 120px 16px;
  ​
​

20. Uitvoeropmaak

Laten we eindigen met het bekijken van de uitgangs-sass genereert. Als je je CSS-bestanden hebt gevolgd omdat we wijzigingen hebben aangebracht, merk je dat ze behoorlijk leesbaar blijven. Je kunt echter ook Sass Build Condensed CSS, die minder menselijk leesbaar is, maar nog steeds klaar om te verzenden. Je kunt dit doen met behulp van de --stijl opdrachtregelvlag.

 SASS SRC / SASS /: Public / CSS / -Style
gecomprimeerd 

21. Meer SASS

We hebben nu behoorlijk een paar kenmerken van Sass onderzocht, en onze site kijkt niet jammer. Hopelijk begin je te zien hoe Sass ons helpt bij het ontwikkelen van meer onderhoudbare stijlbladen. We hebben niet elk kenmerk van de taal gedekt - er zijn veel nuttige functies die ermee worden verzonden en geavanceerde functies zoals controle-richtlijnen (zoals @als ​ @voor en @terwijl ) die vaak worden gebruikt om complexe bibliotheekfuncties te maken. Onthoud over het algemeen dat Sass helemaal een stilistische voorkeur is. Je kunt alles doen wat we hebben gezien met pure CSS als je wilt, maar je moet zeker nadenken over de pre-verwerking, omdat je werk complexer wordt.

Dit artikel is oorspronkelijk gepubliceerd in kwestie 282 van Webdesigner ​Kopen uitgave 282 of Abonneer hier ​

Lees verder:

• 10 Verbazingwekkende nieuwe CSS-technologieën
• 3 Glanzende nieuwe CSS-eigenschappen om vandaag te proberen
• Geweldige parallax scrollende websites