Erste Schritte
                    Features
             Fazit und Links




Syntactically Awesome Stylesheets mit
       ...
Erste Schritte
                                             Installation
                                  Features
      ...
Erste Schritte
                                         Installation
                              Features
              ...
Erste Schritte
                                         Installation
                              Features
              ...
Erste Schritte
                                         Installation
                              Features
              ...
Erste Schritte
                                        Installation
                             Features
                ...
Erste Schritte
                                  Features
                           Fazit und Links

Kommentare




  inp...
Erste Schritte
                                  Features
                           Fazit und Links

Kommentare




  inp...
Erste Schritte
                                 Features
                          Fazit und Links

Variablen




  input....
Erste Schritte
                                 Features
                          Fazit und Links

Variablen




  input....
Erste Schritte
                                 Features
                          Fazit und Links

Nesting




  input.sc...
Erste Schritte
                                 Features
                          Fazit und Links

Nesting




  input.sc...
Erste Schritte
                                 Features
                          Fazit und Links

Arithmetik




  input...
Erste Schritte
                                 Features
                          Fazit und Links

Arithmetik




  input...
Erste Schritte
                               Features
                        Fazit und Links

Arithmetik mit Farben




...
Erste Schritte
                               Features
                        Fazit und Links

Arithmetik mit Farben




...
Erste Schritte
                               Features
                        Fazit und Links

Referenz auf Elternelement...
Erste Schritte
                               Features
                        Fazit und Links

Referenz auf Elternelement...
Erste Schritte
                                 Features
                          Fazit und Links

Mixins



  input.scss...
Erste Schritte
                                 Features
                          Fazit und Links

Mixins



  input.scss...
Erste Schritte
                               Features
                        Fazit und Links

Mixins mit Parametern




...
Erste Schritte
                               Features
                        Fazit und Links

Mixins mit Parametern




...
Erste Schritte
                                 Features
                          Fazit und Links

@import


  rounded.sc...
Erste Schritte
                                 Features
                          Fazit und Links

@import


  rounded.sc...
Erste Schritte
                                Features
                         Fazit und Links

@extend




  input.scss...
Erste Schritte
                                Features
                         Fazit und Links

@extend




  input.scss...
Erste Schritte
                                Features
                         Fazit und Links

Pro und Kontra


  Pro
 ...
Erste Schritte
                            Features
                     Fazit und Links

Links



        Sass
        ht...
Erste Schritte
       Features
Fazit und Links




Fragen?

  Fragen!


    Grandrath     Sass
Upcoming SlideShare
Loading in …5
×

Syntactically Awesome Stylesheets mit Sass

1,870 views

Published on

