This is a danish "HOW TO" guide by the danish web agency morningtrain.dk. This slideshow covers the basics of learning SASS, and after reading through the slides, you should be able to start writing SASS yourself. As mentioned earlier, the slideshow is in danish, because there is already tons of english "How to SASS" guides, and the SASS documentation page is also well explained. If you have any questions or comments regarding the slideshow, don't hesitate to contact us: http://morningtrain.dk mail@morningtrain.dk Or leave a comment below.

1. How to: SASS
Af morningtrain.dk

2. Indhold
- Hvad er SASS?
- Hvorfor bruge SASS?
- Opsætning
- SCSS Syntax
- Variabler
- Nesting
- Mixins
- Extend
- Projektstrukturering med SASS

3. Hvad er SASS?
Sass er en udvidelse af CSS (Cascading Style Sheet),
som giver flere muligheder til standard CSS syntax.

4. • 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:

5. Hvorfor Bruge SASS?

6. • Genbrug kode
• Bedre kodestruktur
• Spar tid i forhold til at skrive normal CSS

7. Opsætning
http://sass-lang.com/install
Følg guiden til dit specifikke operativsystem:

8. Command Line
Nå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)

9. SCSS Syntax
Der 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.

10. SASS SYNTAX

11. SCSS SYNTAX

12. De 3 store tilføjelser i
SASS:
Variabler, Nesting, Mixins

13. Variabler
• Variabler virker ligesom i andre
programmeringssprog
• Variablerne kan indeholde alt hvad man ønsker
(eks. farvekode eller border style)

14. Eksempel på variabler i SCSS

15. Nesting
• I HTML er der en klar visuel struktur - Det er der ikke
i standard CSS.
• SASS har inkluderet nesting, hvilket fjerner dette
problem

16. God visuel HTML Struktur
God visuel SCSS Struktur

17. Media queries kan også nestes i elementerne:

18. 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.

19. Eksempel på mixin

20. Extend
• Genbrug de samme properties på tværs af
elementer

21. CSS SCSS
Eksempel på Extend

22. 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

23. Eksempel på @import

24. Opdel filerne i 3 mapper:
Pages, Partials, Plugins

25. 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

26. Eksempel på god opdeling af filer i Pages

27. 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).

28. 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

29. 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
mail@morningtrain.dk