Sass Technieken uit de Loopgraven

0
13

Nadat in de ontwikkeling van het web-industrie voor meer dan 14 jaar, ik heb gezien en geschreven mijn billijk aandeel van goede en slechte CSS. Toen ik begon bij Ramsey Oplossingen vijf jaar geleden, werd ik voorgesteld aan de Sass. Het blies mijn gedachten, hoe nuttig het was! Dook ik meteen in en wilde alles leren kon ik over. De afgelopen vijf jaar, heb ik gebruik van een aantal verschillende Sass technieken en patronen en viel in liefde met een aantal dat, om te stelen van Apple ‘ s zin, gewoon werken.

In dit artikel zal ik verkennen van een breed scala van onderwerpen:

  • De kracht van het teken
  • Variabelen en scoping
  • Het belang van de invoer
  • Mixin’ it up
  • Aan de functionele
  • De kiezer om dat tijdelijke aanduidingen verknoeien

In mijn ervaring is het vinden van de balans tussen eenvoudig en complex is de essentiële component voor het maken van mooie programma ‘ s. Software moet niet alleen gemakkelijk voor mensen om te gebruiken, maar voor u en andere ontwikkelaars te houden in de toekomst. Ik beschouw deze technieken worden gevorderd, maar niet per definitie slim of complex, op doel!

“Iedereen weet dat de foutopsporing is twee keer zo moeilijk als het schrijven van een programma in de eerste plaats. Dus als je zo slim als je kunt zijn als je schrijft, hoe zult u ooit debug?”

—De Elementen van de Programmering en de Stijl (2e Editie), Hoofdstuk 2

Met dat in gedachten, laten we eerst kijken naar de Sass’ – teken.

De kracht van het teken

Er zijn veel verschillende naamgeving u kunt gebruiken bij het organiseren van uw CSS. Ik geniet van het gebruik van de meeste is PAK, een variatie van BEM (die kort voor de B– lock, Element, Modifier). Als u niet bekend bent met SUIT of BEM, zou ik aanraden een kijkje bij één van hen of beiden alvorens verder te gaan. Ik zal met behulp van de PAK-verdrag in de rest van dit artikel.

Wat naamgeving u ook kiest, het basis idee is dat elke stijl element krijgt zijn eigen klasse naam, voorafgegaan door de naam van het onderdeel. Dit idee is van belang voor hoe een aantal van de volgende organisatie werkt. Ook dit artikel is beschrijvend, niet normatief. Elk project is anders. Je moet doen wat het beste werkt voor uw project en uw team.

De ampersand is de belangrijkste reden dat ik het gebruik van KLEUR, BEM, en conventies, zoals ze zijn. Het stelt me in staat om te nestelen en scoping zonder bijten terug met de specificiteit. Hier is een voorbeeld. Zonder het gebruik van het teken, dat ik zou moeten maken van afzonderlijke kiezers te maken -titel en content elementen.

.MyComponent {
.MyComponent-title {}
}

.MyComponent-content {}

// Gecompileerd naar
.MyComponent .MyComponent-title {} // Niet wat we willen. Onnodige specificiteit!
.MyComponent-content {} // het Gewenste resultaat

Bij gebruik van PAK, ik wil het tweede resultaat -inhoud hoe schrijf ik al mijn kiezers. Om dit te doen, zou ik het moeten herhalen van de naam van de component in. Dit vergroot mijn kans om verkeerd typt de naam van de component als ik het schrijven van nieuwe stijlen. Het is ook zeer lawaaierig als het eindigt op het negeren van het begin van veel kiezers die kunnen leiden tot vergoelijken voor de hand liggende fouten.

.MyComponent {}
.MyComponent-title {}
.MyComponent-content {}
.MyComponent-author {}
// Enz.

Als dit de normale CSS, zouden we vast met het schrijven van het bovenstaande. Sinds we met behulp van Sass, er is een veel betere aanpak is het gebruik van het teken. De ampersand is geweldig want het bevat een verwijzing naar de actuele kiezen samen met hun ouders.

.Een {
// & = ‘.’
.B {
// & = ‘.Een .B’
.C {
// & = ‘.Een .B .C’
}
}
}

U kunt zien in het bovenstaande voorbeeld hoe de ampersand verwijzingen elke keuzemogelijkheid in de keten als het gaat dieper in de geneste code. Door gebruik te maken van deze functie, kunnen we het maken van nieuwe kiezers, zonder te schrijven, de naam van de component, elke keer weer.

.MyComponent {
&-title {}

&-content {}
}

// Gecompileerd naar
.MyComponent {}
.MyComponent-title {}
.MyComponent-content {}

Dit is geweldig, want we kunnen profiteren van het teken tot het schrijven van de naam van de component en gewoon verwijzing de naam van de component in. Dit vermindert de kans dat de naam van het onderdeel wordt getypt is. Plus, het document als geheel wordt het gemakkelijker om te lezen .MyComponent herhaald over de code.

Er zijn momenten waarop het onderdeel een variant of modifier, zoals ze genoemd wordt in PAK en BEM. Het gebruik van het teken patroon maakt het makkelijker te maken modifiers.

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

// Gecompileerd naar
.MyComponent {}
.MyComponent–xmasTheme {}

“Maar, wat over het wijzigen van de onderliggende elementen?” vraag je je misschien af. “Hoe zijn die kiezers gemaakt? De modifier is niet nodig op elk element, toch?”

Dit is waar de variabelen kan helpen!

Variabelen en scoping

In het verleden heb ik gemaakt modifiers op een paar verschillende manieren. De meeste van de tijd, zou ik het herschrijven van de speciale thema-naam die ik wil toepassen bij het wijzigen van het element.

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

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

// Gecompileerd naar
.MyComponent-title {}
.MyComponent–xmasTheme .MyComponent-title {}
.MyComponent-content {}
.MyComponent–xmasTheme .MyComponent-content {}

Dit wordt gedaan de baan, maar ik ben terug aan het herschrijven van de naam van het onderdeel in meerdere plaatsen, en niet te vergeten de naam van de modifier. Er is zeker een betere manier om dit te doen. Voer Sass variabelen.

Voordat we verkennen de Sass variabelen met kiezers, moeten we begrijpen hoe zij binnen het bereik. Sass variabelen hebben de ruimte, net zoals ze zou doen in JavaScript, Ruby, of een andere programmeertaal. Als verklaard buitenkant van een selector, de variabele is beschikbaar voor elke selector in het document na zijn verklaring.

$fontSize: 1.4 rem;

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

Variabelen gedeclareerd in een selector zijn toegesneden alleen aan dat de selector en de kinderen.

$fontSize: 1.4 rem;

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

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

.MyComponent2 {
font-size: $fontSize;

&-title {
font-weight: $fontWeight; // geeft “undefined variable” fout
}
}

We weten variabelen kunnen slaan lettertype namen, getallen, kleuren, etc. Wist je kan het ook opslaan kiezers? Met string interpolatie, kunnen we het maken van nieuwe kiezers met de variabele.

// Sass string interpolatie syntaxis #{VARIABELE}
$blok: “.MyComponent”;

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

// Gecompileerd naar
.MyComponent {}
.MyComponent-title {}
.MyComponent–xmasTheme .MyComponent-title {}

Dat is cool, maar de variabele is wereldwijd bereik. We kunnen vaststellen dat door het creëren van de $blok variabele in het onderdeel aangifte, die zou toepassingsgebied het voor dat onderdeel. Dan kunnen we opnieuw gebruik maken van de $blok variabele in andere componenten. Dit helpt de DROGE tot het thema aan te passen.

.MyComponent {
$blok: ‘.MyComponent’;

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

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

// Gecompileerd naar
.MyComponent {}
.MyComponent-title {}
.MyComponent–xmasTheme .MyComponent-title {}
.MyComponent-content {}
.MyComponent–xmasTheme .MyComponent-content {}

Dit is dichter bij, maar nogmaals, we hebben bij het schrijven van de thema naam over en voorbij. Laten we dat opslaan in een variabele te zijn!

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

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

Dit is veel beter! Echter, we kunnen verbeteren dit nog verder. Variabelen kunnen ook het opslaan van de waarde van het teken!

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

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

// Nog gecompileerd naar
.MyComponent {}
.MyComponent-title {}
.MyComponent–xmasTheme .MyComponent-title {}

Nu dat is wat ik bedoel! “Caching” de kiezer met het teken stelt ons in staat om onze modifiers aan de bovenkant en bewaar de wijzigingen thema met het element ‘ s wijzigen.

“Zeker, dat werkt op het hoogste niveau”, zeg je. “Maar wat als u geneste echt diep, zoals acht niveaus in?” Je vraagt grote vragen.

Ongeacht hoe diep het nest, dit patroon altijd werkt omdat de belangrijkste component naam is nooit verbonden geweest aan een van de kinderen, dankzij het PAK naamgeving en teken combo.

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

&-content {
font-size: 1.5 rem;
kleur: blue;

ul {
li {
sterke {
span {
&::before {
background-color: blue;

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

// Gecompileerd naar
.MyComponent-content {
font-size: 1.5 rem;
kleur: blue;
}

.MyComponent-inhoud ul li sterk span::before {
background-color: blue;
}

/*
* Het thema is nog steeds toegevoegd aan het begin van de selector!
* Nu we nooit moeten schrijven diep geneste Sass dat is moeilijk te onderhouden en
* zeer broos: https://css-tricks.com/sass-selector-combining/
*/
.MyComponent–xmasTheme .MyComponent-inhoud ul li sterk span::before {
background-color: red;
}

Code organisatie is de belangrijkste reden dat ik graag gebruik van dit patroon.

  • Het is relatief DROOG
  • Het ondersteunt de “opt-in” – benadering, die houdt van modifiers met de elementen die ze wijzigen
  • De naamgeving van spullen is hard, maar dit stelt ons in staat om hergebruik gemeenschappelijke element namen zoals “titel” en “inhoud”
  • Het is low-lift voor het toevoegen van een modifier aan een onderdeel door het plaatsen van de speciale klasse op de bovenliggende onderdeel

“Hhhmmmmm… niet dat je moeilijk te lezen, maar nadat u een bos van verschillende onderdelen? Hoe weet je waar je op bij alles wat met de naam &-titel en &-inhoud?”

Je blijven vragen, grote vragen. Die zei dat de bron Sass moest worden in één bestand? We kunnen importeren die onderdelen, dus laten we dat onderwerp!

Het belang van de invoer

Credit: @Julien_He

Een van de Sass’ beste features is @import. We maken aparte Sass-bestanden (boventonen) en importeren in andere Sass bestanden compileren samen met de geïmporteerde bestand zich bevindt op de plek waar het is ingevoerd. Dit maakt het gemakkelijk om een pakket tot verwante stijlen voor onderdelen, utilities, etc. en trek ze in een enkel bestand. Zonder @import, zouden we nodig hebben om een link naar een aparte CSS bestanden (maken van een groot aantal netwerk-aanvragen, die badong) of schrijf alles in één stylesheet (wat is het moeilijk om te navigeren en te onderhouden).

.Component1 {
&-title {}
&-content {}
&-author {}
}

.Component2 {
&-title {}
&-content {}
&-author {}
}

.Component3 {
&-title {}
&-content {}
&-author {}
}

.Component4 {
&-title {}
&-content {}
&-author {}
}

.Component5 {
&-title {}
&-content {}
&-author {}
}

// Een paar honderd regels later…

.Component7384 {
&-title {}
&-content {}
&-author {}
}

// WAAR BEN IK?

Een van de meer populaire methodes voor het organiseren van de Sass-bestanden is de 7-1 Patroon. Dat is zeven verschillende mappen met Sass bestanden die worden geïmporteerd in één Sass-bestand.

Deze mappen zijn:

  • abstracts
  • basis
  • onderdelen
  • indeling
  • pagina ‘ s
  • thema ‘ s
  • verkoper

Gebruik @import te trekken elke Sass bestand in deze map in een van de belangrijkste Sass-bestand. We willen om ze te importeren in de volgende volgorde naar het behouden van een goede reikwijdte en conflicten tijdens de compilatie:

  1. abstracts
  2. verkoper
  3. basis
  4. indeling
  5. onderdelen
  6. pagina ‘ s
  7. thema ‘ s

@import ‘abstracts/variabelen’;
@import ‘abstracts/functies’;
@import ‘abstracts/mixins’;

@import ” verkopers/een-derde-partij-component;

@import ‘base/normaliseren’;

@import ‘lay-out/navigatie’;
@import ‘lay-out/header’;
@import ‘lay-out/footer’;
@import ‘lay-out/sidebar’;
@import ‘opmaak/vormen’;

@import ‘onderdelen/knoppen’;
@import ‘onderdelen/held’;
@import ‘onderdelen/pull-quote’;

@import ‘pagina’ s/home’;
@import ‘pagina’ s/contact’;

@import ‘themes/default’;
@import ‘- thema ‘s/admin’;

Je kan wel of niet gebruik wilt maken van alle van deze mappen (ik persoonlijk geen gebruik maken van de thema map want ik houd thema ‘ s met hun onderdelen), maar het idee van het scheiden van alle stijlen in verschillende bestanden maakt het makkelijker te onderhouden en het vinden van de code.

Meer van de voordelen van deze aanpak:

  • Kleine onderdelen zijn makkelijker te lezen en te begrijpen
  • Foutopsporing wordt eenvoudiger
  • Het is duidelijker om te bepalen wanneer er een nieuw onderdeel moet worden gemaakt, bijvoorbeeld wanneer een enkele component bestand wordt te lang, of de selector keten is te complex
  • Dit benadrukt opnieuw gebruik, bijvoorbeeld, kan het zinvol zijn om te generaliseren drie component bestanden die in wezen hetzelfde doen in één component

Het spreken van re-gebruik, zijn er uiteindelijk patronen die je vaak gebruikt. Dat is wanneer we kunnen bereiken voor mixins.

Mixin’ it up

Mixins zijn een geweldige manier om hergebruik van stijlen in een project. We lopen door het maken van een eenvoudige mixin en geef het een beetje intelligentie.

De ontwerper werk ik op regelmatige basis met altijd stelt font-size, font-gewicht, en een line-height van specifieke waarden. Ik vond mezelf te typen alle drie uit elke keer als ik je nodig om de lettertypen voor een onderdeel of element, dus heb ik een mixin snel in te stellen die waarden. Het is net een beetje de functie die ik kan gebruiken om deze eigenschappen definiëren zonder ze op te schrijven.

@mixin tekst($grootte, $lineHeight, $gewicht) {
font-size: $size;
line-height: $lineHeight;
font-weight: $gewicht;
}

Op dit punt, de mixin is vrij eenvoudig—het lijkt op iets als een functie in JavaScript. Er is de naam van de mixin (tekst) en het duurt drie argumenten. Elk argument is gebonden aan een CSS-eigenschap. Wanneer de mixin is genoemd, Sass het kopiëren van de eigenschappen en de pas in het argument waarden.

.MyComponent {
@tekst(18px, 27px, 500);
}

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

Hoewel het een goede demonstratie, deze bijzondere mixin is een beetje beperkt. Het veronderstelt dat we altijd wilt gebruiken voor de lettertype-grootte, regelafstand en lettertype-eigenschappen gewicht wanneer het heet. Dus laten we gebruik maken van de Sass’ als verklaring voor de controle van de output.

@mixin tekst($grootte, $lineHeight, $gewicht) {
// Als $size argument is niet leeg is, dan is de uitvoer van het argument
@als $size != null {
font-size: $size;
}

// Als $lineHeight argument is niet leeg is, dan is de uitvoer van het argument
@als $lineHeight != null {
line-height: $lineHeight;
}

// Als $gewicht argument is niet leeg is, dan is de uitvoer van het argument
@als $gewicht != null {
font-weight: $gewicht;
}
}

.MyComponent {
@tekst(12px, null, 300);
}

// Gecompileerd naar
.MyComponent {
font-size: 12px;
font-weight: 300;
}

Dat is beter, maar er nog niet helemaal. Als ik probeer te gebruiken van het mixin zonder het gebruik van null als een parameter op de waarden die ik niet wil gebruiken of leveren, Sass zal er een fout gegenereerd:

.MyComponent {
@tekst(12px, null); // left off $gewicht
}

// Gecompileerd naar een fout:
// “Mixin tekst ontbreekt argument $gewicht.”

Om dit te omzeilen, kunnen wij u standaardwaarden voor de parameters, die ons in te laten uit de functie-aanroep. Alle optionele parameters worden gedeclareerd nadat alle vereiste parameters in.

// We definiëren `null` als standaard waarde voor elk argument
@mixin tekst($size: null, $lineHeight: null, $gewicht: null) {
@als $size != null {
font-size: $size;
}

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

@als $gewicht != null {
font-weight: $gewicht;
}
}

.MyComponent {
&-title {
@tekst(16px, 19px, 600);
}

&-auteur {
@tekst($gewicht: 800, $size: 12px);
}
}

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

.MyComponent-auteur {
font-size: 12px;
font-weight: 800;
}

Niet alleen standaard argument waarden maken het mixin makkelijker te gebruiken, maar we krijgen ook de mogelijkheid om de naam van parameters en geven hen de waarden die kunnen worden gebruikt. Op Lijn 21 boven, de mixin wordt genoemd met de argumenten van de orde, maar omdat de waarden worden genoemd, alsmede de in mixin weet hoe ze toe te passen.

Er is een bepaalde mixin die ik gebruik op een dagelijkse basis: min-width. Ik geef de voorkeur aan het maken van mijn websites mobiel eerste, of eigenlijk met de kleinste viewport in het achterhoofd. Als de viewport groeit breder, ik definieer breekpunten voor het aanpassen van de lay-out en de code voor het. Dit is waar ik te bereiken voor de min-width mixin.

// Laat de naam van deze ‘min-width’ en een enkel argument kunnen we
// te gebruiken voor het definiëren van de viewport breedte in een media query.
@mixin min-width($drempel) {
// We bellen naar een andere functie (scut-rem) om te zetten pixels rem-eenheden.
// We dekken dat in de volgende paragraaf.
@media screen and (min-width: scut-rem($drempel)) {
@inhoud;
}
}

.MyComponent {
display: block;

// Roep de min-width mixin en doorgeven 768 als argument.
// min-width gaat 768 en scut-rem zet het apparaat.
@bevatten min-width(768) {
display: flex;
}
}

// Gecompileerd naar
.MyComponent {
display: block;
}

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

Er zijn een paar nieuwe ideeën hier. De mixin is een geneste functie genaamd @inhoud. Dus, in de .MyComponent klasse, zijn we niet meer bellen naar het mixin alleen, maar ook een blok code die krijgt output in de media query ‘ s gegenereerd. De resulterende code zal compileren waar @inhoud wordt genoemd. Dit maakt het mixin voor de verzorging van de @media-verklaring en nog wel met aangepaste code voor dat bepaald breekpunt.

Ik ben ook met inbegrip van de mixin binnen .MyComponent verklaring. Sommige mensen pleiten voor het behoud van alle responsieve gesprekken in een aparte stylesheet te verminderen het bedrag van de tijden @media wordt geschreven in een stylesheet. Persoonlijk geef ik de voorkeur om alle variaties en veranderingen die een onderdeel kan gaan door met dat onderdeel van de verklaring. Het heeft de neiging om het makkelijker te maken om bij te houden wat er aan de hand en helpen bij het opsporen van de component als er iets niet naar rechts, in plaats van het doorspitten van meerdere bestanden.

Heb je de scut-rem functie in? Dat is een Sass functie die uit een Sass-bibliotheek genoemd Scut, gemaakt door David Clark. Laten we eens kijken hoe dat werkt.

Aan de functionele

Een functie verschilt van een mixin in dat mixins zijn bedoeld om de uitgang van de gemeenschappelijke groepen van eigenschappen, terwijl een functie wijzigt u de eigenschappen op basis van argumenten die een nieuw resultaat. In dit geval, scut-rem neemt een pixel waarde en zet het om in een rem-waarde. Dit stelt ons in staat om te denken in pixels, terwijl het werken met rem-units achter de schermen om te voorkomen dat alle de wiskunde.

Ik heb vereenvoudigde scut-rem in dit voorbeeld, want het heeft een paar extra functies die gebruik maken van loops en lijsten, die buiten het bereik van wat we aan het afdekken van hier. Laten we eens kijken naar de functie in zijn geheel, dan het af te breken stap-voor-stap.

// Vereenvoudigde uit de oorspronkelijke bron
$scut-rem-base: 16 !standaard;

@functie scut-strip-eenheid ($num) {
@return $num / ($num * 0 + 1);
}

@functie scut-rem ($pixels) {
@return scut-strip-eenheid($pixels) / $scut-rem-base * 1rem;
}

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

// Gecompileerd naar
.MyComponent {
font-size: 1.125 rem;
}

Het eerste ding om op te merken is de verklaring op Lijn 2. Het gebruik !standaard bij het declareren van een variabele, die vertelt Sass om de waarde 16, tenzij deze variabele is reeds gedefinieerd. Dus als een variabele wordt gedeclareerd eerder in de stylesheet met een andere waarde, het zal niet worden genegeerd.

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

.MyComponent {
font-size: $fontSize;
}

// Gecompileerd naar
.MyComponent {
font-size: 16px;
}

Het volgende stukje van de puzzel is scut-strip-eenheid. Deze functie neemt een px, rem, percentage of ander achtervoegsel waarde en verwijdert de eenheid label. Bellen scut-strip-eenheid(12px) geeft 12 in plaats van 12px. Hoe gaat dat in zijn werk? In Sass, een eenheid gedeeld door een ander exemplaar van hetzelfde type, zal de strook van de eenheid en de terugkeer van de cijfers.

12px / 1px = 12

Nu we dat weten, kijken we naar de scut-strip-eenheid van de functie weer.

@functie scut-strip-eenheid ($num) {
@return $num / ($num * 0 + 1);
}

De functie neemt in een eenheid en verdeelt het door 1 van dezelfde eenheid. Dus als we pas in 12px, de functie er als volgt uit: @return 12px / (12px * 0 + 1). Volgende is de volgorde van de bewerkingen, Sass evalueert wat in de haakjes eerst. Sass slim negeert de px-label, evalueert de expressie, en spijkers px terug op zodra het klaar is: 12 * 0 + 1 = 1px. De vergelijking is nu 12px / 1px die we kennen geeft 12.

Waarom is dit belangrijk om te scut-rem? Ziet er kijk op het weer.

$scut-rem-base: 16 !standaard;

@functie scut-rem ($pixels) {
@return scut-strip-eenheid($pixels) / $scut-rem-base * 1rem;
}

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

Op Lijn 4, de scut-strip-eenheid functie verwijdert px van het argument en retourneert 18. De basis variabele is gelijk aan 16 wordt de vergelijking in: 18 / 16 * 1rem. Vergeet niet, Sass negeert het toestel tot het einde van de vergelijking, dus 18 / 16 = 1.125. Dat resultaat vermenigvuldigd met 1rem geeft ons 1.125 rem. Sinds Scut-strips de eenheid uit van het argument, kunnen we noemen scut-rem met unit-minder waarden, zoals scut-rem(18).

Ik niet schrijven dat veel functies, omdat ik probeer de dingen die ik maak het zo eenvoudig mogelijk. Het kunnen doen van complexe conversies met iets als scut-rem is handig hoor.

De kiezer om dat tijdelijke aanduidingen verknoeien

Eindigen waar ik denk ook, dat de CSS?

Ik hou helemaal niet te gebruiken aanduidingen en @verlengen in mijn code. Ik vind het gemakkelijk in de problemen te komen met hen voor een paar verschillende redenen.

Wees voorzichtig met wat verlengd

Ik probeerde het schrijven van een aantal voorbeelden om aan te tonen waarom het gebruik van @verlengen kan problematisch zijn, maar ik heb ze zo weinig dat ik het niet kan maken een fatsoenlijke voorbeelden. Toen ik voor het eerst geleerd Sass, was ik omringd door teamgenoten die al door de beproevingen en kwellingen. Mijn vriend Jon Bebee schreef een uiterst uitstekend artikel over hoe @verlengen kan je in de problemen. Het is een snel lezen en de moeite waard de tijd, dus ik zal wachten.

Over die tijdelijke aanduidingen…

Jon stelt voor het gebruik van aanduidingen als een oplossing voor het probleem dat hij schetst: tijdelijke Aanduidingen niet uitvoer van code totdat ze worden gebruikt met @verlengen.

// % geeft een uitgebreid blok
%item {
display: block;
breedte: 50%;
margin: 0 auto;
}

.MyComponent {
@verlengen %punt;
kleur: blue;
}

// Gecompileerd naar
.MyComponent {
display: block;
breedte: 50%;
margin: 0 auto;
}

.MyComponent {
kleur: blue;
}

OK, wacht. Dus het output .MyComponent twee keer? Waarom is dit niet gewoon het combineren van de kiezers?

Dit zijn de vragen die ik had toen ik begon met tijdelijke aanduidingen (en vervolgens gestopt). De aanwijzing is de naam zelf. Tijdelijke aanduidingen houd een verwijzing naar de plaats in de stylesheet ze werden verklaard. Terwijl een mixin kopieën van de eigenschappen van de locatie wordt gebruikt, tijdelijke aanduidingen kopie van de kiezer naar de plaats waar de tijdelijke aanduiding is gedefinieerd. Als een resultaat, het kopieert het .MyComponent kiezen en plaatsen waar het %post is verklaard. Beschouw het volgende voorbeeld:

%flexy {
display: flex;
}

.Een {
kleur: blue;
}

.B {
@verlengen: %flexy;
kleur: groen;
}

.C {
@verlengen: %flexy;
kleur: rood;
}

// Gecompileerd naar
.B, .C {
display: flex;
}

.Een {
kleur: blue;
}

.B {
kleur: groen;
}

.C {
kleur: rood;
}

Hoewel B en C zijn verklaard verderop in de stylesheet, de tijdelijke plaatsen de uitgebreide eigenschappen lang de weg omhoog naar waar het oorspronkelijk is verklaard. Dat is niet een big deal in dit voorbeeld, want het is heel dicht bij de bron waar het gebruikt wordt. Echter, als we vasthouden aan iets als de 7-1 Patroon die we eerder, dan is tijdelijke aanduidingen zou worden gedefinieerd in een gedeeltelijk in de samenvattingen van de map, dat is een van de eerste geïmporteerde bestanden. Dat vraagt veel van stijl tussen de plaats waar de uitbreiding is de bedoeling en waar het daadwerkelijk gebruikt. Dat kan moeilijk te handhaven als het ook moeilijk te debuggen.

Sass Richtlijnen (natuurlijk) doet een groot werk met betrekking tot aanduidingen en uit te breiden en ik zou aanraden het te lezen. Het verklaart niet alleen de functie uitbreiden, maar aan het einde, pleit tegen het gebruik van het:

De meningen lijken te zijn zeer verdeeld over de voordelen en problemen van @breiden tot het punt waar veel ontwikkelaars, waaronder mezelf hebben ingezet tegen, […]

Er zijn vele andere functies van de Sass ik had geen betrekking op hier, net als loops en lijsten, maar ik heb eerlijk gezegd nog niet gebruikt op deze functies zo veel als degenen die we deden in dit artikel behandelen. Neem een kijkje via de Sass documentatie, als om niets anders te zien hoe de dingen doen. U kunt niet vinden van een gebruik voor alles meteen, maar een situatie kan komen en dat die kennis in je rug is van onschatbare waarde.

Laat het me weten als ik iets gemist of heb je iets verkeerd! Ik sta altijd open voor nieuwe ideeën en bespreken graag met u!

Verder Lezen

  • Sass Style Guide – Gedachten en aanbevelingen voor het houden van Sass reinigen en te onderhouden.
  • Wat een CSS-Code Review eruit Zou kunnen zien – Voornamelijk kijkt naar CSS, maar ook tips om de code review Sass bestanden.
  • Het definiëren van en het Omgaan met Technische Schuld – We hebben veel gepraat over DROGE methoden en efficiëntie in dit artikel. Deze post gaat over de verschillende gevolgen van uitgebreide of inefficiënte code.
  • Lussen in CSS Preprocessors – We hadden geen dekking lussen hier, maar Mirjam, Suzanne gaat in de diepte van de in dit artikel.
  • Sass Fragmenten – Een verzameling van handige Sass mixins en andere Sass patronen.