Een eenvoudige en eenvoudige gids om Sass te begrijpen

Een tijdje geleden schreef Thoriq Firdaus een geweldig artikel over het starten met Sass, dat je liet zien hoe je deze uiterst nuttige CSS-preprocessor-taal installeerde en gebruikt (misschien wil je het eens proberen, je weet wel, om te beginnen).

In dit artikel dacht ik dat ik je een beetje meer inzicht zou geven in wat je met Sass kunt doen en hoe ontwikkelaars het elke dag gebruiken om betere en meer modulaire CSS-code te maken. Ga vooruit naar het gedeelte dat u wilt:

• Instrumenten van de handel
• Variabelen
• nesting
• Regels uitbreidbaar
• mixins
• Placeholder Selectors
• Activiteiten
• functies

Instrumenten van de handel

Thoriq heeft je laten zien hoe je Sass kunt gebruiken vanaf de opdrachtregel met behulp van de sass - horloge commando.

Als je de voorkeur geeft aan GUI-tools, kun je meegaan met mijn persoonlijke favoriete app, Codekit, een webontwikkelaarstool voor het compileren van Sass, aaneenschakelen, automatisch verzinnen en nog veel meer. Prepros is een andere zeer capabele toepassing die op alle systemen kan worden gebruikt. Beide zijn betaalde applicaties maar het is de moeite waard als je ze op de lange termijn gaat gebruiken.

Als je Sass gewoon wilt uitproberen zonder iets te betalen je kunt de terminal gebruiken, of Koala (hier is onze recensie), een gratis platformonafhankelijke, rijk aan functies gerelateerde app, die het tegen premium-tegenhangers kan opnemen.

Variabelen

Een van de eerste dingen die je moet doen om je hoofd rond te wikkelen, is variabelen. Als je van een PHP of een andere soortgelijke codeertaalachtergrond komt, is dit een tweede natuur voor jou. Variabelen zijn voor het opslaan van stukjes en beetjes van herbruikbare informatie, zoals een kleurwaarde bijvoorbeeld:

 $ primary_color: # 666666; .knop color: $ primary_color;  .belangrijk color: $ primary_color;  

Dit lijkt hier misschien niet zo handig, maar stel je voor dat je 3.000 regels code hebt. Als uw kleurenschema verandert, moet u elke kleurwaarde in CSS vervangen. Met Sass kun je gewoon wijzig de waarde van de $ primary_color verander en doe ermee.

Variabelen worden gebruikt voor het opslaan van lettertypenamen, -groottes, -kleuren en tal van andere informatie. Voor grotere projecten kunnen we het waard zijn om al je variabelen in een apart bestand te extraheren (we zullen kijken hoe dit snel wordt gedaan). U kunt dit doen door uw hele project opnieuw in te kleuren en lettertypen en andere belangrijke aspecten te wijzigen zonder ooit de eigenlijke CSS-regels aan te raken. Het enige dat u hoeft te doen, is enkele variabelen aanpassen.

nesting

Nog een basiskenmerk dat Sass u biedt het vermogen om regels te nesten. Laten we aannemen dat je een navigatiemenu aan het bouwen bent. Je hebt een nav element dat een ongeordende lijst, lijstitems en links bevat. In CSS zou je zoiets als dit kunnen doen:

 #header nav / * Regels voor het nav-gebied * / #header nav ul / * Regels voor het menu * / #header nav li / * Regels voor lijstitems * / #header nav a / * Rules voor links * / 

In de selectors herhalen we onszelf vaak. Als elementen gemeenschappelijke wortels hebben, kunnen we gebruiken om te nesten schrijf onze regels op een veel schonere manier.

Hier is hoe de bovenstaande code eruit zou kunnen zien in Sass:

 #header nav / * Regels voor het nav-gebied * / ul / * Regels voor het menu * / li / * Regels voor lijstitems * / a / * Regels voor links * / 

Nesten is uiterst handig omdat het maakt stylesheets (veel) leesbaarder. Door gebruik te maken van nesten samen met de juiste inkeping kunt u bereiken zeer leesbare codestructuren, zelfs als je behoorlijk veel code hebt.

