How to: SASS
Af morningtrain.dk
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 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)
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.
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
mail@morningtrain.dk

How To SASS - af morningtrain.dk

  • 1.
    How to: SASS Afmorningtrain.dk
  • 2.
    Indhold - Hvad erSASS? - Hvorfor bruge SASS? - Opsætning - SCSS Syntax - Variabler - Nesting - Mixins - Extend - Projektstrukturering med SASS
  • 3.
    Hvad er SASS? Sasser en udvidelse af CSS (Cascading Style Sheet), som giver flere muligheder til standard CSS syntax.
  • 4.
    • Fuld CSS3Kompatibilitet • Udvidelse til CSS syntaxen såsom: Variabler, Nestings og Mixins • CSS Funktioner • God formatering og ændringsvenneligt output • Nem opdeling af filer Sass inkluderer:
  • 5.
  • 6.
    • Genbrug kode •Bedre kodestruktur • Spar tid i forhold til at skrive normal CSS
  • 7.
  • 8.
    Command Line Når SASSer 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 erto 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.
  • 11.
  • 12.
    De 3 storetilføjelser i SASS: Variabler, Nesting, Mixins
  • 13.
    Variabler • Variabler virkerligesom i andre programmeringssprog • Variablerne kan indeholde alt hvad man ønsker (eks. farvekode eller border style)
  • 14.
  • 15.
    Nesting • I HTMLer der en klar visuel struktur - Det er der ikke i standard CSS. • SASS har inkluderet nesting, hvilket fjerner dette problem
  • 16.
    God visuel HTMLStruktur God visuel SCSS Struktur
  • 17.
    Media queries kanogså nestes i elementerne:
  • 18.
    Mixins • Giver mulighedfor at genbruge kode • En mixin fungerer ligesom en funktion - Man tilføjer en property til funktionen, der afgør outcome af funktionen.
  • 19.
  • 20.
    Extend • Genbrug desamme properties på tværs af elementer
  • 21.
  • 22.
    Projektstrukturering • Med SASSkan 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.
  • 24.
    Opdel filerne i3 mapper: Pages, Partials, Plugins
  • 25.
    Pages • Indeholder allehtml 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å godopdeling af filer i Pages
  • 27.
    Partials • Her børder 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 alletilfø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? Hardu spørgsmål til dette slideshow, skal du være velkommen til at kontakte morningtrain på: http://morningtrain.dk mail@morningtrain.dk