Sass Tekniker från Skyttegravarna

0
39

Efter att ha varit i branschen webbutveckling för mer än 14 år, jag har sett och skrivit min beskärda del av bra och dåliga CSS. När jag började på Ramsey Lösningar för fem år sedan blev jag introducerad till Sass. Det blåste mig hur bra det var! Jag dök rätt in och ville lära mig allt jag kunde om det. Under de senaste fem åren, jag har använt ett antal olika Sass tekniker och mönster och föll i kärlek med några som, för att stjäla Apples fras, är det bara att jobba.

I denna artikel kommer jag att utforska ett brett spektrum av ämnen:

  • Kraften av tecken
  • Variabler och avgränsning
  • Vikten av import
  • Mixin ” det
  • Få funktionella
  • Väljaren för att platshållare röra upp

I min erfarenhet, att hitta balansen mellan enkla och komplexa är det avgörande komponent för att göra bra program. Program bör inte bara vara lätt för människor att använda, men för att du och andra utvecklare för att underhålla i framtiden. Jag skulle överväga dessa tekniker för att vara avancerad, men inte nödvändigtvis smart eller komplexa, på syftet!

“Alla vet att felsökning är dubbelt så svårt som att skriva ett program i första hand. Så om du är lika smart som du kan bli när du skriver det, hur kommer du någonsin att felsöka det?”

—De Delar av Programmering och Stil (2nd Edition), Kapitel 2

Med detta i åtanke, låt oss först titta på Sass & – tecken.

Kraften av tecken

Det finns många olika namngivning du kan använda för att organisera dina CSS. Den jag tycker om att använda det mest är KOSTYM, en variant av BEM (vilket är en förkortning för B– lås, Element, Modifier). Om du är obekant med KOSTYM eller TJA, jag skulle rekommendera att ta en titt på en eller båda av dem innan vi går vidare. Jag kommer att använda den PASSAR konventionen under resten av denna artikel.

Vad namngivning du väljer, basen tanken är att varje stil elementet får sin egen klass namn, som läggs med den komponent namn. Detta är viktigt för hur några av följande organisation fungerar. Även denna artikel är deskriptiv, inte normativ. Alla projekt är olika. Du behöver för att göra vad som fungerar bäst för ditt projekt och ditt team.

Et-tecken är den främsta anledningen till att jag gillar att använda FÄRG, BEM och konventioner som dem. Det tillåter mig att använda häckande och avgränsning utan antingen bita tillbaka med specificitet. Här är ett exempel. Utan att använda de tecken, jag skulle behöva skapa separata omkopplare för att skapa-titel och innehåll element.

.MyComponent {
.MyComponent-title {}
}

.MyComponent-content {}

// Kompilerar till
.MyComponent .MyComponent-title {} // vi vill Inte veta av. Onödiga specificitet!
.MyComponent-content {} // Önskat resultat

När du använder FÄRG, jag vill ha andra resultat för innehåll att vara på hur jag skriver alla mina väljare. För att göra det så skulle jag behöva upprepa namnet på komponenten hela. Detta ökar min chans att mistype namnet på den komponent som jag skriver nya stilar. Det är också mycket bullrig som det slutar upp att ignorera början av många väljare som kan leda till att förgylla uppenbara felaktigheter.

.MyComponent {}
.MyComponent-title {}
.MyComponent-content {}
.MyComponent-författare {}
// Etc.

Om detta var normalt CSS, vi skulle vara fast du skriver ovan. Eftersom vi med hjälp av Sass, det är en mycket bättre metod att använda tecken. Et-tecknet är fantastiskt eftersom det innehåller en hänvisning till den aktuella väljare tillsammans med alla föräldrar.

.En {
// & = ‘.”
.B {
// & = ‘.En .B’
.C {
// & = ‘.En .B .C’
}
}
}

Du kan se i exemplet ovan hur tecken referenser varje väljare i den kedja som går djupare in nästlad kod. Genom att använda den här funktionen, som vi kan skapa nya väljare utan att behöva skriva om namnet på komponenten varje gång.