Een nadeel van nesten is dat het kan leiden tot onnodige specificiteit. In het bovenstaande voorbeeld heb ik verwezen naar koppelingen met #header nav a. Je zou ook kunnen gebruiken #header nav ul li a wat waarschijnlijk te veel zou zijn.

In Sass is het veel eenvoudiger om heel specifiek te zijn, omdat je alleen je regels hoeft te nesten. Het volgende is veel minder goed leesbaar en vrij specifiek.

 #header nav / * Regels voor het navigatiebereik * / ul / * Regels voor het menu * / li / * Regels voor lijstitems * / a / * Regels voor koppelingen * / 

Regels uitbreidbaar

Uitbreiden is bekend als u met objectgeoriënteerde talen werkt. Het wordt het best begrepen door een voorbeeld, laten we 3 knoppen maken die kleine variaties van elkaar zijn.

 .knop display: inline-block; kleur: # 000; achtergrond: # 333; border-radius: 4px; opvulling: 8px 11px;  .button-primary @extend .button; achtergrond: # 0091C2 .button-small @extend .button; font-size: 0.9em; opvulling: 3px 8px;  

De .button-primaire en .button-small klassen verlengen allen de .knop klasse wat betekent dat ze alle eigenschappen aannemen en dan hun eigen eigenschappen definiëren.

Dit is enorm nuttig in veel situaties waarin variaties van een element kunnen worden gebruikt. Berichten (alert / succes / fout), knoppen (kleuren, grootten), menutypes enzovoort kunnen allemaal de uitbreidingsfunctionaliteit gebruiken voor geweldige CSS-efficiëntie.

Een waarschuwing van strekt zich uit dat ze zullen niet werken in mediaquery's zoals je zou verwachten. Dit is een beetje geavanceerder, maar je kunt alles over dit gedrag lezen in Overeenstemmende plaatshouderselecteurs - placeholder selectors zijn speciale extensies waarover we binnenkort zullen praten.

mixins

Mixins zijn een andere favoriete functie van preprocessor-gebruikers. Mixins zijn herbruikbare regelsets - perfect voor leverancierspecifieke regels of voor het verkorten van lange CSS-regels.

Hoe zit het met het creëren van een overgangsregel voor hover-elementen:

 @mixing hover-effect -webkit-transition: background-color 200ms; -moz-overgang: achtergrondkleur 200ms; -o-overgang: achtergrondkleur 200ms; overgang: achtergrondkleur 200ms;  a @inclusief hover-effect;  .button @inclusief hover-effect;  

Met mixins kunt u ook variabelen gebruiken definieer de waarden binnen de mixin. We zouden het bovenstaande voorbeeld kunnen herschrijven geef ons controle over het exacte tijdstip van de overgang. We willen misschien dat knoppen een klein beetje langzamer gaan, bijvoorbeeld.

 @mixin hover-effect ($ snelheid) -webkit-overgang: achtergrondkleur $ snelheid; -moz-overgang: achtergrondkleur $ snelheid; -o-overgang: achtergrondkleur $ snelheid; overgang: achtergrondkleur $ snelheid;  a @inclusief hover-effect (200ms);  .button @inclusief hover-effect (300ms);  

Placeholder Selectors

Placeholder-selectors werden geïntroduceerd met Sass 3.2 en een probleem opgelost dat een opgeblazen gevoel kon veroorzaken in uw gegenereerde CSS-code. Bekijk deze code die foutmeldingen creëert:

 .bericht font-size: 1.1em; padding: 11px; border-width: 1px; border-style: solid;  .message-danger @extend. bericht; achtergrond: # C20030; color: # fff; randkleur: # A8002A; . bericht-succes @extend. bericht; achtergrond: # 7EA800; color: # fff; randkleur: # 6B8F00;  

Het is zeer waarschijnlijk dat de berichtklasse nooit zal worden gebruikt in onze HTML: dat is het geweest gemaakt om te worden uitgebreid, niet gebruikt zoals het is. Dit veroorzaakt een beetje een opgeblazen gevoel in je gegenereerde CSS. Om uw code efficiënter te maken, kunt u de selectiereeks selector gebruiken die wordt aangeduid met een percentageteken:

 % bericht font-size: 1.1em; padding: 11px; border-width: 1px; border-style: solid; . bericht-gevaar @uitbreidings% knop; achtergrond: # C20030; color: # fff; randkleur: # A8002A; . bericht-succes @extend% -knop; achtergrond: # 7EA800; color: # fff; randkleur: # 6D9700;  

