• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Syntactically Awesome Stylesheets mit Sass
 

Syntactically Awesome Stylesheets mit Sass

on

  • 1,668 views

 

Statistics

Views

Total Views
1,668
Views on SlideShare
1,666
Embed Views
2

Actions

Likes
1
Downloads
8
Comments
0

2 Embeds 2

http://www.linkedin.com 1
https://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Syntactically Awesome Stylesheets mit Sass Syntactically Awesome Stylesheets mit Sass Presentation Transcript

    • Erste Schritte Features Fazit und Links Syntactically Awesome Stylesheets mit Sass Martin Grandrath InsertEFFECT GmbH Webmontag Erlangen, 11. Oktober 2010 Grandrath Sass
    • Erste Schritte Installation Features Ein Stylesheet mit Sass Fazit und Links Installation Ruby Rubygems gem install haml Grandrath Sass
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • Erste Schritte Features Fazit und Links Variablen input.scss output.css $link-color: #ce4dd6; a { color: #ce4dd6; } a { color: $link-color; } Grandrath Sass
    • Erste Schritte Features Fazit und Links Variablen input.scss output.css $link-color: #ce4dd6; a { color: #ce4dd6; } a { color: $link-color; } Grandrath Sass
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • Erste Schritte Features Fazit und Links Fragen? Fragen! Grandrath Sass