Skriv bedre stylesheets med Sass og Compass

Sass er en forbedret versjon av CSS med mange kraftige features. Sammen med Compass, en samling av gjenbrukbare CSS-mønstre og best practices, kan man skrive stylesheets på en raskere og ryddigere måte enn før.

Transcript

1. Bedre stylesheets med Sass og Compass
2. Meg Bjørn Arild Mæland Reaktor Kyber
3. Innhold CSS Sass Compass Eksempler Bruk i praksis
4. Still spørsmål underveis!
5. CSS
6. Den stygge andungen innen webutvikling
7. CSS skalerer ikke! Vedlikehold er alt for vanskelig Ikke gjenbrukbart Fullt av repetisjon Statisk
8. Hvorfor har vi ikke tilsvarende verktøy som vi bruker til HTML?
9. Sass
10. Syntactically Awesome Style Sheets
11. Sass er en utvidelse av CSS3
12. Sass gir deg: Kraftigere syntax Bedre abstraksjoner Organisering!
13. Utvidelser av CSS3: Nøsting Variabler Arv Mixins Partials
14. Utvidelser av CSS3: Funksjoner Kondisjoner/loops Kalkulasjoner Minifisering ..og mer!
15. Compass
17. Compass er et standardbibliotek Samling av nyttige Sass mixins og funksjoner
18. Inneholder blandt annet Typografi Layout/grids CSS3-mixins Hjelpefunksjoner
19. Utvidbart Du kan lett lage dine egne plugins
20. Eksempler
21. Partials
23. Variabler
24. $body-text: #bbb; $strong-text: darken($body-text, 40%); $muted-text: lighten($body-text, 30%);
25. Nøsting
26. .annonse { float: left; span { text-transform: uppercase; color: $annonsetekst; } }
27. Mixins
28. @mixin horizontal-list($spacing: 10px) { li { float: left; margin-right: $spacing; } }
29. #header ul.nav { @include horizontal-list; float: right; } #footer ul.nav { @include horizontal-list(20px); margin-top: 1em; }
30. CSS 3
31. .rounded { @include border-radius(4px, 4px); }
32. .rounded { -webkit-border-radius: 4px 4px; -moz-border-radius: 4px / 4px; -o-border-radius: 4px / 4px; -ms-border-radius: 4px / 4px; -khtml-border-radius: 4px / 4px; border-radius: 4px / 4px; }
33. h2 { @include opacity(50); }
34. h2 { opacity: 0.5; -moz-opacity: 0.5; -khtml-opacity: 0.5; -ms-filter: DXImageTransform osv; filter: alpha(opacity=50); }
35. Grids
36. $blueprint-grid-columns: 24; $blueprint-grid-width: 30px; $blueprint-grid-margin: 10px;
39. Bruk i praksis
44. Takk for meg!