In dit stadium vraag je je misschien af ​​wat het verschil is tussen uitbreidingen en mixins. Als u tijdelijke aanduidingen gebruikt, gedragen ze zich als een parameterloze mixin. Dit is waar, maar de uitvoer in CSS verschilt. Het verschil is dat mixins dupliceren regels terwijl tijdelijke aanduidingen zorgen ervoor dat dezelfde regels kiezers delen, resulterend in minder CSS op het einde.

Activiteiten

Het is moeilijk om de woordspeling hier te weerstaan, maar ik zal voorlopig geen medische grapjes maken. Operators stellen u in staat om wat rekenwerk te doen in uw CSS-code en kunnen behoorlijk pijnlijk nuttig zijn. Het voorbeeld in de Sass-gids is perfect om dit te laten zien:

 .container breedte: 100%;  artikel float: links; breedte: 600px / 960px * 100%;  opzij float: right; breedte: 300px / 960px * 100%;  

Het bovenstaande voorbeeld creëert een op 960px gebaseerd rastersysteem met minimale problemen. Het zal compileren naar de volgende CSS:

 .container breedte: 100%;  artikel float: links; breedte: 62,5%;  opzij float: right; breedte: 31,25%;  

Een groot gebruik dat ik vind voor bewerkingen is om kleuren daadwerkelijk te mengen. Als je het succesbericht Sass hierboven bekijkt, is het niet duidelijk dat de kleur van de achtergrond en de rand een soort relatie hebben. Door een grijstint af te trekken, kunnen we de kleur donkerder maken, waardoor de relatie zichtbaar wordt:

 $ primair: # 7EA800; .bericht-succes @extend% -knop; achtergrond: $ primair; color: # fff; border-color: $ primary - # 111;  

Hoe lichter de afgetrokken kleur, hoe donkerder de resulterende tint zal zijn. Hoe lichter de toegevoegde kleur, hoe lichter de resulterende tint.

functies

Er zijn een groot aantal functies om te gebruiken: nummerfuncties, tekenreeksfuncties, lijstfuncties, kleurfuncties en meer. Bekijk de lange lijst in de documentatie voor ontwikkelaars. Ik zal hier een paar bekijken om je te laten zien hoe ze werken.

De verlichten en verduisteren functie kan worden gebruikt om de lichtheid van een kleur te wijzigen. Dit is beter dan het aftrekken van kleuren, het maakt alles nog modulair en vanzelfsprekend. Bekijk ons ​​vorige voorbeeld met de functie Verduistering.

 $ primair: # 7EA800; .bericht-succes @extend% -knop; achtergrond: $ primair; color: # fff; randkleur: donkerder ($ primary, 5);  

Het tweede argument van de functie is het percentage verdonkering dat vereist is. Alle functies hebben parameters; Bekijk de documentatie om te zien wat ze zijn! Hier zijn enkele andere, voor zichzelf sprekende kleurfuncties: desaturate, verzadigen, omkeren, grijstinten.

De ceil functie retourneert, net als in PHP, een getal dat is afgerond op het volgende gehele getal. Dit kan worden gebruikt bij het berekenen van kolombreedtes of als u niet veel decimalen in de uiteindelijke CSS wilt gebruiken.

 .titel font-size: ceil ($ heading_formaat * 1.3314);  

Overzicht

De functies in Sass geven ons een groot vermogen om betere CSS te schrijven met minder moeite. Het juiste gebruik van mixins, uitbreidingen, functies en variabelen maakt onze stylesheets beter leesbaar, leesbaarder en gemakkelijker te schrijven.

Als je geïnteresseerd bent in een andere soortgelijke CSS-preprocessor, stel ik voor naar LESS te kijken (of onze beginnershandleiding te raadplegen) - de onderliggende principal is vrijwel hetzelfde!