Moderne CSS med SASS

Sprog: Tysk

Moderne CSS med Sass - Praksisvejledning

Du har altid været irriteret over, at der ikke er variabler og løkker i CSS? Slut med det! CSS-preprocessorer som Sass tilbyder netop sådanne ting. Så kan CSS-kode endelig genereres effektivt. Ud over Sass vil dette tutorial selvfølgelig også se på det populære Compass-rammeværktøj, som tager brugen af Sass til endnu et niveau. Lær om de muligheder, som Sass og Compass har at tilbyde, på tre timer.

Bliv en Sass-mester med denne tre timer lange video-træning og webudvikleren Daniel Koch.
Definér variabler, opret dine egne mixins, eksperimentér med farver og tal og afslut med at bruge Compass.
Lær at producere CSS effektivt og anvend din nye viden på fremtidige projekter

Skridt for skridt mod professionel CSS-udvikling. Hvis CSS, så moderne og med Sass - Daniel Koch viser dig hvordan!

detaljer

Kan bruges med:
Indhold: 3 h Video-træning
Licens: privat og kommerciel Brugsrettigheder

Kategorier

Webdesign, CMS & udvikling

Skabt med kærlighed fra:

Daniel Koch

Moderne CSS med Sass.

Gratis

Moderne CSS med Sass - 01 En introduktion

Med takket være CSS-præprocessorer kan CSS skrives langt mere effektivt. Hvad disse præprocessorer er, hvilke der findes, og hvorfor valget faldt på Sass i denne sammenhæng, viser denne video.

Moderne CSS med Sass - 02 Installationen

Før Sass kan bruges, skal det installeres. Og forudsætningen for dette er Ruby. Begge dele – installationen af Ruby og Sass – bliver vist i denne video. Derefter kan I straks teste, om Sass-installationen rent faktisk lykkedes.

Moderne CSS med Sass - 03 Kyndig kompilering.

Moderne CSS med Sass - 03 Talentfuld kompilering

Sass skal konverteres til CSS-filer for at de rent faktisk kan bruges. Takket være Watch-kommandoen kan I nemt registrere ændringer i enkelte filer eller i hele mapper.

Moderne CSS med Sass - 04 Fil sammenføje

Ved hjælp af @import kan SCSS-filer importeres og sammenflettes. Hvad alt dette har at gøre med et understreget tegn foran filnavnet, er et aspekt af denne video.

Moderne CSS med Sass - 05 Deklarere og bruge variabler.

Moderne CSS med Sass - 05 Deklarér og brug variabler.

I Sass er der mulighed for at erklære variabler. Dette koncept er - som bekendt - ikke tilgængeligt i almindelig CSS, men det er et genialt værktøj til effektiv udvikling af stylesheets i Sass.

Moderne CSS med Sass - 06 Det nesting princip

Moderne CSS med Sass - 06 Den indlejrede princippet

Takket være nesting kan Sass-syntaksen holdes meget slankere end det er sædvanligt i CSS. Skovlen hjælper dig også med at skrive kode langt mere overskueligt.

Modernt CSS med Sass - 07 Elegant nedarvning med Extend

Moderne CSS med Sass - 07 Dygtig nedarvning med Extend

Brugen af @extend giver dig mulighed for at overføre en sæt CSS-egenskaber fra en til en anden selector. Det hjælper også med at holde Sass-filer slanke.

Moderne CSS med Sass - 08 moduler med placeholder-selectorer

Modernt CSS med Sass - 08 moduler med placeholder-selektorer.

Placering selector giver mulighed for definition af moduler. Denne modularisering tillader opdeling af Sass-syntaks i logiske blokke, som kan inkluderes på forskellige steder.

Moderne CSS med Sass - 09 definer mixins.

Moderne CSS med Sass - 09 definerer mixins

Mixin er funktioner, der for eksempel gør arbejdsgange meget lettere. I denne video vises det, hvordan I kan definere jeres egne mixins og til sidst anvende dem.

Moderne CSS med Sass - 10 Forældrelementsselektoren

Moderne CSS med Sass - 10 Ophavsselektor

Med selektoren, der bliver diskuteret i denne video, kan I få adgang til et elements forældreelement. Denne selektor findes som bekendt ikke i CSS og tilføjer derfor en enorm værdi.

Modernt CSS med Sass – 11 Automatisering med For-løkker.

