• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Eine kleine Einführung in SASS
 

Eine kleine Einführung in SASS

on

  • 1,503 views

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

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

Statistics

Views

Total Views
1,503
Views on SlideShare
1,503
Embed Views
0

Actions

Likes
2
Downloads
4
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

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

    Eine kleine Einführung in SASS Eine kleine Einführung in SASS Presentation Transcript

    • Eine kurze Einführung in SASS und eine noch Kürzere in CompassMontag, 14. November 11
    • „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, 2009Montag, 14. November 11
    • Montag, 14. November 11
    • SASS .box margin: 1em .entry-content border: 1px solid #f00Montag, 14. November 11
    • SCSS .box { margin: 1em; .entry-content { border: 1px solid #f00; } }Montag, 14. November 11
    • CSS 2.1Montag, 14. November 11
    • CSS 3Montag, 14. November 11
    • VARIABLEN & Co. CSS wird ProgrammierspracheMontag, 14. November 11
    • 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
    • SCSS 4px + 4px; 4px - 4px; 4px * 2; 4px / 2; CSS 8px; 0px; 8px; 2px;Montag, 14. November 11
    • 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
    • SCSS round(4.3); ceil(4.2); floor(4.6); abs(-12); percentage(26/50); CSS 4; 5; 4; 12; 52%;Montag, 14. November 11
    • 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
    • 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
    • NESTING Vererbung & das Klä ern auf BäumeMontag, 14. November 11
    • SCSS .box { width: 60%; h2 { font-size: 24px; } } CSS .box { width: 60%; } .box h2 { font-size: 24px; }Montag, 14. November 11
    • SCSS .box { header, footer { background-color: #000; } } CSS .box header, .box footer { background-color: #000 }Montag, 14. November 11
    • 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
    • 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
    • flickr.com/photos/sharynmorrow/Montag, 14. November 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
    • 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
    • VORSICHT!Montag, 14. November 11
    • 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
    • MIXINS Einen Gang höherMontag, 14. November 11
    • 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
    • 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
    • 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
    • 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
    • Montag, 14. November 11
    • DAS GIBT ES FÜR’S GELD ★ Alles, was SASS bietet ★ Noch mehr Funktionen ★ Mixin Bibliothek ★ Projekt-Umgebung ★ ErweiterungenMontag, 14. November 11
    • 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
    • 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
    • flickr.com/photos/runningdevineMontag, 14. November 11
    • 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
    • JA, ABER…Montag, 14. November 11
    • FRAGEN? @dantz ad@vortrieb.net vortrieb.netMontag, 14. November 11
    • BONUSMontag, 14. November 11