Session Slides vom Barcamp Stuttgart 2012 #bcs5

2. schöneres
CSS
mit
Sass & Compass

3. Sass

4. Install & Run
$ gem install sass
$ sass --watch style.sass:style.css
$ sass --watch assets/sass:public/css

5. Basic Syntax
css scss sass

6. Nesting
SASS
article
border-top: 1px dashed #eee
header
margin-bottom: 15px
header, section
color: #eee
CSS
article { border-top: 1px dashed #eeeeee; }
article header { margin-bottom: 15px; }
article header, article section { color: #eeeeee; }

7. Parent Selector
SASS
article
color: #f00
&:hover
color: #00f
.special &
h1
font-size: 2em
CSS
article { color: red; }
article:hover { color: blue; }
.special article h1 { font-size: 2em; }

8. @media
SASS
#content
margin: 0 1.5em
@media screen and (min-width: 1280px)
margin: 0 2.5em
CSS
#content { margin: 0 1.5em; }
@media screen and (min-width: 1280px) {
#content { margin: 0 2.5em; }
}

9. Variablen
SASS
$link-color: #e78a15
$link-hover: #138a1e
$link-size: 0.8em
a
color: $link-color
font-size: $link-size
&:hover
color: $link-hover
CSS
a { color: #e78a15; font-size: 0.8em; }
a:hover { color: #138a1e; }

10. Weiterverwendung mit @extend
SASS
.button
background-color: #00f
color: #fff
padding: 2em 1.5em
.button-delete
@extend .button
background-color: #f00
CSS
.button, .button-delete { background-color: blue;
color: white; padding: 2em 1.5em; }
.button-delete { background-color: red; }

11. Vorlagen mit @mixin
SASS
@mixin hover-link
text-decoration: none
&:hover
text-decoration: underline
article a
@include hover-link
.nav a
color: blue
@include hover-link CSS
article a { text-decoration: none; }
article a:hover { text-decoration: underline; }
.nav a { color: blue; text-decoration: none; }
.nav a:hover { text-decoration: underline; }

12. Funktionen mit @mixin
SASS
@mixin border-radius($amount)
border-radius: $amount
-mox-border-radius: $amount
-webkit-border-radius: $amount
.alert
@include border-radius(5px)
CSS
.alert {
border-radius: 5px;
-mox-border-radius: 5px;
-webkit-border-radius: 5px;
}

13. benannte Argumente mit @mixin
SASS
@mixin flash-message($bgcolor:red, $hovercolor:blue)
background-color: $bgcolor
&:hover
background-color: $hovercolor
.alertbox
@include flash-message($hovercolor: green)
CSS
.alertbox { background-color: red; }
.alertbox:hover { background-color: green; }

14. Import
pages/
_user.sass
screen.sass
_variables.sass
_grid.sass
_typography.sass
_phone.sass
SASS
/* screen.sass */
@import "variables"
@import "grid"
@import "grid", "typography"
@media screen and (min-width: 480px)
@import "phone"
#user
@import "pages/user"

15. etwas Mathematik
SASS
font-size: 18px - 5px
width: 200px * 3
Beispiel:
$layout-space: 10px
$sidebar-width: 250px
$page-width: 960px
#main
width: $page-width - $sidebar-width - (2 * $layout-space)
CSS
#main { width: 690px; }

16. Mathematische Funktionen
abs(-43) // => 43
floor(3.9) // => 3
ceil(3.2) // => 4
round(2.8) // => 3
percentage(13/25) // => 52%

17. Mehr ...
- Bedingungen (@if, @else, @elseif)
- Logische Operatoren (<, >, >=, <=, ==, !=)
- Verknuepfungen (and, or)
- Schleifen (@for, @while, @each)
- Farb-Inspektoren (hue, saturation, lightness, ..)
- Farb-Funktionen (invert, mix, grayscale, darken, ..)
- eigene Funktionen (@function)
...

18. Compass
@mixin & @function Sammlung

19. Installation
$ gem install compass
$ compass create my_project
$ cd my_project
$ vim config.rb
$ compass watch
oder
$ sass --compass --watch assets/sass:public/css

20. Cross Browser CSS3 Mixins
● Appearance ● Filter
● Background Clip ● Font Face
● Background Origin ● Hyphenation
● Background Size ● Images (Gradients)
● Border Radius ● Inline Block
● Box ● Opacity
● Box Shadow ● CSS Regions
● Box Sizing ● Text Shadow
● Columns ● Transform
● Transition

21. Beispiel CSS3 Mixins
SASS
@import "compass"
.flash-message
@include background(linear-gradient(#fff, #eee))
@include border-radius(5px)
CSS
.flash-message {
background: -webkit-gradient(linear, 50% 0%, 50% 100%,
color-stop(0%, #ffffff), color-stop(100%, #eeeeee));
background: -webkit-linear-gradient(#ffffff, #eeeeee);
background: -moz-linear-gradient(#ffffff, #eeeeee);
background: -o-linear-gradient(#ffffff, #eeeeee);
background: linear-gradient(#ffffff, #eeeeee); -webkit-
border-radius: 5px; -moz-border-radius: 5px; -ms-
border-radius: 5px; -o-border-radius: 5px; border-
radius: 5px;
}

22. Layout Helper
Grid Background
Grid als Seitenhintergrund mithilfe CSS3 Gradients
Sticky Footer
Footer am Seitenende
Stretching
Dimensionen eines Divs auf das Elternelement
ausweiten

23. Utilities
Reset (global, einzelne Resets (Font, body, ..)
Cross Browser Clearfix
Cross Browser Floats
has-layout Hacks
...

24. Sprites
SASS
@import "compass"
@import "social/*.png"
@include all-social-sprites
CSS
.icons-sprite, .icons-facebook, .icons-flickr, .icons-
twitter, .icons-xing { background: url('/images/icons-
s2d05e1e0af.png') no-repeat; }
.icons-facebook { background-position: 0 -48px; }
.icons-flickr { background-position: 0 -16px; }
.icons-twitter { background-position: 0 -32px; }
.icons-xing { background-position: 0 0; }

25. Informations
● Sass - sass-lang.com
● Sass Ruby on Rails Implementation
github.com/rails/sass-rails
● Compass - compass-style.org
● Noch mehr Infos
○ 35 Great Resources for Compass and Sass
○ Sass & Compass: The future of stylesheets now
○ css2sass converter

26. Personal
Stefan Bauckmeier
AKRA GmbH
http://twitter.com/emrox
http://trafex.de
https://www.xing.com/profile/Stefan_Bauckmeier