Moderne CSS med Sass - 11 Automatisering med For-løkker

Sass muliggør brugen af for-løkker. Dette fungerer meget let i Sass og kan f.eks. anvendes til at definere et eget grid-system.

Moderne CSS med Sass - 12 Each- og While-løkker.

Modernt CSS med Sass - 12 Each- og While-løkker

Ud over For- kan der i Sass også anvendes Each- og While-løkker. Hvordan dette kan bruges til automatisering vises i denne video.

Moderne CSS med Sass - 13 beslutninger med if og else.

I sprog som PHP og JavaScript er der mulighed for at reagere på forskellige begivenheder ved hjælp af if og else. Det er faktisk også muligt i Sass. Hvordan dette kan bruges, vises i denne video.

Moderne CSS med Sass - 14 Matematiske operatorer.

Moderne CSS med Sass - 14 matematiske operatører

I kan regne i Sass. Dette er for eksempel praktisk med hensyn til definitionen af skriftstørrelser. Med de tilsvarende operatorer kan man også opbygge sit helt eget grid-system.

Moderne CSS med Sass - 15 farvespil

Selvfølgelig kan farver defineres i Sass. Sass går dog også langt ud over almindelig CSS på dette område. Takket være de tilsvarende funktioner kan farver for eksempel manipuleres meget let.

Moderne CSS med Sass - 16 Compass.

Compass-rammefterjet udvider mulighederne med Sass med mange flere muligheder. Denne første video viser, hvordan I kan installere og bruge Compass.

Moderne CSS med Sass - 17 Compass og CSS3

Compass' projektwebsted er det centrale informationsmiddel, når det kommer til at arbejde med dette framework. Jeg vil vise jer, hvordan I kan arbejde med Dokumentationen ved hjælp af Compass' CSS3-funktioner.

Moderne CSS med Sass - 18 Compass i Bullet-aktion og et kig på Susy

Et eksempel viser, hvor let det er at implementere ting med Compass. I slutningen af denne serie vil der også blive kastet et blik på et alternativt Sass-rammeverk. Susy tilbyder et slankt grid-system.

Oplysninger om indhold

CSS på en effektiv måde - med Sass: start med praksisvejledningen
Sass har revolutioneret CSS-udviklingen, fordi det endelig er muligt at skrive CSS-kode effektivt. På kun tre timer med 18 lektioner lærer du alt, hvad du har brug for at vide om Sass og Sass-frameworket Compass.

Installation af Sass-udviklingsmiljøet

Før du begiver dig ud på Sass-rejsen i CSS-vejledningen, er det tid til installationen. Men frygt ikke - det er meget simpelt. Ruby og nogle kommandolinjekommandoer er alt hvad der skal til, og så er du stolt ejer af et Sass-udviklingsmiljø. Hvis du hidtil har været nervøs ved tanken om at installere Sass, vil du blive guidet trin for trin gennem installationsprocessen her. En første test vil vise, hvilken Sass-version der er installeret.

Første skridt med en typisk projektstruktur

Derefter følger de første skridt: Lad os komme i gang med Sass! Efter en første kig på syntaksen vil du blive præsenteret for grundlæggende sprogstrukturer. Du vil lære om variabler, se en typisk projektstruktur og blive hurtigt fortrolig med Sass.

Udvikling: Løkker og betingelser

Nu hvor du er forberedt, kan den professionelle udvikling starte: Det der gør Sass så speciel er de ting, der næsten minder om ægte scriptsprog som JavaScript. For også i Sass kan du definere løkker og bruge betingelser. Disse ting er grundlaget for kongedisciplinen i Sass - definitionen af mixins. Disse er kraftfulde funktioner, der gør dit arbejde med Sass, og dermed også med CSS, væsentligt lettere.

Compass: Forenkler arbejdet med CSS

Til sidst i dette træningsforløb kommer Compass. Dette løfter Sass-udviklingen til et helt nyt niveau, da dette Sass-framework tilbyder utallige værktøjer og funktioner, der markant letter arbejdet med CSS.

Dette lærer du i CSS- og Sassvejledningen

Du lærer trin for trin Sass-funktionerne at kende, lige fra begyndelsen over professionelle værktøjer til arbejdet med Compass. På den måde får du information om, hvad der i øjeblikket er muligt, og du kan omsætte din viden direkte. At skrive CSS har aldrig været så effektivt!