how to sass - af morningtrain.dk
TRANSCRIPT
Indhold- Hvad er SASS?- Hvorfor bruge SASS?- Opsætning- SCSS Syntax- Variabler- Nesting- Mixins- Extend- Projektstrukturering med SASS
Hvad er SASS?Sass er en udvidelse af CSS (Cascading Style
Sheet), som giver flere muligheder til standard CSS syntax.
• Fuld CSS3 Kompatibilitet
• Udvidelse til CSS syntaxen såsom: Variabler, Nestings og Mixins
• CSS Funktioner
• God formatering og ændringsvenneligt output
• Nem opdeling af filer
Sass inkluderer:
Hvorfor Bruge SASS?
• Genbrug kode• Bedre kodestruktur• Spar tid i forhold til at skrive normal
CSS
Opsætning
http://sass-lang.com/install
Følg guiden til dit specifikke operativsystem:
Command LineNår SASS er installeret, kan der bruges disse to commands:
Command 1 (Konverterer .scss til css)
Command 2 (Konverterer .scss til css og holder øje med ændringer)
SCSS SyntaxDer er to måder at skrive SASS på:
SCSS måden og SASS måden.
SCSS måden minder mest om CSS syntax af de to, og der er derfor kun et lille hop i forhold til at skifte mellem de to syntaxer. Derfor bliver SCSS beskrevet her, men det er en preference sag i praksis.
SASS SYNTAX
SCSS SYNTAX
De 3 store tilføjelser i SASS:
Variabler, Nesting, Mixins
Variabler• Variabler virker ligesom i andre
programmeringssprog
• Variablerne kan indeholde alt hvad man ønsker (eks. farvekode eller border style)
Eksempel på variabler i SCSS
Nesting
• I HTML er der en klar visuel struktur - Det er der ikke i standard CSS.
• SASS har inkluderet nesting, hvilket fjerner dette problem
God visuel HTML Struktur
God visuel SCSS Struktur
Media queries kan også nestes i elementerne:
Mixins• Giver mulighed for at genbruge kode
• En mixin fungerer ligesom en funktion - Man tilføjer en property til funktionen, der afgør outcome af funktionen.
Eksempel på mixin
Extend• Genbrug de samme properties på tværs af
elementer
CSS SCSS
Eksempel på Extend
Projektstrukturering• Med SASS kan man opdele CSS i forskellige
filer, ved at bruge @import
• Opdeling af filer er en kæmpe fordel, når kode skal vedligeholdes
• Kræver en god projektstruktur for ikke at skabe overflod i filer
Eksempel på @import
Opdel filerne i 3 mapper:Pages, Partials, Plugins
Pages
• Indeholder alle html sidernes styling
• Hvis det er et lille projekt, kan det være nok med en fælles mappe til siderne, ellers bør der oprettes mapper til samtlige sider, da der bør være én .scss fil pr. sektion på en side
Eksempel på god opdeling af filer i Pages
Partials• Her bør der være to undermapper: Assets og
Shared
• Assets bør indeholde filer såsom “colors.scss” og “mixins.scss”
• Shared bør indeholde style til elementer, som ikke tilhører en enkelt side (eks. navigation og footer).
Plugins• Indeholder alle tilføjelser til CSS’en (ofte
statiske).
• Eks. på et plugin kan være reset.css eller normalize.css
• Bør hentes ind som det første i style.scss, da andet CSS kan være afhængig af dette
Spørgsmål til SASS?
Har du spørgsmål til dette slideshow, skal du være velkommen til at kontakte morningtrain på:
http://morningtrain.dk