.MyComponent {
&-title {}

&-content {}
}

// Kompilerar till
.MyComponent {}
.MyComponent-title {}
.MyComponent-content {}

Detta är bra eftersom vi kan dra nytta av et-tecknet för att skriva namnet på komponenten en gång och bara hänvisa till komponenten namn är rökfria. Detta minskar chansen att komponentens namn är felaktigt angiven. Plus, det dokument som helhet blir lättare att läsa utan .MyComponent upprepas över koden.

Det finns tillfällen när en komponent behöver en variant eller modifierare, som de kallas i KOSTYM och BEM. Med hjälp av et-tecknet mönster gör det enklare att skapa modifierare.

<div class=”MyComponent MyComponent–xmasTheme”></div>
.MyComponent {
&–xmasTheme {}
}

// Kompilerar till
.MyComponent {}
.MyComponent–xmasTheme {}

“Men, vad sägs om att ändra underordnade element?” kanske du frågar. “Hur är de väljare som skapas? Modifierare inte behövs på varje del, eller hur?”

Det är där variabler som kan hjälpa till!

Variabler och avgränsning

I det förflutna, jag har skapat modifierare ett par olika sätt. De flesta av tiden, skulle jag skriva om den speciella tema namn jag vill använda när du ändrar element.

.MyComponent {
&-title {
.MyComponent–xmasTheme & {
}
}

&-content {
.MyComponent–xmasTheme & {
}
}
}

// Kompilerar till
.MyComponent-title {}
.MyComponent–xmasTheme .MyComponent-title {}
.MyComponent-content {}
.MyComponent–xmasTheme .MyComponent-content {}

Detta får jobbet gjort, men jag är tillbaka till att skriva om komponentens namn på flera ställen, för att inte nämna modifierare namn. Det är definitivt ett bättre sätt att göra detta. Ange Sass variabler.

Innan vi utforska Sass variabler med omkopplare, måste vi förstå hur de är inzoomad. Sass variabler har utrymme, precis som de skulle i JavaScript, Ruby, eller något annat programmeringsspråk. Om förklarats utanför en väljare, en variabel som är tillgängliga för alla väljare i dokumentet efter sin förklaring.

$fontSize: 1.4 rem;

.en { font-size: $fontSize; }
.b { font-size: $fontSize; }

Variabler som deklareras inuti en väljare är begränsad endast till att väljare och sina barn.

$fontSize: 1.4 rem;

.MyComponent {
$fontWeight: 600;
font-size: $fontSize;

&-title {
font-weight: $fontWeight; // Fungerar!
}
}

.MyComponent2 {
font-size: $fontSize;

&-title {
font-weight: $fontWeight; // skapar en “odefinierad variabel” fel
}
}

Vi vet variabler kan lagra teckensnitt namn, heltal, färger, etc. Visste du att det kan också lagra väljare? Med hjälp av sträng interpolation, vi kan skapa nya väljare med variabel.

// Sass string interpolation syntaxen är #{VARIABEL}
$block: “.MyComponent”;

#{$block} {
&-title {
#{$block}–xmasTheme & {
}
}
}

// Kompilerar till
.MyComponent {}
.MyComponent-title {}
.MyComponent–xmasTheme .MyComponent-title {}

Det är kallt, men variabeln är globalt begränsad. Vi kan fixa det genom att skapa $block variabel inne i komponenten förklaring, som skulle tillämpningsområdet för denna komponent. Då kan vi återanvända $block variabel i andra komponenter. Detta hjälper till att TORKA upp temat modifierare.

.MyComponent {
$block: ‘.MyComponent’;

&-title {
#{$block}–xmasTheme & {
}
}

&-content {
#{$block}–xmasTheme & {
}
}
}

// Kompilerar till
.MyComponent {}
.MyComponent-title {}
.MyComponent–xmasTheme .MyComponent-title {}
.MyComponent-content {}
.MyComponent–xmasTheme .MyComponent-content {}