Published in: Technology, Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,870
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
11
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Syntactically Awesome Stylesheets mit Sass

  1. 1. Erste Schritte Features Fazit und Links Syntactically Awesome Stylesheets mit Sass Martin Grandrath InsertEFFECT GmbH Webmontag Erlangen, 11. Oktober 2010 Grandrath Sass
  2. 2. Erste Schritte Installation Features Ein Stylesheet mit Sass Fazit und Links Installation Ruby Rubygems gem install haml Grandrath Sass
  3. 3. Erste Schritte Installation Features Ein Stylesheet mit Sass Fazit und Links Jedes Stylesheet ist eine Sass-Datei input.scss #navbar { width: 80%; height: 23px; } $ sass input.scss:output.css output.css #navbar { width: 80%; height: 23px; } Grandrath Sass
  4. 4. Erste Schritte Installation Features Ein Stylesheet mit Sass Fazit und Links Jedes Stylesheet ist eine Sass-Datei input.scss #navbar { width: 80%; height: 23px; } $ sass input.scss:output.css output.css #navbar { width: 80%; height: 23px; } Grandrath Sass
  5. 5. Erste Schritte Installation Features Ein Stylesheet mit Sass Fazit und Links Jedes Stylesheet ist eine Sass-Datei input.scss #navbar { width: 80%; height: 23px; } $ sass input.scss:output.css output.css #navbar { width: 80%; height: 23px; } Grandrath Sass
  6. 6. Erste Schritte Installation Features Ein Stylesheet mit Sass Fazit und Links Nützliche Parameter sass -watch input.scss:output.css Aktualisiert output.css automatisch wenn sich input.scss ändert sass -style compressed input.scss:output.css Erstellt eine minimierte Version ohne Whitespace und Kommentare Grandrath Sass
  7. 7. Erste Schritte Features Fazit und Links Kommentare input.scss output.css /* A CSS comment */ /* A CSS comment */ body { color: black; } body { color: black; } // A Sass comment a { color: green; } a { color: green; } Grandrath Sass
  8. 8. Erste Schritte Features Fazit und Links Kommentare input.scss output.css /* A CSS comment */ /* A CSS comment */ body { color: black; } body { color: black; } // A Sass comment a { color: green; } a { color: green; } Grandrath Sass
  9. 9. Erste Schritte Features Fazit und Links Variablen input.scss output.css $link-color: #ce4dd6; a { color: #ce4dd6; } a { color: $link-color; } Grandrath Sass
  10. 10. Erste Schritte Features Fazit und Links Variablen input.scss output.css $link-color: #ce4dd6; a { color: #ce4dd6; } a { color: $link-color; } Grandrath Sass
  11. 11. Erste Schritte Features Fazit und Links Nesting input.scss output.css #navbar { #navbar { width: 80%; width: 80%; height: 23px; height: 23px; } #navbar ul { ul { list-style-type: none; } list-style-type: none; #navbar li { } float: left; } li { #navbar li a { float: left; font-weight: bold; } a { font-weight: bold; } } } Grandrath Sass
  12. 12. Erste Schritte Features Fazit und Links Nesting input.scss output.css #navbar { #navbar { width: 80%; width: 80%; height: 23px; height: 23px; } #navbar ul { ul { list-style-type: none; } list-style-type: none; #navbar li { } float: left; } li { #navbar li a { float: left; font-weight: bold; } a { font-weight: bold; } } } Grandrath Sass
  13. 13. Erste Schritte Features Fazit und Links Arithmetik input.scss output.css #navbar { #navbar { $width: 800px; width: 800px; } $items: 5; #navbar li { float: left; width: $width; width: 160px; } li { float: left; width: $width/$items; } } Grandrath Sass
  14. 14. Erste Schritte Features Fazit und Links Arithmetik input.scss output.css #navbar { #navbar { $width: 800px; width: 800px; } $items: 5; #navbar li { float: left; width: $width; width: 160px; } li { float: left; width: $width/$items; } } Grandrath Sass
  15. 15. Erste Schritte Features Fazit und Links Arithmetik mit Farben input.scss output.css p { p { color: #010203 + #040506; color: #050709; } } a { $links: #4e2e9e; color: #4e2e9e; } a { a:hover { color: $links; } color: #9175d7; } a:hover { color: lighten($links, 25%); } Grandrath Sass
  16. 16. Erste Schritte Features Fazit und Links Arithmetik mit Farben input.scss output.css p { p { color: #010203 + #040506; color: #050709; } } a { $links: #4e2e9e; color: #4e2e9e; } a { a:hover { color: $links; } color: #9175d7; } a:hover { color: lighten($links, 25%); } Grandrath Sass
  17. 17. Erste Schritte Features Fazit und Links Referenz auf Elternelement input.scss output.css #main { #main { color: black; color: black; } a { #main a { font-weight: bold; font-weight: bold; } &:hover { color: red; } #main a:hover { } color: red; } } Grandrath Sass
  18. 18. Erste Schritte Features Fazit und Links Referenz auf Elternelement input.scss output.css #main { #main { color: black; color: black; } a { #main a { font-weight: bold; font-weight: bold; } &:hover { color: red; } #main a:hover { } color: red; } } Grandrath Sass
  19. 19. Erste Schritte Features Fazit und Links Mixins input.scss output.css @mixin rounded { #navbar li { $r: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: $r; border-radius: 10px; } -webkit-border-radius: $r; border-radius: $r; #footer { } -moz-border-radius: 10px; -webkit-border-radius: 10px; #navbar li { border-radius: 10px; } @include rounded; } #footer { @include rounded; } Grandrath Sass
  20. 20. Erste Schritte Features Fazit und Links Mixins input.scss output.css @mixin rounded { #navbar li { $r: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: $r; border-radius: 10px; } -webkit-border-radius: $r; border-radius: $r; #footer { } -moz-border-radius: 10px; -webkit-border-radius: 10px; #navbar li { border-radius: 10px; } @include rounded; } #footer { @include rounded; } Grandrath Sass
  21. 21. Erste Schritte Features Fazit und Links Mixins mit Parametern input.scss output.css @mixin rounded($r: 10px) { #navbar li { -moz-border-radius: $r; -moz-border-radius: 5px; -webkit-border-radius: $r; -webkit-border-radius: 5px; border-radius: $r; border-radius: 5px; } } #footer { #navbar li { -moz-border-radius: 10px; @include rounded(5px); -webkit-border-radius: 10px; } border-radius: 10px; } #footer { @include rounded; } Grandrath Sass
  22. 22. Erste Schritte Features Fazit und Links Mixins mit Parametern input.scss output.css @mixin rounded($r: 10px) { #navbar li { -moz-border-radius: $r; -moz-border-radius: 5px; -webkit-border-radius: $r; -webkit-border-radius: 5px; border-radius: $r; border-radius: 5px; } } #footer { #navbar li { -moz-border-radius: 10px; @include rounded(5px); -webkit-border-radius: 10px; } border-radius: 10px; } #footer { @include rounded; } Grandrath Sass
  23. 23. Erste Schritte Features Fazit und Links @import rounded.scss output.css @mixin rounded($r: 10px) { #navbar li { -moz-border-radius: $r; -moz-border-radius: 5px; -webkit-border-radius: $r; -webkit-border-radius: 5px; border-radius: $r; } border-radius: 5px; } #footer { -moz-border-radius: 10px; input.scss -webkit-border-radius: 10px; border-radius: 10px; } @import "rounded"; #navbar li { @include rounded(5px); } #footer { @include rounded; } Grandrath Sass
  24. 24. Erste Schritte Features Fazit und Links @import rounded.scss output.css @mixin rounded($r: 10px) { #navbar li { -moz-border-radius: $r; -moz-border-radius: 5px; -webkit-border-radius: $r; -webkit-border-radius: 5px; border-radius: $r; } border-radius: 5px; } #footer { -moz-border-radius: 10px; input.scss -webkit-border-radius: 10px; border-radius: 10px; } @import "rounded"; #navbar li { @include rounded(5px); } #footer { @include rounded; } Grandrath Sass
  25. 25. Erste Schritte Features Fazit und Links @extend input.scss output.css .error { .error, .seriousError { border: 1px #f00; border: 1px #f00; background-color: #fdd; background-color: #fdd; } } .seriousError { .seriousError { border-width: 3px; } @extend .error; border-width: 3px; } Grandrath Sass
  26. 26. Erste Schritte Features Fazit und Links @extend input.scss output.css .error { .error, .seriousError { border: 1px #f00; border: 1px #f00; background-color: #fdd; background-color: #fdd; } } .seriousError { .seriousError { border-width: 3px; } @extend .error; border-width: 3px; } Grandrath Sass
  27. 27. Erste Schritte Features Fazit und Links Pro und Kontra Pro Vieles, was man bisher bei CSS vermisst hat (z. B. Variablen) Flache Lernkurve durch CSS-Syntax Code wird besser wartbar (z. B. Nesting, Mixins) Stylesheets können zur Entwicklung auf mehrere Dateien verteilt und in der Produktion in einer einzelnen Datei ausgeliefert werden (@import) Kontra Deployment-Prozess wird komplexer Stylesheets können größer als erwartet werden Grandrath Sass
  28. 28. Erste Schritte Features Fazit und Links Links Sass http://sass-lang.com/ Haml http://haml-lang.com/ Ruby http://www.ruby-lang.org/ RubyGems http://rubygems.org/ Ruby für Windows http://rubyinstaller.org/ Grandrath Sass
  29. 29. Erste Schritte Features Fazit und Links Fragen? Fragen! Grandrath Sass

×