Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Eine kleine Einführung in SASS

Eine kleine Einführung in SASS

Meine meine Slides zu „Eine kleine Einführung in SASS und eine noch Kleinere in Compass“ auf dem Treffen der Drupal Usergroup Hamburg im November 2011

Andreas Dantz

November 14, 2011
Tweet

More Decks by Andreas Dantz

Other Decks in Programming

Transcript

  1. „CSS zu kompilieren ist eine völlig bescheuerte Idee. Das braucht

    kein Mensch und wer es nutzt, schlägt auch Omas auf der Straße.“ — Andreas Dantz, 2009 Montag, 14. November 11
  2. SCSS $maincolor: #f00; $compcolor: #0ff; a { color: $maincolor; }

    a:hover, a:focus { color: $compcolor; } CSS a { color: #f00; } a:hover, a:focus { color: #0ff; } Montag, 14. November 11
  3. SCSS 4px + 4px; 4px - 4px; 4px * 2;

    4px / 2; CSS 8px; 0px; 8px; 2px; Montag, 14. November 11
  4. SCSS $defaultmargin: 20px; .box { border: 1px solid #000; margin:

    $defaultmargin / 2; padding: $defaultmargin / 2 - 1px; } CSS .box { border: 1px solid #000; margin: 10px; padding: 9px; } Montag, 14. November 11
  5. SCSS $maincolor: #f00; a { color: $maincolor; } a:hover, a:focus

    { color: lighten($maincolor, 30%); } CSS a { color: #f00; } a:hover, a:focus { color: #f99; } Montag, 14. November 11
  6. SCSS adjust-hue($color, $degrees) lighten($color, $amount) darken($color, $amount) saturate($color, $amount) desaturate($color,

    $amount) grayscale($color) complement($color) invert($color) Montag, 14. November 11
  7. SCSS .box { width: 60%; h2 { font-size: 24px; }

    } CSS .box { width: 60%; } .box h2 { font-size: 24px; } Montag, 14. November 11
  8. SCSS .box { header, footer { background-color: #000; } }

    CSS .box header, .box footer { background-color: #000 } Montag, 14. November 11
  9. SCSS a { color: #f00; text-decoration: none; &:hover { text-decoration:

    underline } } CSS a { color: #f00; text-decoration:none; } a:hover { text-decoration: underline; } Montag, 14. November 11
  10. SCSS button { background: linear-gradient(#fff, #eee }; .no-cssgradients & {

    background: #eee }; } CSS button { # code mit dem Verlauf } .no-cssgradients button { background: #eee; } Montag, 14. November 11
  11. SCSS .message { background-color: #eee; border: 1px solid #ccc; padding:

    1em; } .message p:last-child { margin-bottom: 0; } .error { @extend .message; background-color: lighten(#f00, 60%); border: 1px solid #f00; } Montag, 14. November 11
  12. CSS .message, .error { background-color: #eee; border: 1px solid #ccc;

    padding: 1em; } .message p:last-child, .error p:last-child { margin-bottom: 0; } .error { background-color: white; border: 1px solid #f00; } Montag, 14. November 11
  13. CSS #wrapper header#header .meta-nav nav ul li a span, .container

    #sidebar .region-sidebar .views-view- generic .item span { color #f00; } Montag, 14. November 11
  14. SCSS @mixin linkeffect { color: #f00; &:hover { color: darken(#f00,

    30%); } } nav a { @include linkeffect; } CSS nav a { color: #f00; } nav a:hover { color: #660000; } Montag, 14. November 11
  15. SCSS @mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius;

    } .box { @include border-radius(5px); } CSS .box { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } Montag, 14. November 11
  16. SCSS @mixin linkcolor($link:black, $hover:red) { color: $link; &:hover { color:

    $hover; } } a { @include linkcolor($hover:yellow ); } CSS a { color: black; } a:hover { color: yellow; } Montag, 14. November 11
  17. SCSS @mixin linkcolor($dark: false) { @if $dark == true {

    color: black; &:hover { color: blue; } } @else { color: white; &:hover { color: #ccc; } } } a { @include linkcolor(); } a.alt { @include linkcolor(true); } CSS a { color: white; } a:hover { color: #ccc; } a.alt { color: black; } a.alt:hover { color: blue; } Montag, 14. November 11
  18. ★ Alles, was SASS bietet ★ Noch mehr Funktionen ★

    Mixin Bibliothek ★ Projekt-Umgebung ★ Erweiterungen DAS GIBT ES FÜR’S GELD Montag, 14. November 11
  19. SCSS header { background: image-url('logo.jpg'); h1 { width: image-width('logo.jpg'); height:

    image-height('logo.jpg'); } } CSS header { background: url('/images/logo.jpg?1321202172'); } header h1 { width: 346px; height: 400px; } Montag, 14. November 11
  20. SCSS .box { @include border-radius(8px); @include background(linear-gradient(#000, #333)); } CSS

    .box { -moz-border-radius: 8px;-webkit-border-radius: 8px;-ms-border-radius: 8px; border-radius: 8px; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #000000), color-stop(100%, #333333)); background: -webkit-linear-gradient(#000000, #333333); background: -moz-linear-gradient(#000000, #333333); background: linear-gradient(#000000, #333333); } Montag, 14. November 11
  21. SCSS @import "icon/*.png"; @include all-icon-sprites($dimensions:true); CSS .icon-sprite, .icon-minus { background:

    url('/images/icon-sd557c6037f.png') no-repeat; } .icon-minus { background-position: 0 0; height: 7px; width: 24px; } Montag, 14. November 11