Detta är närmare, men, återigen, vi måste skriva temat namn om och om igen. Låt oss att lagra i en variabel också!

.MyComponent {
$block: ‘.MyComponent’;
$xmasTheme: ‘.MyComponent–xmasTheme’;

&-title {
#{$xmasTheme} och {
}
}
}

Detta är mycket bättre! Dock kan vi förbättra detta ytterligare. Variablerna kan också lagra värdet av et-tecknet!

.MyComponent {
$block: &;
$xmasTheme: #{&}–xmasTheme;

&-title {
#{$xmasTheme} och {
}
}
}

// Fortfarande sammanställer att
.MyComponent {}
.MyComponent-title {}
.MyComponent–xmasTheme .MyComponent-title {}

Det är vad jag talar om! “Caching” väljaren med tecken tillåter oss att skapa våra modifierare på topp och hålla temat ändringar med inslag är det att ändra.

“Visst, som arbetar på den högsta nivån”, säger du. “Men vad händer om du är kapslade riktigt djupt, som åtta nivåer i?” Du ställa bra frågor.

Oavsett hur djupt boet, detta mönster att alltid fungerar på grund av att den viktigaste komponenten namn är aldrig fäst någon av barnen, tack vare den PASSAR naming convention och et-combo.

.MyComponent {
$block: &;
$xmasTheme: #{&}–xmasTheme;

&-content {
font-size: 1.5 rem;
färg: blå;

ul {
li {
stark {
span {
&::innan {
background-color: blue;

#{$xmasTheme} och {
background-color: red;
}
}
}
}
}
}
}
}

// Kompilerar till
.MyComponent-content {
font-size: 1.5 rem;
färg: blå;
}

.MyComponent-innehåll ul li stark span::innan {
background-color: blue;
}

/*
* Temat är fortfarande de bifogas till början av väljare!
* Nu har vi aldrig behöver skriva djupt kapslade Sass som är svårt att upprätthålla och
* extremt sköra: https://css-tricks.com/sass-selector-combining/
*/
.MyComponent–xmasTheme .MyComponent-innehåll ul li stark span::innan {
background-color: red;
}

Koden organisation är den främsta anledningen till att jag vill använda detta mönster.

  • Det är relativt TORRT
  • Det stödjer den “opt-in” – metoden, som håller modifierare med de element de modifierar
  • Namnge saker är svårt, men detta gör det möjligt för oss att återanvända gemensamma element med namn som “titel” och “innehåll”
  • Det är låg-hiss för att lägga till en modifierare till en komponent genom att placera modifier-klass på den överordnade delen

“Hhhmmmmm… inte att bli svårt att läsa om när du kan skapa en massa olika komponenter? Hur vet du om du är på när allt är uppkallad &-avdelning och &-innehåll?”

Du fortsätter att ställa bra frågor. Som sagt källa Sass var tvungen att vara i en fil? Vi kan importera dessa komponenter, så låt oss vända till ämnet!

Vikten av import

Kredit: @Julien_He

En av Sass bästa funktionerna är @import. Vi kan skapa separata Sass-filer (gingiva) och importera dem till andra Sass filer som sammanställer tillsammans med den importerade filen ligger på den plats det är importerade. Detta gör det enkelt för paket upp närliggande stilar för komponenter, verktyg, etc. och dra dem till en enda fil. Utan @import, skulle vi behöva för att länka till en separat CSS-filer (vilket skapar många förfrågningar från nätverket, som är badong) eller skriva allt i en enda stylesheet (vilket är svårt att navigera och upprätthålla).

.Component1 {
&-title {}
&-content {}
&-författare {}
}

.Component2 {
&-title {}
&-content {}
&-författare {}
}

.Component3 {
&-title {}
&-content {}
&-författare {}
}

.Component4 {
&-title {}
&-content {}
&-författare {}
}

.Component5 {
&-title {}
&-content {}
&-författare {}
}

// Ett par hundra rader senare…

.Component7384 {
&-title {}
&-content {}
&-författare {}
}

// VAR ÄR JAG?

