Codepen, Sass og Emmet …Et supplement til responsive web design serien
Jeg er netop blevet færdig med optagelserne til serien om responsive web design her på NemProgrammering.dk. Du vil se at jeg bruger et par værktøjer som du ikke nødvendigvis er vant til at bruge eller har til rådighed i din normale editor. Måske synes du det gik lidt stærkt og måske savner du en lidt mere blid introduktion til nogle af de værktøjer jeg bruger. Look no further!
Codepen
Codepen er en slags “online sandkasse”, hvor du hurtigt og nemt kan komme igang med at kode og se resultaterne af dine ændringer med det samme. Der findes en bunke tilsvarende alternativer (liveweave, jsbin, jsfiddle etc.), men min umiddelbare favorit er Codepen.
Intentionen er nemt at give dig et miljø der fungerer 100% som det jeg arbejder på i videoerne. Samtidig har jeg sørget for at lave individuelle “pens” for hver øvelse, så du ikke nødvendigvis behøver at lave dem i rækkefølge og du sagtens kan fortsætte med den næste øvelse selvom du sidder fast.
Hvis du laver en account på Codepen kan du “forke” altså tage en kopi af det state koden er i og lægge det over på din egen profil hvorfra det kun er din fantasi der sætter grænser for hvad du kan gøre med min kode.
Der er et par småting der er vigtige at vide når du bruger Codepen:
<body>
Når du koder på Codepen skal du ikke lave et body-tag. Det sørger Codepen for på dine vegne. Hvis du skal tilføje metatags eller klasser på html-elementet skal du trykke på tandhjulet i HTML-editoren:
Javascript
Du havde selvfølgelig alligevel ikke tænkt dig at inkludere javascript i dit head-tag, vel? I regel bør man inkludere sine tags i bunden af body, men igen skilder Codepen sig lidt ud. Javascript libraries tilføjer du under options for din JS editor:
Bemærk at der er mulighed for at bruge jQuery, Mootools, DoJo og andre populære libraries blot ved at vælge fra en dropdown.
Emmet
Emmet – tidligere kendt under navnet Zen Coding – er blot en hurtig måde at ekspandere tekst. Du kan lynhurtigt generere komplicerede HTML-strukturer ved at skrive en enkelt linie kode og derefter trykke tab. Lad mig demonstrere det for dig:
Prøv at starte med at skriv ‘div’ og derefter trykke tab. Det resulterer i:
<div></div>
Prøv så at skrive:
div.klassenavn [tab] => <div class=”klassenavn”></div>
Du behøver faktisk slet ikke at skrive div. Emmet antager at det er en div hvis blot du skriver ‘.klassenavn’.
Prøv nu at lave to tags i samme niveau med ‘+’ operatoren. Skriv ‘.klassenavn+input#navn’:
.klassenavn+input#navn [tab] => <div class=”klassenavn”></div> <input id=”navn”></input>
Det kommer måske ikke som en overraskelse, men ‘#’ bruger du til at lave id’er.
Prøv nu at neste to tags inden i hinanden med ‘>’:
.ydre-klasse > .indre-klasse [tab] => <div class=”ydre-klasse”> <div class=”indre-klasse”></div> </div>
Du kan bruge ‘^’ til at “steppe op” når du har bevæget dig ind i et nested tag:
.ydre-klasse>.indre-klasse^.ny-ydre-klasse [tab] <div class=”ydre-klasse”> <div class=”indre-klasse”></div> </div> <div class=”ny-ydre-klasse”></div>
Du kan bruge [ ] og { } til hhv. at definere attributter og komme indhold i dine tags:
h2{Send now}+input[type=”submit”] [tab]
=>
<h2>Send now</h2>
<input type=”submit”></input>
Sass
Sass står for Syntactically Awesome Style Sheets og er et sprog der køres igennem en fortolker der kompilerer det til CSS. Med menneskesprog betyder det at Sass er et programmeringsprog til stylesheets, som gør CSS mere “smart”.
Sass er vitterligt “awesome” at arbejde med og Codepen gør det ekstremt nemt at gå til. Du skal bare slå det til under settings for CSS:
Bemærk desuden muligheden for at få Codepen til automatisk at tilføje browser prefixes!
Nu har vi fået Sass slået til, men hvad er det der gør det så awesome? Det skal jeg fortælle dig:
Nemt at komme igang!
Hvis du allerede kan CSS er Sass ekstremt nemt at komme igang med. Du kan faktisk bare starte med at nøjes med at omdøbe alle dine CSS-filer til .Scss og køre dem igennem en sass-compiler (hvis altså du arbejder lokalt, hvis du arbejder på Codepen skal du jo bare trykke på den grønne knap!).
Fidusen er nemlig at valid CSS syntaks også er valid Sass (.scss syntaks).
Det betyder at du kan tage din eksisterende CSS kodebase og gradvis udsmykke den i takt med du bliver ninja til Sass.
Bemærk at der både findes .scss-syntaks og .sass syntakts. Selvom det er sass jeg omtaler, er det .scss-syntaksen jeg henviser til. Forskellen mellem de to er, at .sass-syntaksen i princippet fungerer på samme måde som .scss-syntaksen, men er strippet for brackets { } og semikolen ; inspireret af specielt Ruby. Hvis du arbejder med Ruby vil jeg varmt anbefale at anvende både .sass og Coffeescript som er er tilsvarende compileret udgave af javascript som minder mere om Ruby-syntaks. Det er ganske befriende ikke mentalt at skulle “skifte kontekst” når man arbejder med forskellige sprog.
Bemærk at du altid kan se den CSS din Sass kompilerer til ved trykke preview på Codepen. Jeg anbefaler ofte at tjekke det kompilerede output for at være sikker på at det svarer til hvad du forventer:
Sass Variable
En af de første ting Sass-nybegyndere plejer at lære er variable. Nu kan du gemme en variabel og genbruge dens værdi forskellige steder i din kode og dermed nøjes med at rette ét sted når du laver ændringer! Dette vil komme som en fantastisk nyhed for alle Jer der normalt har en lille gul post-it med hex farvekoder liggende ved siden af dig når du arbejder. Så hvis du i Sass skriver:
$deep-red: #7f0505;
$dark-grey: #666666;
$dirty-white: #eff4e0;
.element {
background-color: $deep-red;
color: $dirty-white;
border: 2px solid $dark-grey;
}
Bliver det til følgende i CSS
.element {
background-color: #7f0505;
color: #eff4e0;
border: 2px solid #666666;
}
Ok, lige i dette eksempel er Sass eksemplet faktisk længere end den kompilerede kode, men forestil dig nu at du genbruger de samme farver 30-40 gange bare på en enkelt side …jeg tror du ser hvor jeg vil hen?
Nesting i Sass
Stylesheets er berygtede for altid at være rodede og den kan være rigtig vanskeligt at gennemskue strukturen – specielt hvis det er andre der har skrevet koden. Nesting gør at du kan skrive CSS-regler inden i hinanden lidt ligesom HTML-elementer er nestede indeni hinanden og kan dermed gøre det nemmere at gennemskue strukturen i din CSS. Som eksempel, tag følgende
Sass:
section.content {
.some-box {
padding: 2em;
}
.another-box {
margin-top: 1em;
}
}
Som i CSS bliver til:
section.content .some-box {
padding: 2em;
}
section.content .another-box {
margin-top: 1em;
}
Man kan bruge ampersand (&) som placeholder for det element man nester indeni. Det er specielt praktisk når man bruger CSS-klasser til at lave forskellige states.
Sass:
.box {
background: red;
&amp;:hover {
background: green;
}
&amp;.active {
border: 2px solid black;
}
}
Kompileret CSS:
.box {
background: red;
}
.box:hover {
background: green;
}
box.active {
border: 2px solid black;
}
Nesting er dog også en af de mest misbrugte funktioner i Sass. Det kan nemlig være fristende at “replikere” strukturen fra sin HTML i Sass, som i dette eksempel:
body {
div.container {
div.content {
div.articles {
&amp; &gt; div.post {
div.title {
h1 {
a {
}
}
}
div.content {
p { ... }
ul {
li { ... }
}
}
div.author {
a.display {
img { ... }
}
h4 {
a { ... }
}
p {
a { ... }
}
ul {
li { ... }
}
}
}
}
}
}
}
Eksemplet ovenfor er stjålet fra Mario Ricaldes blog post og kompileret til CSS resulterer det i kode der umulig at vedligeholde:
body { ... }
body div.content div.container { ... }
body div.content div.container div.articles { ... }
body div.content div.container div.articles &gt; div.post { ... }
body div.content div.container div.articles &gt; div.post div.title { ... }
body div.content div.container div.articles &gt; div.post div.title h1 { ... }
body div.content div.container div.articles &gt; div.post div.title h1 a { ... }
body div.content div.container div.articles &gt; div.post div.content { ... }
body div.content div.container div.articles &gt; div.post div.content p { ... }
body div.content div.container div.articles &gt; div.post div.content ul { ... }
body div.content div.container div.articles &gt; div.post div.content ul li { ... }
body div.content div.container div.articles &gt; div.post div.author { ... }
body div.content div.container div.articles &gt; div.post div.author a.display { ... }
body div.content div.container div.articles &gt; div.post div.author a.display img { ... }
body div.content div.container div.articles &gt; div.post div.author h4 { ... }
body div.content div.container div.articles &gt; div.post div.author h4 a { ... }
body div.content div.container div.articles &gt; div.post div.author p { ... }
body div.content div.container div.articles &gt; div.post div.author p a { ... }
body div.content div.container div.articles &gt; div.post div.author ul { ... }
body div.content div.container div.articles &gt; div.post div.author ul li { ... }
Det bliver en slags våbenkapløb hvor man er nødt til at skrive endnu længere selectors for at override ovenstående regler og de bliver umulige at genbruge på tværs af sitet. Don’t go there!
Loops
Sass introducerer loops (for, while, do) og control statements (if else) til CSS! Hvis du er vant til at arbejde programmeringssprog som PHP og Javacscript er dette en dealbreaker!
Hvis du allerede har fulgt mit kursus i responsive web design vil du nok kunne huske at jeg anvender loops til at en af de mest oplagte ting i CSS: at bygge et grid. Lad os bryde eksemplet fra videoen op:
@for $i from 1 through 3 {
.element { display: block; }
}
Variablen $i er en iterator som tæller opefter, baseret på værdierne før og efter through. I CSS vil ovenstående blot printe det samme element 3 gange:
.element { display: block; }
.element { display: block; }
.element { display: block; }
..ikke specielt brugbart, men hvad nu hvis vi kunne spytte forskellige elementer ud? Man kan bruge #{navn} for at printe en variabel kaldet “navn”:
@for $i from 1 through 3 {
.element-#{$i} { display: block; }
}
Pludselig en del mere anvendeligt:
.element-1 { display: block; }
.element-2 { display: block; }
.element-3 { display: block; }
Lad mig nu forklare koden jeg anvender i videoen med udgangspunkt i ovenstående:
$columns: 12;
@for $i from 1 through $columns {
.col-#{$i} {
width: percentage(1/$columns * $i);
}
}
Først sætter vi variablen $columns til 12, da vi ønsker 12 kolonner, men gerne vil gøre det nemt at ændre i fremtiden. Antallet af kolonner bestemmer hvor mange gange loopet skal køre. For hver gang loopet kører tæller iteratoren, $i, op med én. Det udnytter vi til at producere klasse-navnene: .col-1 .col-2 .col-3 … .col-12
Vi ønsker at værdien for width skal stige trinvis fra 0 til 1. Størrelsen af intervallerne bestemmes af antallet af kolonner. I dette tilfælde ønsker vi derfor at intervallerne stiger således 1/12, 2/12, 3/12 … 12/12. Det klarer vi med en sipel matematisk formel:
1 / $columns * $i
Det producerer decimaltallene 0.08333, 0.16666, 0.25 … 1, men da vi ikke kan bruge decimaltal uden en enhed bagved til at definere relative størrelser på elementer i CSS bruger vi den inbyggede percentage(…) funktion i Sass til at omregne til procent. Således når vi frem til koden jeg anvender i videoen:
$columns: 12;
@for $i from 1 through $columns {
.col-#{$i} {
width: percentage(1/$columns * $i);
}
}
Som kompileret til CSS giver:
.col-1 { width: 8.3333%; }
.col-2 { width: 16.6666%; }
.col-3 { width: 25%; }
[...]
.col-12 { width: 100%; }
Som nævnt tidligere kan du også lave control statements, samt mixins som er en slags funktioner, som du kender dem fra andre programmeringssprog. Jeg anvender hverken control statements eller mixins i kurset, så jeg vil ikke gå i detaljer med det, men du kan læse mere om control statements og loops her og om mixins her.
Hvad hvis jeg ikke vil bruge Codepen?
Du kan selvfølgelig ikke basere alt din webudvikling på Codepen. Selvfølgelig vil du få behov for at arbejde i et IDE eller en kode-editor som Notepad++ eller Sublimetext. Hvad gør du så med Sass og Emmet?
Emmet i din lokale editor
Emmet kommer som standard med nyere versioner af f.eks. PhpStorm, men kan fås som plugin til en række forskellige editors. Hvis du bruger SublimeText vil jeg anbefale at installere pakke-manager og søge efter Emmet derigennem. Ellers kan du tjekke emmet.io for yderligere hjælp.
Kør din egen Sass-kompiler
Den mest almindelige måde at arbejde med Sass er et installere enten Grunt.js eller Gulp.js, som begge er task-runners, som ligger i baggrunden og holder øje med hver gang du gemmer en fil i den mappe du koder i. Funktionaliteten i Grunt og Gulp er næsten ens – så jeg vil her tage udgangspunkt i Grunt, men du skal være velkommen til at prøve Gulp i stedet.
Når en fil er gemt vil Grunt tage den og køre den igennem en kompiler og generere din CSS ud fra en .scss-fil. Grunt er super fleksibelt og kan en masse andre ting end blot at kompile CSS. Den kan også “linte” Sass – eller med andre ord udføre en slags stavekontrol der ud over at tjekke at din kode kan kompilere også holder dig i ørerne så du altid arbejder efter en aftalt kodestandard. Du kan også bruge Grunt til at komprimere kode og billeder inden det bliver lagt op på en produktions-server og du kan endda lave en task der tager svg-billeder og laver dem til en ikon-font.
Både Grunt og Gulp er imidlertid værktøjer der beror på at du kan begå dig i kommandolinien på din computer og lave alle konfigurations-ændringer i tekstfiler. Det er ikke så svært som det ser ud, men hvis du alligevel synes det virker lidt skræmmende, så kan jeg anbefale dig at prøve CodeKit (desværre kun til Mac OS X), som klarer arbejdet for dig med et pænt grafisk brugerinterface og nogle fornuftige default-indstillinger. For at lære at opsætte Grunt kan jeg anbefale denne blogpost.
