För ett tag sedan skrev Thoriq Firdaus en bra artikel om att komma igång med Sass som visade dig hur du installerar och använder detta mycket användbara CSS-förprocessorspråk (du kanske vill kolla in det, du vet, för att komma igång).
I den här artikeln tänkte jag ge dig lite mer information om vad du kan göra med Sass och hur utvecklare använder det varje dag för att skapa bättre, mer modulär CSS-kod. Hoppa till avsnittet du vill ha:
Verktyg för handeln
Thoriq visade dig hur du kan använda Sass från kommandoraden med kommandot sass –watch.
Om du föredrar GUI-verktyg kan du gå till min favoritapp. kodsatsett webbutvecklingsverktyg för Sass-kompilering, sammanlänkning, auto-prefixing och mycket mer. Prepros är en annan mycket kapabel applikation som kan användas på alla system. Båda är betalda appar men de är värda det om du ska använda dem på lång sikt.
Om du bara vill prova Sass utan att betala för någonting du kan använda terminalen, eller Utforskarens applikationen funktionsrik gratisapp för flera plattformar, som kan hålla sig mot sina premiummotsvarigheter.
variabler
En av de första sakerna du måste förstå är variabler. Om du har erfarenhet av PHP eller annat liknande kodningsspråk kommer detta att falla dig naturligt. Variablerna är för lagra återanvändbara bitar av informationsom ett färgvärde, till exempel:
$primary_color: #666666;
.button {
color: $primary_color;
}
.important {
color: $primary_color;
}
Detta kanske inte verkar så användbart här, men tänk dig att ha 3000 rader kod. Om ditt färgschema ändras måste du byta ut varje färgvärde i CSS. Med Sass kan du helt enkelt ändra värdet av variabeln $primary_color och det är allt.
Variablerna är vana vid lagra teckensnittsnamn, storlekar, färger och en mängd annan information. För större projekt kan det vara värt att extrahera alla variabler i en separat fil (vi får se hur det går till snart).
Vad detta låter dig göra är att ändra färgen på hela ditt projekt och ändra typsnitt och andra viktiga aspekter. utan att ens röra de faktiska CSS-reglerna. Allt du behöver göra är att ändra några variabler.
Häckande
En annan grundläggande funktion som Sass erbjuder dig är förmågan att kapsla regler. Låt oss säga att du skapar en navigeringsmeny. Den har ett navigeringselement som innehåller en oordnad lista, listobjekt och länkar. I CSS kan du göra något så här:
#header nav {
/* Rules for the nav area */
}
#header nav ul {
/* Rules for the menu */
}
#header nav li {
/* Rules for list items */
}
#header nav a {
/* Rules for links */
}
I utväljarna upprepar vi oss mycket. Om elementen har gemensamma rötter kan vi använda häckning till skriv våra regler på ett mycket renare sätt.
Så här kan ovanstående kod se ut i Sass:
#header {
nav {
/* Rules for the nav area */
}
ul {
/* Rules for the menu */
}
li {
/* Rules for list items */
}
a {
/* Rules for links */
}
}
Nesting är extremt användbart eftersom gör stilmallar (mycket) mer läsbara. Genom att använda kapsling tillsammans med korrekt indragning kan du uppnå mycket läsbara kodstruktureräven om du har en bra mängd kod.
En nackdel med häckning är att den kan leda till onödig specificitet. I det föregående exemplet har jag hänvisat till länkar med #header nav a. Du kan också använda #header nav ul li a, vilket förmodligen skulle vara för mycket.
I Sass är det mycket lättare att vara mycket specifik eftersom allt du behöver göra är att bygga in dina regler. Följande är mycket mindre läsbart och ganska specifikt.
#header {
nav {
/* Rules for the nav area */
ul {
/* Rules for the menu */
li {
/* Rules for list items */
a {
/* Rules for links */
}
}
}
}
}
Expandera regeluppsättningar
Tillägget kommer att vara bekant för dig om du arbetar med objektorienterade språk. Det är bättre att förstå med ett exempel: låt oss skapa 3 knappar som är små variationer av varandra.
.button {
display: inline-block;
color: #000;
background: #333;
border-radius:4px;
padding:8px 11px;
}
.button-primary {
@extend .button;
background: #0091C2
}
.button-small {
@extend .button;
font-size:0.9em;
padding:3px 8px;
}
Klasserna .button-primary och .button-small utökar .button-klassen, vilket innebär att de tar alla dess egenskaper och definierar sedan sina egna.
Detta är oerhört användbart i många situationer där varianter av ett element kan användas. Meddelanden (varning/framgång/fel), knappar (färger, storlekar), menytyper osv. De skulle kunna använda tilläggsfunktionen för stor CSS-effektivitet.
En varning om förlängningar är det fungerar inte i mediafrågor som förväntat. Det här är lite mer avancerat men du kan läsa allt om detta beteende i Förstå platshållarväljare – Platshållarväljare är en speciell typ av tillägg som vi kommer att prata om snart.
blandar
Mixins är en annan favoritfunktion hos förprocessoranvändare. Mixins är återanvändbara regeluppsättningar, perfekta för leverantörsspecifika regler eller för att förenkla långa CSS-regler.
Vad sägs om att skapa en övergångsregel för flytande element?
@mixing hover-effect {
-webkit-transition: background-color 200ms;
-moz-transition: background-color 200ms;
-o-transition: background-color 200ms;
transition: background-color 200ms;
}
a {
@include hover-effect;
}
.button {
@include hover-effect;
}
Mixins låter dig också använda variabler för att definiera värdena inuti mixin. Vi skulle kunna skriva om det tidigare exemplet till Ge oss kontroll över den exakta tidpunkten för övergången.. Vi kanske vill att knapparna ska gå lite långsammare, till exempel.
@mixin hover-effect( $speed ) {
-webkit-transition: background-color $speed;
-moz-transition: background-color $speed;
-o-transition: background-color $speed;
transition: background-color $speed;
}
a {
@include hover-effect(200ms);
}
.button {
@include hover-effect(300ms);
}
Platshållarväljare
Platshållarväljare introducerades med Sass 3.2 och löste ett problem som kunde orsaka en viss uppblåsthet i den genererade CSS-koden. Ta en titt på den här koden som skapar felmeddelanden:
.message {
font-size:1.1em;
padding:11px;
border-width:1px;
border-style:solid;
}
.message-danger {
@extend .message;
background: #C20030;
color:#fff;
border-color: #A8002A;
}
.message-success {
@extend .message;
background: #7EA800;
color:#fff;
border-color: #6B8F00;
}
Meddelandeklassen kommer sannolikt aldrig att användas i vår HTML: det har den varit skapad för att utökas, inte användas som den är. Detta orsakar lite svullnad i den genererade CSS. För att göra din kod mer effektiv kan du använda platshållarväljaren som anges med ett procenttecken:
%message {
font-size:1.1em;
padding:11px;
border-width:1px;
border-style:solid;
}
.message-danger {
@extend %button;
background: #C20030;
color:#fff;
border-color: #A8002A;
}
.message-success {
@extend %button;
background: #7EA800;
color:#fff;
border-color: #6D9700;
}
I det här skedet kanske du undrar vad skillnaden är mellan extensions och mixins. Om du använder platshållare beter sig de som en mixin utan parametrar. Detta är sant, men resultatet i CSS är annorlunda. Skillnaden är att mixins dubbletter av regler medan Platshållare kommer att se till att samma regler delar väljare.vilket resulterar i mindre CSS i slutändan.
Operationer
Det är svårt att motstå ordleken här, men jag avstår från medicinska skämt tills vidare. Operatörer låter dig göra vissa beräkningar i din CSS-kod och kan vara mycket användbara. Exemplet i skamlös guide Det är perfekt att visa detta:
.container { width: 100%; }
article {
float: left;
width: 600px / 960px * 100%;
}
aside {
float: right;
width: 300px / 960px * 100%;
}
Exemplet ovan skapar ett 960px-baserat rutsystem med minimalt krångel. Det kommer att kompileras bra med följande CSS:
.container {
width: 100%;
}
article {
float: left;
width: 62.5%;
}
aside {
float: right;
width: 31.25%;
}
En stor användning jag tycker för operationer är att blanda färger. Om du tar en titt på Sass framgångsmeddelande ovan är det inte tydligt att bakgrunden och kantfärgen har någon form av relation. Genom att subtrahera en grå ton kan vi göra färgen mörkare, vilket gör förhållandet synligt:
$primary: #7EA800;
.message-success {
@extend %button;
background: $primary;
color:#fff;
border-color: $primary - #111;
}
Ju ljusare den subtraherade färgen är, desto mörkare blir den resulterande tonen. Ju ljusare färg som läggs till, desto ljusare blir den resulterande tonen.
Funktioner
Det finns ett stort antal funktioner att använda: sifferfunktioner, strängfunktioner, listfunktioner, färgfunktioner med mera. Ta en titt på den långa listan på utvecklardokumentation. Jag ska ta en titt på ett par här bara för att visa hur de fungerar.
Funktionen ljusare och mörkare kan användas för att ändra ljusheten i en färg. Detta är bättre än att subtrahera skuggor, det gör allt ännu mer modulärt och uppenbart. Ta en titt på vårt exempel ovan med funktionen mörkare.
$primary: #7EA800;
.message-success {
@extend %button;
background: $primary;
color:#fff;
border-color: darken( $primary, 5 );
}
Det andra argumentet för funktionen är den nödvändiga mörkningsprocenten. Alla funktioner har parametrar; Ta en titt på dokumentationen för att se vad de är! Här är några andra färgfunktioner som är självförklarande: desaturate, saturate, invert och gråskala.
Ceil-funktionen, precis som i PHP, returnerar ett tal avrundat till nästa heltal. Detta kan användas vid beräkning av kolumnbredder eller om du inte vill använda många decimaler i den slutliga CSS.
.title {
font-size: ceil( $heading_size * 1.3314 );
}
Depuration
Felsökning är ett vanligt flöde för felsökning. I ett programmeringsspråk som PHP och JavaScript används en speciell inbyggd funktion som var_dump (PHP) eller console.log (JavaScript). Sass, i det här fallet, tillhandahåller speciella direktiv, @debug, @warn och @error, för att enkelt utföra felsökning i Sass.
Nedan är ett exempel för att dumpa ett variabelvärde med @debug.
$size: 600px;
div {
$width = $size / 960px * 100%;
@debug "The width is: #{$width}";
width: $width;
}
När du kompilerar Sass-källkoden till CSS kommer direktivet att skriva ut innehållet till konsolen eller Terminal.
style.scss:5 DEBUG: The width is: 0.625px
Vi kan använda @warn för att skicka en varning, till exempel om vissa värden inte är validerade.
$primary-color: #333;
$secondary-color: #f3f3f3;
div {
$color-bg = darken( $primary-color, 100% );
$color-text = darken( $secondary-color, 100% );
background: $color-bg;
color: $color-text;
@if $color-bg == $color-text {
@warn "Background and text color are both #{$colour}!";
}
}
På samma sätt kommer detta att dumpa innehållet till konsolen eller terminalen medan det kompileras till CSS. I exemplet ovan visade vi en varning när både bakgrunds- och textfärgerna är desamma.
Warning: Background and text color are both #000000! style.scss 6:8 root stylesheet
@error fungerar på samma sätt som @warn som används för att kasta ett innehåll om något inte är validerat, förutom att det kommer att tvinga Sass-kompilatorn att sluta kompilera källkoden.
Error: "Background and text color are both #000000!"
╷
6 │ @error "Background and text color are both #{$colour}!";
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
style.scss 6:8 root stylesheet
Allmän beskrivning
Sass-funktioner ger oss stor kraft att skriva bättre CSS med mindre ansträngning. Korrekt användning av mixins, tillägg, funktioner och variabler kommer att göra våra stilmallar lättare att underhålla, mer läsbara och lättare att skriva.
Om du är intresserad av en annan liknande CSS-förprocessor föreslår jag att du tar en titt på MINDRE (eller kolla in vår nybörjarguide) – Den underliggande principen är i stort sett densamma!