En av de mer populära metoderna för att organisera Sass-filer är 7-1 Mönster. Det är sju olika mappar som innehåller Sass filer som importeras till en enda Sass-fil.

Dessa mappar är:

  • abstracts
  • bas
  • komponenter
  • layout
  • sidor
  • teman
  • leverantör

Använder @import för att dra varje Sass-filen i dessa mapp till en main Sass-fil. Vi vill att importera dem i följande ordning för att upprätthålla en god räckvidd och undvika konflikter under samlingar:

  1. abstracts
  2. leverantör
  3. bas
  4. layout
  5. komponenter
  6. sidor
  7. teman

@import “abstracts/variabler’;
@import “abstracts/funktioner’;
@import “abstracts/mixins’;

@import “leverantörer/några-tredje-part-komponent’;

@import “- bas/normalisera’;

@import “layout/navigering’;
@import “layout/header”;
@import “layout/sidfot”;
@import “layout/sidebar’;
@import “layout/formulär’;

@import “- komponenter/ – knappar”;
@import “- komponenter/hero”;
@import “- komponenter/pull-citat’;

@import “- sidor/home’;
@import “- sidor/kontakt’;

@import “- themes/default’;
@import “- teman/admin’;

Du kanske eller kanske inte vill använda alla dessa mappar (jag personligen inte använder tema mapp eftersom jag hålla teman med deras komponenter), men tanken på att separera alla stilar i olika filer gör det lättare att underhålla och hitta koden.

Mer om fördelarna med att använda denna metod:

  • Små komponenter är lättare att läsa och förstå
  • Felsökning blir enklare
  • Det är tydligare att avgöra när en ny komponent som ska skapas — som när en enskild komponent filen får inte vara för lång, eller väljaren kedjan är alltför komplex
  • Detta understryker åter-användning — till exempel, det kan vara meningsfullt att generalisera tre olika filer som gör i stort sett samma sak i en komponent

På tal om återanvändning, det är så småningom mönster som får användas ofta. Det är då vi kan nå för mixins.

Mixin ” det

Mixins är ett bra sätt att återanvända stilar genom hela projektet. Låt oss gå igenom för att skapa en enkel mixin och sedan ge det lite av intelligens.

Designern arbetar jag med på en regelbunden basis sätter alltid font-storlek, font-weight, och line-height till specifika värden. Jag hittade mig själv att skriva alla tre ut varje gång jag behövde för att justera typsnitt för en komponent eller del, så jag skapade en mixin för att snabbt ställa in dessa värden. Det är som en liten funktion som jag kan använda för att definiera dessa egenskaper utan att behöva skriva dem i sin helhet.

@mixin sms: a($storlek, $lineHeight, $vikt) {
font-size: $storlek.
line-height: $lineHeight;
font-weight: $vikt.
}

Vid denna punkt, mixin är ganska enkelt—det liknar något som en funktion i JavaScript. Det är namnet på mixin (text) och det tar tre argument. Varje argument är knutet till en CSS-egenskapen. När mixin kallas, Sass kommer att kopiera egenskaper och pass i argumentet värden.

.MyComponent {
@innehålla text(18px, 27px, 500);
}

// Kompilerar till
.MyComponent {
font-size: 18px;
line-height: 27px;
font-weight: 500;
}

Även om det är en bra demonstration, detta särskilt mixin är lite begränsad. Det förutsätter att vi alltid vill använda font-storlek, linje-höjd, och font-weight egenskaper när det heter. Så låt oss använda Sass if-sats för att hjälpa till att kontrollera produktionen.

@mixin sms: a($storlek, $lineHeight, $vikt) {
// Om $storlek argument är inte tom, sedan utgång argumentet
@om $storlek != null {
font-size: $storlek.
}

// Om $lineHeight argument är inte tom, sedan utgång argumentet
@om $lineHeight != null {
line-height: $lineHeight;
}

// Om $vikt argument är inte tom, sedan utgång argumentet
@om $vikt != null {
font-weight: $vikt.
}
}

.MyComponent {
@innehålla text(12px, null, 300);
}

