Frontend-Entwicklung mit SASS & Compass

download Frontend-Entwicklung mit SASS & Compass

of 47

  • date post

    06-May-2015
  • Category

    Technology

  • view

    1.041
  • download

    0

Embed Size (px)

description

Die Slides zu meiner Session auf dem Drupalcamp Essen 2012 zur Frontendentwicklung mit SASS und Compass.

Transcript of Frontend-Entwicklung mit SASS & Compass

  • 1.SASSMontag, 27. Februar 12 &Compass

2. Andreas Dantz Designer & Frontend-Entwickler bei Vortrieb in Bremen. @dantz moin@dantz.me vortrieb.netMontag, 27. Februar 12 3. CSS zu kompilieren ist einebescheuerte Idee. Das ist vlligunntig, produziert keinen gutenCode und wer es nutzt, schlgt auchOmas auf der Strae.Andreas DantzMontag, 27. Februar 12 4. Montag, 27. Februar 12 5. CSS .box { margin: 1em; } .box .content { border: 1px solid #f00; }Montag, 27. Februar 12 6. SASS .box margin: 1em .contentborder: 1px solid #f00Montag, 27. Februar 12 7. SCSS .box { margin: 1em .content { border: 1px solid #f00 } }Montag, 27. Februar 12 8. CSS 2.1Montag, 27. Februar 12 9. CSS 3Montag, 27. Februar 12 10. Variablen & Co. CSS wird ProgrammierspracheMontag, 27. Februar 12 11. SCSS $main-color: #f00; $comp-color: #0ff; a { color: $main-color; } a:hover, a:focus { color: $comp-color; } a { color: #f00; } a:hover, CSS a:focus { color: #0ff; }Montag, 27. Februar 12 12. SCSS 4px + 4px; 4px - 4px; 4px * 2; 4px / 2; 8px; 0px;CSS 8px; 2px;Montag, 27. Februar 12 13. $baseline: 16px;SCSS $border-width: 1px; .box { border: $border-width solid #000; margin: $baseline / 2; padding: $baseline / 2 - $border-width; } .box { border: 1px solid #000; CSS margin: 8px; padding: 7px; }Montag, 27. Februar 12 14. round(4.3);SCSS ceil(4.2); floor(4.6); abs(-12); percentage(26/50); 4; 5;CSS 4; 12; 52%;Montag, 27. Februar 12 15. $maincolor: #f00; SCSS a { color: $maincolor; } a:hover, a:focus { color: lighten($maincolor, 30%); } a { color: #f00; } a:hover,CSS a:focus { color: #f99; }Montag, 27. Februar 12 16. SCSS adjust-hue($color, $degrees) lighten($color, $amount) darken($color, $amount) saturate($color, $amount) desaturate($color, $amount) grayscale($color) complement($color) invert($color)Montag, 27. Februar 12 17. Nesting Erbschaften und das spielen in BumenMontag, 27. Februar 12 18. .box { SCSS width: 60%; h2 { font-size: 24px; } } .box { width: 60%;CSS } .box h2 { font-size: 24px; }Montag, 27. Februar 12 19. article {SCSS header, footer { background-color: #000; } } article header, article footer { background-color: #000CSS }Montag, 27. Februar 12 20. a {SCSS color: #f00; text-decoration: none; &:hover { text-decoration: underline } } a { color: #f00;CSS text-decoration: none; } a:hover { text-decoration: underline; }Montag, 27. Februar 12 21. SCSS button { background: linear-gradient(#fff, #eee }; .no-cssgradients & { background: #eee }; } button { # code mit dem Verlauf CSS } .no-cssgradients button { background: #eee; }Montag, 27. Februar 12 22. flickr.com/photos/sharynmorrow/Montag, 27. Februar 12 23. 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, 27. Februar 12 24. 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, 27. Februar 12 25. Vorsicht!Montag, 27. Februar 12 26. SCSS #page-wrapper #page #main-wrapper #main #content, #page-wrapper #main .column#content .content #node-2.node, .section .region #block-system-main.block .content #node-2.node { font-weight: bold; h2.active, h2, .visuallyhidden { color: #fff; a, .button { &:link, &:visited { background-color: #f00 } &:hover, &focus { #background-color: #f0f; } } } }Montag, 27. Februar 12 27. CSS #page-wrapper #page #main-wrapper #main #content, #page-wrapper #main .column#content .content #node-2.node, .section .region #block-system-main.block .content #node-2.node { font-weight: bold; } #page-wrapper #page #main-wrapper #main #content h2.active, #page-wrapper #page #main-wrapper #main #content h2, #page-wrapper #page #main-wrapper #main #content .visuallyhidden, #page-wrapper #main .column#content .content #node-2.node h2.active, #page-wrapper #main .column#content .content #node-2.node h2, #page-wrapper #main .column#content .content #node-2.node .visuallyhidden, .section .region #block-system-main.block .content #node-2.node h2.active, .section .region #block-system-main.block .content #node-2.node h2, .section .region #block-system-main.block .content #node-2.node .visuallyhidden { color: #fff; } #page-wrapper #page #main-wrapper #main #content h2.active a:link, #page-wrapper #page #main-wrapper #main #content h2.active a:visited, #page-wrapper #page #main-wrapper #main #content h2.active .button:link, #page-wrapper #page #main-wrapper #main #content h2.active .button:visited, #page-wrapper #page #main-wrapper #main #content h2 a:link, #page-wrapper #page #main-wrapper #main #content h2 a:visited, #page-wrapper #page #main-wrapper #main #content h2 .button:link, #page-wrapper #page #main-wrapper #main #content h2 .button:visited, #page-wrapper #page #main-wrapper #main #content .visuallyhidden a:link, #page-wrapper #page #main-wrapper #main #content .visuallyhidden a:visited, #page-wrapper #page #main-wrapper #main #content .visuallyhidden .button:link, #page-wrapper #page #main-wrapper #main #content .visuallyhidden .button:visited, #page-wrapper #main .column#content .content #node-2.node h2.active a:link, #page-wrapper #main .column#content .content #node-2.node h2.active a:visited, #page-wrapper #main .column#content .content #node-2.node h2.active .button:link, #page-wrapper #main .column#content .content #node-2.node h2.active .button:visited, #page-wrapper #main .column#content .content #node-2.node h2 a:link, #page-wrapper #main .column#content .content #node-2.node h2 a:visited, #page-wrapper #main .column#content .content #node-2.node h2 .button:link, #page-wrapper #main .column#content .content #node-2.node h2 .button:visited, #page-wrapper #main .column#content .content #node-2.node .visuallyhidden a:link, #page-wrapper #main .column#content .content #node-2.node .visuallyhidden a:visited, #page-wrapper #main .column#content .content #node-2.node .visuallyhidden .button:link, #page-wrapper #main .column#content .content #node-2.node .visuallyhidden .button:visited, .section .region #block-system-main.block .content #node-2.node h2.active a:link, .section .region #block-system-main.block .content #node-2.node h2.active a:visited, .section .region #block-system-main.block .content #node-2.node h2.active .button:link, .section .region #block-system-main.block .content #node-2.node h2.active .button:visited, .section .region #block-system-main.block .content #node-2.node h2 a:link, .section .region #block-system-main.block .content #node-2.node h2 a:visited, .section .region #block-system-main.block .content #node-2.node h2 .button:link, .section .region #block-system-main.block .content #node-2.node h2 .button:visited, .section .region #block-system-main.block .content #node-2.node .visuallyhidden a:link, .section .region #block-system-main.block .content #node-2.node .visuallyhidden a:visited, .section .region #block-system-main.block .content #node-2.node .visuallyhidden .button:link, .section .region #block-system-main.block .content #node-2.node .visuallyhidden .button:visited { background-color: red; } #page-wrapper #page #main-wrapper #main #content h2.active a:hover, #page-wrapper #page #main-wrapper #main #content h2.active a focus, #page-wrapper #page #main-wrapper #main #content h2.active .button:hover, #page-wrapper #page #main-wrapper #main #content h2.active .button focus, #page-wrapper #page #main-wrapper #main #content h2 a:hover, #page-wrapper #page #main-wrapper #main #content h2 a focus, #page-wrapper #page #main-wrapper #main #content h2 .button:hover, #page-wrapper #page #main-wrapper #main #content h2 .button focus, #page-wrapper #page #main-wrapper #main #content .visuallyhidden a:hover, #page-wrapper #page #main-wrapper #main #content .visuallyhidden a focus, #page-wrapper #page #main-wrapper #main #content .visuallyhidden .button:hover, #page-wrapper #page #main-wrapper #main #content .visuallyhidden .button focus, #page-wrapper #main .column#content .content #node-2.node h2.active a:hover, #page-wrapper #main .column#content .content #node-2.node h2.active a focus, #page-wrapper #main .column#content .content #node-2.node h2.active .button:hover, #page-wrapper #main .column#content .content #node-2.node h2.active .button focus, #page-wrapper #main .column#content .content #node-2.node h2 a:hover, #page-wrapper #main .column#content .content #node-2.node h2 a focus, #page-wrapper #main .column#content .content #node-2.node h2 .button:hover, #page-wrapper #main .column#content .content #node-2.node h2 .button focus, #page-wrapper #main .column#content .content #node-2.node .visuallyhidden a:hover, #page-wrapper #main .column#content .content #node-2.node .visuallyhidden a focus, #page-wrapper #main .column#content .content #node-2.node .visuallyhidden .button:hover, #page-wrapper #main .column#content .content #node-2.node .visuallyhidden .button focus, .section .region #block-system-main.block .content #node-2.node h2.active a:hover, .section .region #block-system-main.block .content #node-2.node h2.active a focus, .section .region #block-system-main.block .content #node-2.node h2.active .button:hover, .section .region #block-system-main.block .content #node-2.node h2.active .button focus, .section .region #block-system-main.block .content #node-2.node h2 a:hover, .section .region #block-system-main.block .content #node-2.node h2 a focus, .section .region #block-system-main.block .content #node-2.node h2 .button:hover, .section .region #block-system-main.block .content #node-2.node h2 .button focus, .section .region #block-system-main.block .content #node-2.node .visuallyhidden a:hover, .section .region #block-system-main.block .content #node-2.node .visuallyhidden a focus, .section .region #block-system-main.block .content #node-2.node .visuallyhidden .button: