Inmiddels weet ik zeker dat je hebt gehoord van Sass en hoe "je het echt moet gaan gebruiken!"
Een nieuw hulpmiddel leren kan zuigen en de tijd vinden om dit te doen is bijna onmogelijk, maar soms komt er een hulpmiddel dat onze sector verandert en te goed is om te negeren.
Naarmate onze webpagina's en apps complexer worden, worden onze stylesheets groter en moeilijker te onderhouden. CSS-preprocessors zoals Sass helpen door onze stijlbladen beknopt te houden en ons in staat te stellen onze code te modulariseren, terwijl we een hele reeks functies bieden die nog niet beschikbaar zijn in normale CSS.
Deze extra functies maken ze ook erg leuk om te gebruiken! Nu heb je misschien iets gezien dat er zo uitziet:
$i: 6;@while $i > 0 {.item-#{$i} {width: 2em * $ i; } $ i: $ i - 2;} // http://sass-lang.com/documentation/file.SASS_REFERENCE.html#_11
en dacht: "Whatttttttttttt? Bedankt, maar ik zal mijn normale CSS behouden. "
Ik geef toe, het ziet er angstaanjagend uit en sommige mensen doen sommige echt gek, complexe dingen met Sass, maar ik ben hier om je te vertellen dat iedereen het kan gaan gebruiken en de winsten die je op de eerste dag krijgt, zullen je een Sass-gelovige maken.
Sass instellen voor een project is iets buiten het bereik van dit artikel, maar de installatie is relatief eenvoudig en de Sass-website heeft dat instructies voor Linux, Mac of pc. Het leuke is dat als het eenmaal is geïnstalleerd, je elk CSS-bestand dat je hebt kunt overnemen en het een andere naam geven .scss waardoor het een Sass-bestand wordt.
Alle correct geformatteerde CSS is geldig Sass!
Dit betekent dat je Sass kunt gaan gebruiken terwijl je je stijlen blijft schrijven zoals je altijd hebt gedaan, en langzaam meer functies toevoegt naarmate je comfortniveau groeit. Dat klopt mensen, precies dezelfde ol '. zelfde ol 'maar hier zijn vijf geweldige winsten die je nu tot je beschikking hebt:
Wat is die hoofdkopkleur opnieuw? Hoe schrijf ik die font-stack? Hoe vaak heb je CSS geschreven en moest je door je vorige stijlen zoeken voor een waarde of moest je de kleurenpipper opnieuw doorbreken om die hexadecimale kleur te achterhalen?
Sass biedt variabelen als een manier om informatie op te slaan die u opnieuw wilt gebruiken in uw stylesheet. Nu kunt u die kleurwaarde of lange lettertypestapel opslaan als iets dat u gemakkelijk kunt onthouden. De manier waarop u een variabele declareert, is met een dollarteken $ gevolgd door de naam. Deze naam kan zijn zoals u wilt. Vervolgens typt u een dubbele punt : gevolgd door de waarde en een puntkomma ; :
$mainFont: "Helvetica Neue", Arial, sans-serif;$mainColor: #CC6699;
Als u nu een van deze waarden wilt gebruiken, kunt u gewoon de variabele gebruiken.
.mySelector { font-family: $mainFont; color: $mainColor; }
Geweldig, toch? Alleen al deze functie maakt het de installatie waard, omdat het zo veel tijd bespaart bij het maken van CSS. Het is zo geweldig dat het waarschijnlijk zijn weg vindt naar de CSS spec maar wie weet wanneer we het kunnen gebruiken? Gelukkig voor ons, met Sass hoeven we niet te wachten.
Nu zeg je tegen jezelf: "CSS heeft @import, het is niet zo cool" en je hebt gelijk, maar de CSS- en Sass-versies verschillen op een significante manier. In normale CSS @import trekt andere stijlbladen in, maar doet dit door een ander HTTP-verzoek te doen, iets dat we meestal willen vermijden. Om deze reden heb je misschien nog nooit @import gebruikt. Sass, aan de andere kant, is een preprocessor (nadruk op de pre) die dat bestand zal ophalen voordat het de CSS compileert.
Het resultaat is een CSS-pagina die wordt afgehandeld door één HTTP-aanvraag. Dit betekent dat je je css kunt opdelen in kleinere, beter onderhouden brokken, terwijl je nog steeds maar één pagina naar de browser hoeft. Moet u de tekst op de knop repareren? Geen bladen met skimming meer op zoek naar de relevante knopstijlen. Open de knop gedeeltelijk en breng de wijzigingen aan.
Wat is een deel? Precies zoals ze klinken. Het zijn gedeeltelijke Sass-bestanden die kleine CSS-fragmenten bevatten die u kunt opnemen in andere Sass-bestanden. Ze worden benoemd door een leidend onderstrepingsteken te gebruiken gevolgd door een naam. _myFile.scss . Het onderstrepingsteken laat Sass weten dat het bestand slechts een gedeeltelijk bestand is en dat het niet in CSS moet worden gecompileerd. Om dit deel te importeren, hoef je alleen maar de @import aan je bestand toe te voegen, zoals:
@import 'partials/myPartial';
Dus ik importeer _myPartial.scss in een map met de naam partials. U hoeft het onderstrepingsteken of de bestandsextensie niet op te nemen. Sass is slim genoeg om te weten welk bestand u bedoelt. Het gebruik van partials biedt ons een geweldige manier om onze code te modulariseren, waardoor deze meer draagbaar en gemakkelijker te onderhouden wordt.
Sass brengt functies mee naar de CSS-partij. Ik weet dat niet iedereen een programmeur is en dat het concept van een functie een beetje over je hoofd hangt, maar maak je geen zorgen, veel voegen een hoop nuttige functies toe zonder al te ingewikkeld te zijn. Wat kleuren betreft, zijn er verschillende handige om ze te manipuleren, maar drie vallen op als geweldige, makkelijke voordelen voor mensen die net zijn begonnen. Laten we kijken hoe we ze gebruiken.
//syntax lighten($color, $amount) darken($color, $amount) rgba($color, $alpha)
De syntaxis is redelijk rechttoe rechtaan. In de drie bovenstaande functies ziet u dat we voor elk twee argumenten hebben. De eerste is de kleur die we willen manipuleren. Dit kan een hexadecimale, RGB of een andere kleurindeling zijn met de juiste CSS. Het kan zelfs een variabele zijn. De tweede is het aantal waarmee we die kleur willen aanpassen. Maak 10% donkerder, lichter met 5%, stel de alpha in op 0,6. Het resultaat van deze functie is de waarde die is ingesteld in de gecompileerde CSS. Dus beneden zie je onze functies op het werk
//in parenthesis you can put any color value followed by the amount you want to modify it by.//lighten(#000, 10%)//darken(rgb(0,0,0), 25%)//rgba(blue, 0.6)//rgba($mainColor, 0.6)//use case$color: #333;//set color variable.myButton {background-color: rgba($color, 0.8);color: lighten($color, 65%);border: 1px solid darken($color, 5%);}//this compiles to:.myButton {background: rgba(51, 51, 51, 0.8);color: #d9d9d9;border: 1px solid #262626;}Hopelijk kun je al zien hoe dit nuttig zou kunnen zijn. Er zijn een tiental manieren om deze drie functies te gebruiken om een vrij cool kleurcontrast toe te voegen en ze kunnen overal worden gebruikt waar een kleurwaarde normaal gesproken zou gaan. Deze drie zijn slechts het topje van de ijsberg. Er zijn veel meer kleurfuncties en veel creatieve manieren waarop ze kunnen worden gebruikt.
Sommige dingen in CSS zijn een beetje vervelend om te schrijven. Mixins maken groepen CSS-verklaringen die we opnieuw kunnen gebruiken op onze site. CSS3-stijlen waarvoor voorvoegsels van leveranciers nodig zijn, zijn een perfect voorbeeld van het gebruik van een mixin. In plaats van dezelfde eigenschap steeds opnieuw te typen, schrijven we een mixin eenmaal en noemen we die mix wanneer we deze willen gebruiken. Om een mixin te declareren gebruiken we de @mixin trefwoord. We geven het een naam en passen onze stijlen toe tussen accolades zoals: @mixin box-sizing { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
Argumenten kunnen zelfs worden doorgegeven aan de mixin om het flexibeler te maken. Om onze mixin te gebruiken, gebruiken we alleen de @include trefwoord.
//declare mixin(now being passed an argument)@mixin box-sizing($boxSize) {-webkit-box-sizing: $boxSize;-moz-box-sizing: $boxSize;box-sizing: $boxSize;}//use mixin.mySelector {@include box-sizing(border-box);}//compiled to:.mySelector {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
Zoals je in het bovenstaande voorbeeld ziet, noemen we onze mixin met de @include gevolgd door de naam van de mixin en vervolgens alle argumenten tussen haakjes. Bedenk hoeveel tijd dit u zal besparen. Waarom gebruikt niet iedereen dit?
Deze tools waren geweldig, maar ik heb het beste bewaard voor het laatst. @extend is een van de handigste functies waarmee we een reeks CSS-eigenschappen van de ene selector naar de andere kunnen delen. Denk aan een paar knoppen, zoals een knop voor accepteren en weigeren in een modaal venster. Omdat ze beide knoppen zijn, delen ze waarschijnlijk het grootste deel van dezelfde stijl, maar de knop voor het negeren heeft een rode achtergrond om deze te laten opvallen. Met Sass schrijven we de standaardstijlen voor alle knoppen en "breiden" deze stijlen vervolgens uit naar de knop Neerlaten, waar we de rode achtergrond zouden toevoegen.
.button {background: rgba($color, .8);color: lighten($color, 65%);border: 1px solid darken($color, 5%);padding: 1em;display: block;max-width: 200px;}.button-decline {@extend .button;background: red;}//compiles to.button, .button-decline {background: rgba(51, 51, 51, 0.8);color: #d9d9d9;border: 1px solid #262626;padding: 1em;display: block;max-width: 200px;}.button-decline {background: red;}Man, hoe geweldig is het om jezelf niet te herhalen? Niet alleen bevordert dit de modularisering van onze stijlen, maar het vermindert ook het risico dat stijlen van knop naar knop gaan. Dit is een enorme tijd om te winnen! Vermenigvuldig dit voor alle stijlen van de site en we hebben een aanzienlijk kortere tijdsbestek voor het schrijven van CSS.
Heck, met alle tijd die we besparen, kunnen we misschien de meer complexe aspecten van Sass leren.
Ik hoop dat ik je heb overtuigd om deze geweldige tool een kans te geven en een aantal functies te illustreren die je productiviteit meteen kunnen verbeteren. De waarheid is dat ik dit artikel morgen opnieuw kan schrijven en nog vijf leuke dingen kan delen. Het is gewoon zo geweldig! Sass (en andere preprocessors) moeten hier blijven dus doe jezelf een plezier en begin ermee te werken. Voor diegenen die geïnteresseerd zijn in meer informatie, bekijk deze bronnen op twitter en het web:
twits:
Webs:
En als je in het Zuid-Florida Tri-county gebied bent, kom dan naar het Zuid-Florida Sass Meetup .