// Kompilerar till
.MyComponent {
font-size: 12px;
font-weight: 300;
}

Det är bättre, men inte riktigt där. Om jag försöker använda mixin utan använder null som en parameter på de värden jag vill inte använder eller tillhandahåller, Sass kommer att generera ett fel:

.MyComponent {
@innehålla text(12px, null); // vänster av $vikt
}

// Sammanställer ett fel:
// “Mixin saknas texten argument $vikt.”

För att komma runt detta, vi kan lägga till förvalda värden för de parametrar som gör det möjligt för oss att lämna dem utanför funktionen val för samtal. Alla valfria parametrar som måste deklareras efter några parametrar som krävs.

// Vi definierar “null” som standard värde för varje argument
@mixin sms: a($storlek: null, $lineHeight: null, sek vikt: null) {
@om $storlek != null {
font-size: $storlek.
}

@om $lineHeight != null {
line-height: $lineHeight;
}

@om $vikt != null {
font-weight: $vikt.
}
}

.MyComponent {
&-title {
@innehålla text(16px, 19px, 600);
}

&-författare {
@innehålla text($vikt: 800, $size: 12px);
}
}

// Kompilerar till
.MyComponent-title {
font-size: 16px;
line-height: 19px;
font-weight: 600;
}

.MyComponent-författare {
font-size: 12px;
font-weight: 800;
}

Inte bara standard argument värden gör mixin lättare att använda, men vi får också möjlighet att namn parametrar och ger dem värden som kan vara vanligt förekommande. På Rad 21 ovan, mixin anropas med argument i ordning, men eftersom värdena är ropas ut liksom, mixin vet hur de ska tillämpa dem.

Det finns en viss mixin som jag använder dagligen: min-width. Jag föredrar att skapa alla mina webbplatser mobile first, eller i stort sett med minsta viewport i åtanke. Som det virtuella växer vidare, jag definiera brytpunkter för att anpassa layout och kod för det. Det är där jag når för min-width mixin.

// Låt oss kalla denna “min-width” och ta ett enda argument vi kan
// använd den för att definiera virtuella bredd i en media query.
@mixin min-width($tröskel) {
// Vi att anropa en annan funktion (scout-rem) för att konvertera pixlar till rem-enheter.
// Vi kommer att gå igenom detta i nästa avsnitt.
@media screen och (min-width: scut-rem($tröskel)) {
@innehåll.
}
}

.MyComponent {
display: block;

// Ringa min-width mixin och passera 768 som argument.
// min-width passerar 768 och scut-rem konverterar enheten.
@inkluderar min-width(768) {
display: flex;
}
}

// Kompilerar till
.MyComponent {
display: block;
}

@media screen och (min-width: 48rem) {
.MyComponent {
display: flex;
}
}

Det finns ett par nya idéer här. Den mixin har en kapslad funktion som kallas @innehåll. Så, i den .MyComponent klass, vi är inte längre ringa mixin ensam, men också ett block av kod som får utgång inne i media query som genereras. Den resulterande koden kommer att sammanställa där @innehåll kallas. Detta gör att den mixin att ta hand om @media-deklaration och ändå acceptera en egen kod för att viss brytpunkt.

Jag är också inklusive mixin inom .MyComponent förklaring. Vissa människor förespråkar att hålla alla lyhörda samtal i en separat stilmall för att minska antalet gånger @media skrivs ut i en formatmall. Personligen föredrar jag att hålla alla variationer och förändringar som en komponent kan gå igenom med denna komponent är förklaringen. Det tenderar att göra det lättare att hålla reda på vad som händer och hjälpa till att felsöka komponent om något inte går rätt, snarare än att behöva gå igenom flera filer.

Märkte du scut-rem funktion i det? Det är en Sass-funktionen tas från en Sass bibliotek som heter Scout, skapad av David Clark. Låt oss ta en titt på hur det fungerar.

Få funktionella

En funktion skiljer sig från en mixin i att mixins är tänkt att produktionen gemensamma grupper av fastigheter, medan en funktion ändrar egenskaper baserat på argument och som returnerar ett nytt resultat. I detta fall, scout-rem tar en pixel värde och omvandlar det till en rem värde. Detta tillåter oss att tänka i pixlar, medan du arbetar med rem enheter bakom kulisserna för att undvika allt som matte.

Jag har förenklat scut-rem i detta exempel eftersom det har några extra funktioner att använda sig av slingor och listor, som omfattas av vad vi som täcker här. Låt oss titta på funktionen i sin helhet, för att sedan bryta ner det steg-för-steg.

// Förenklad från den ursprungliga källan
$scut-rem-bas: 16 !standard;

@funktion scut-band-enhet ($num) {
@return $num / ($num * 0 + 1);
}

@funktion scut-rem ($pixlar) {
@return scut-band-enhet($pixlar) / $scut-rem-bas * 1rem;
}

.MyComponent {
font-size: scut-rem(18px);
}

// Kompilerar till
.MyComponent {
font-size: 1.125 rem;
}

Det första att notera är förklaringen på Linje 2. Det finns hjälp !standard när man deklarerar en variabel, som berättar Sass att ställa in värdet till 16 om inte den här variabeln har redan definierats. Så om en variabel deklareras tidigare i stilmallen med ett annat värde, kommer det inte ändras här.

$fontSize: 16px;
$fontSize: 12px !standard;

.MyComponent {
font-size: $fontSize;
}

// Kompilerar till
.MyComponent {
font-size: 16px;
}

Nästa pusselbit är scout-band-enhet. Denna funktion tar ett px, rem -, procent-eller andra bifogade värde och tar bort enhetens etikett. Ringer scut-band-enhet(12px) returnerar 12 i stället för 12px. Hur fungerar det? I Sass, en enhet delas med en annan enhet av samma typ kommer band i enheten igen och ta tillbaka den siffran.

12px / 1px = 12

Nu när vi vet det, låt oss titta på scout-band-enhet fungera igen.

@funktion scut-band-enhet ($num) {
@return $num / ($num * 0 + 1);
}

Funktionen tar i en enhet och delar av 1 i samma enhet. Så om vi passerar i 12px, funktion skulle se ut: @return 12px / (12px * 0 + 1). Efter order av verksamheten, Sass utvärderar vad som är inom parantes första. Sass smart ignorerar px etikett, utvärderar uttryck, och nubb px tillbaka på när det är gjort: 12 * 0 + 1 = 1px. Ekvationen är nu 12px / 1px som vi vet returnerar 12.

Varför är detta viktigt att scut-rem? Ser ut titta på det igen.

$scut-rem-bas: 16 !standard;

@funktion scut-rem ($pixlar) {
@return scut-band-enhet($pixlar) / $scut-rem-bas * 1rem;
}

.MyComponent {
font-size: scut-rem(18px);
}

På Rad 4, scout-band-enhet-funktionen tar bort px från argument och returnerar 18. Basen variabel är lika med 16 som visar ekvationen till: 18 / 16 * 1rem. Kom ihåg, Sass ignorerar någon enhet tills slutet av ekvationen, så 18 / 16 = 1.125. Detta resultat multipliceras med 1rem ger oss 1.125 rem. Eftersom Scut remsor av enheten av argument, vi kan kalla scut-rem med enhet-mindre värden, som scout-rem(18).

Jag skriver inte att det är många funktioner eftersom jag försöker att hålla saker jag skapa så enkla som möjligt. Att kunna göra vissa komplexa omvandlingar med hjälp av något som scout-rem är bra ändå.

Väljaren för att platshållare röra upp

Att hamna där jag tror att det gjorde, att CSS?

Jag gillar verkligen inte att använda platshållare och @förlänga i min kod. Jag tycker att det är lätt att få problem med dem för ett par olika skäl.

Var försiktig med vad förlängs

Jag försökte skriva ut några exempel för att visa varför med hjälp av @utvidga kan vara problematiskt, men jag har använt dem så lite att jag inte kan skapa några bra exempel. När jag först lärde mig Sass, jag var omgiven av lagkamrater som redan har gått igenom prövningar och vedermödor. Min vän Jon Bebee skrev en mycket bra artikel om hur @utvidga kan få dig i trubbel. Det är en snabb läs och värt tiden, så jag ska vänta.

Om dessa platshållare…

Jon föreslår att använda platshållare som en lösning på de problem han beskriver: Platshållare inte produktionen någon kod förrän de är vana med @förlänga.

// % betecknar en längre block
%item {
display: block;
width: 50%;
marginal: 0 auto;
}

.MyComponent {
@förlänga %punkt.
färg: blå;
}

// Kompilerar till
.MyComponent {
display: block;
width: 50%;
marginal: 0 auto;
}

.MyComponent {
färg: blå;
}

OK, vänta. Så det utgång .MyComponent två gånger? Varför inte det helt enkelt kombinera väljare?

Dessa är de frågor som jag hade när jag först började använda platshållare (och därefter stoppas). Ledtråden är själva namnet. Platshållare helt enkelt hålla en hänvisning till den plats i stilmallen de deklarerades. Medan en mixin kopior fastigheterna till det läge den används, platshållare kopiera väljaren till den plats där den platshållare var definierat. Som ett resultat, det kopierar .MyComponent väljare och placerar den där %objektet är deklarerade. Tänk dig följande exempel:

%flexy {
display: flex;
}

.En {
färg: blå;
}

.B {
@förlänga: %flexy;
färg: grön;
}

.C {
@förlänga: %flexy;
färg: röd;
}

// Kompilerar till
.B, .C {
display: flex;
}

.En {
färg: blå;
}

.B {
färg: grön;
}

.C {
färg: röd;
}

Även om B och C förklaras längre ner i stilmallen, platshållaren platser den utökade egenskaper tall vägen upp till där den ursprungligen angivna. Det är inte en big deal i det här exemplet eftersom det är verkligen nära till källan, där det används. Men om vi ansluter sig till något som 7-1 Mönster som vi berört tidigare, då platshållare skulle definieras i en delvis i abstracts mapp, som är en av de första importerade filer. Som sätter mycket av stil mellan där förlänga är avsedda för, och där det faktiskt används. Det kan vara svårt att upprätthålla liksom svårt att felsöka.

Sass Riktlinjer (naturligtvis) gör ett bra jobb som täcker platshållare och utvidga och jag skulle rekommendera att läsa det. Det är inte bara förklarar förlänga funktion, men i slutet, förespråkar mot att använda det:

Åsikter verkar vara extremt uppdelad om fördelar och problem från @sträcker sig till den punkt där många utvecklare, inklusive mig själv har kämpat mot det, […]

Det finns många andra funktioner av Sass jag inte gå igenom här, som loopar och listor, men jag har ärligt talat inte har förlitat sig på dessa funktioner så mycket som vi gjorde cover på denna artikel. Ta en titt genom Sass dokumentation, om inte för något annat, för att se vad saker att göra. Kan du inte hitta en användning för allt på en gång, men en situation kan komma upp och med den kunskapen i ryggen är ovärderliga.

Låt mig veta om jag missat något eller har du något fel! Jag är alltid öppen för nya idéer och vill gärna diskutera det med dig!

Ytterligare Läsning

  • Sass Style Guide – Tankar och rekommendationer för att hålla Sass rengöra och underhålla.
  • Vad en CSS-Kod Granskning Kan Se Ut – Främst ser på CSS, men innehåller tips för att kodgranskning Sass-filer.
  • Definiera och Hantera Teknisk Skuld – Vi pratade en hel del om TORRA metoder och effektivitet i denna artikel. Detta inlägg berättar om de olika konsekvenserna av verbose eller ineffektiv kod.
  • Slingor i CSS-Förbehandling – Vi hade inte täcka slingor här, men Miriam Suzanne går på djupet i denna artikel.
  • Sass Utdrag – En samling av praktiska Sass mixins och andra Sass mönster.