Movatterモバイル変換

[0]ホーム
URL:

AD
Uploaded byAndreas Dantz
PDF, PPTX1,089 views

Frontend-Entwicklung mit SASS & Compass

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

Embed presentation

Download as PDF, PPTX
SASSMontag, 27. Februar 12 & Compass
Andreas Dantz Designer & Frontend-Entwickler bei Vortrieb in Bremen. @dantz moin@dantz.me vortrieb.netMontag, 27. Februar 12
„CSS zu kompilieren ist eine bescheuerte Idee. Das ist völlig unnötig, produziert keinen guten Code und wer es nutzt, schlägt auch Omas auf der Straße.“ Andreas DantzMontag, 27. Februar 12
Montag, 27. Februar 12
CSS .box { margin: 1em; } .box .content { border: 1px solid #f00; }Montag, 27. Februar 12
SASS .box margin: 1em .content border: 1px solid #f00Montag, 27. Februar 12
SCSS .box { margin: 1em .content { border: 1px solid #f00 } }Montag, 27. Februar 12
CSS 2.1Montag, 27. Februar 12
CSS 3Montag, 27. Februar 12
Variablen & Co. CSS wird ProgrammierspracheMontag, 27. Februar 12
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
SCSS 4px + 4px; 4px - 4px; 4px * 2; 4px / 2; 8px; 0px; CSS 8px; 2px;Montag, 27. Februar 12
$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
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
$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
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
Nesting Erbschaften und das spielen in BäumenMontag, 27. Februar 12
.box { SCSS width: 60%; h2 { font-size: 24px; } } .box { width: 60%; CSS } .box h2 { font-size: 24px; }Montag, 27. Februar 12
article { SCSS header, footer { background-color: #000; } } article header, article footer { background-color: #000 CSS }Montag, 27. Februar 12
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
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
flickr.com/photos/sharynmorrow/Montag, 27. Februar 12
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
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
Vorsicht!Montag, 27. Februar 12
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
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:hover, .section .region #block-system-main.block .content #node-2.node .visuallyhidden .button focus { #background-color: #f0f; }Montag, 27. Februar 12
Mixins Ein Gang höherMontag, 27. Februar 12
@mixin link-effect { SCSS color: #f00; &:hover { color: darken(#f00, 30%); } } nav a { @include link-effect; } nav a { color: #f00; CSS } nav a:hover { color: #660000; }Montag, 27. Februar 12
@mixin border-radius($radius) { SCSS -webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius; } .box { @include border-radius(5px); } .box { -webkit-border-radius: 5px; CSS -moz-border-radius: 5px; border-radius: 5px; }Montag, 27. Februar 12
SCSS @mixin linkcolor($link:black, $hover:red) { color: $link; &:hover { color: $hover; } } a { @include linkcolor($hover:yellow); } a { color: black; } a:hover { color: yellow; } CSSMontag, 27. Februar 12
SCSS @mixin linkcolor($link:black, $hover:red) { color: $link; &:hover { color: $hover; } } a { @include linkcolor($hover:yellow); } a { color: black; } a:hover { color: yellow; } CSSMontag, 27. Februar 12
Montag, 27. Februar 12
@mixin linkcolor($dark: false) { @if $dark == true { SCSS color: black; &:hover { color: blue; } } @else { color: white; &:hover { color: #ccc; } } } a { @include linkcolor(); } a.alt { @include linkcolor(true); } a { color: white; } a:hover { color: #ccc; } CSS a.alt { color: black; } a.alt:hover { color: blue; }Montag, 27. Februar 12
Montag, 27. Februar 12
Das wird geboten ★ Alles, was SASS bietet ★ Noch mehr Funktionen ★ Mixin Bibliothek ★ Zugri! auf Projekt-Umgebung ★ Projekt-Kon"guration ★ ErweiterungenMontag, 27. Februar 12
.box { SCSS @include border-radius(8px); @include background(linear-gradient(#000, #333)); } .box { -moz-border-radius: 8px; CSS -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: linear-gradient(#000000, #333333); }Montag, 27. Februar 12
header { SCSS background: image-url('logo.jpg'); h1 { width: image-width('logo.jpg'); height: image-height('logo.jpg'); } } header { CSS background: url('/images/logo.jpg?1321202172'); } header h1 { width: 346px; height: 400px; }Montag, 27. Februar 12
SCSS .unlocked { background: inline-image('unlocked.png'); } .unlocked { background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAABkCAMAAACxdeD +AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/ CSS eHBhY2tldCBiZWdpbj0i77u/ IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIF hNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8v d3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi 8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0 dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYW NpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6ODVBQkU5NzQ1NjU1MTFFMUFGODdFNTI1QzQwQzYzNkMiIHhtcE1NOkRvY3VtZW50SUQ9 InhtcC5kaWQ6ODVBQkU5NzU1NjU1MTFFMUFGODdFNTI1QzQwQzYzNkMiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLm lpZDowQjAyREI0RDU2NEUxMUUxQUY4N0U1MjVDNDBDNjM2QyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDowQjAyREI0RTU2NEUxMUUxQUY4N0U1 MjVDNDBDNjM2QyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/ Pvv5YQwAAACEUExURcvLy/Pz87CwsImJic/Pz/v7++Tk5K+vr62trd3d3YCAgLGxsaKiot/f38rKyri4uPf398fHx/ Dw8Pj4+LW1tenp6ZaWlqurq66uroODg8jIyIuLi5ycnIqKiu/v7/r6+oWFhZubm9jY2KampuHh4ZiYmNLS0tnZ2YSEhH9/f7Kysv/// 3IN8QsAAACqSURBVHja7NXnDoIwFAXgikXcey/cem7f//2sDV3E8EdRY3qTNvTLpaeEEJh4Uizgn2L/ clxucziZAlgdPIzXaA8SbIYu1nCOhZiDuXhFIuduk1xsIHr0L2YKO0zVGHueihNxhXXoulXMOSOD1XLRpu8s8hZl1Rv9+tuUh3yls4zbP7bnd4NC +vvSySAZVGs76U55rYfdU3+v5AXlLEv3rfiJKPw7CvAuwAAQmUbpoWRiDAAAAABJRU5ErkJggg=='); }Montag, 27. Februar 12
flickr.com/photos/runningdevineMontag, 27. Februar 12
@import "icon/*.png"; SCSS @include all-icon-sprites($dimensions:true); .icon-sprite, .icon-minus { CSS background: url('/images/icon-sd557c6037f.png') no-repeat; } .icon-minus { background-position: 0 0; height: 7px; width: 24px; }Montag, 27. Februar 12
Workflow Wie gehen wir damit um?Montag, 27. Februar 12
Wege nach Rom ★ Lokal kompilieren SASS/SCSS-Datei & CSS im Repository ★ Auf dem Server kompilieren ★ Vom CMS kompilieren lassen SASS/SCSS-Modul & Compass-Modul für Drupal ★ Beim Deployment kompilierenMontag, 27. Februar 12
CodeKit Eierlegendewollmilchsau ★ GUI ★ Compiliert SASS, LESS, Compass & Stylus ★ Compiliert Co!eScript ★ Browser-Reload ★ Bildkompression ★ uvm.Montag, 27. Februar 12
Drupal-Module ★ Zusätzliche Fehlerquelle ★ Compass-Modul benötigt installiertes Compass auf dem Server ★ SASS/SCSS-Modul kann kein Compass Wer nur SASS benutzt, sollte es mal ausprobierenMontag, 27. Februar 12
Meine Lieblingslösung ★ Lokal Entwickeln und Compilieren Mit CodeKit oder Terminal (bei Netzwerk- oder Server-Setups) ★ Nur die unkompilierten Dateien im Repository ★ Beim Deployment wird von Capistrano die CSS-Datei auf dem Server kompiliertMontag, 27. Februar 12
Fragen? @dantz, moin@dantz.me, vortrieb.netMontag, 27. Februar 12

Recommended

PDF
Preprocessor presentation
PDF
Sass(SCSS)について
PDF
Theming and Sass
PDF
Front End Badassery with Sass
PDF
Web Frontend development: tools and good practices to (re)organize the chaos
PDF
Turbo theming: Introduction to Sass & Compass
PDF
Performance front end language
PDF
Stylesheet Wrangling with SCSS
 
PPT
Learn Sass and Compass quick
PPTX
Introduction to SASS
PPTX
Sass
PPTX
老成的Sass&Compass
DOCX
Horario de clases segundo grado
PDF
Getting Started with Sass & Compass
PDF
Save time by using SASS/SCSS
PDF
Sass and compass workshop

More Related Content

PDF
Preprocessor presentation
PDF
Sass(SCSS)について
PDF
Theming and Sass
PDF
Front End Badassery with Sass
PDF
Web Frontend development: tools and good practices to (re)organize the chaos
PDF
Turbo theming: Introduction to Sass & Compass
PDF
Performance front end language
PDF
Stylesheet Wrangling with SCSS
 
Preprocessor presentation
Sass(SCSS)について
Theming and Sass
Front End Badassery with Sass
Web Frontend development: tools and good practices to (re)organize the chaos
Turbo theming: Introduction to Sass & Compass
Performance front end language
Stylesheet Wrangling with SCSS
 

Viewers also liked

PPT
Learn Sass and Compass quick
PPTX
Introduction to SASS
PPTX
Sass
PPTX
老成的Sass&Compass
DOCX
Horario de clases segundo grado
PDF
Getting Started with Sass & Compass
PDF
Save time by using SASS/SCSS
PDF
Sass and compass workshop
Learn Sass and Compass quick
Introduction to SASS
Sass
老成的Sass&Compass
Horario de clases segundo grado
Getting Started with Sass & Compass
Save time by using SASS/SCSS
Sass and compass workshop

Frontend-Entwicklung mit SASS & Compass

  • 1.
  • 2.
    Andreas Dantz Designer & Frontend-Entwickler bei Vortrieb in Bremen. @dantz moin@dantz.me vortrieb.netMontag, 27. Februar 12
  • 3.
    „CSS zu kompilierenist eine bescheuerte Idee. Das ist völlig unnötig, produziert keinen guten Code und wer es nutzt, schlägt auch Omas auf der Straße.“ Andreas DantzMontag, 27. Februar 12
  • 4.
  • 5.
    CSS .box { margin: 1em; } .box .content { border: 1px solid #f00; }Montag, 27. Februar 12
  • 6.
    SASS .box margin: 1em .content border: 1px solid #f00Montag, 27. Februar 12
  • 7.
    SCSS .box { margin: 1em .content { border: 1px solid #f00 } }Montag, 27. Februar 12
  • 8.
  • 9.
  • 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 BäumenMontag, 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: #000 CSS }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.
  • 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.
  • 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:hover, .section .region #block-system-main.block .content #node-2.node .visuallyhidden .button focus { #background-color: #f0f; }Montag, 27. Februar 12
  • 28.
    Mixins Ein Gang höherMontag, 27. Februar 12
  • 29.
    @mixin link-effect { SCSS color: #f00; &:hover { color: darken(#f00, 30%); } } nav a { @include link-effect; } nav a { color: #f00; CSS } nav a:hover { color: #660000; }Montag, 27. Februar 12
  • 30.
    @mixin border-radius($radius) { SCSS -webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius; } .box { @include border-radius(5px); } .box { -webkit-border-radius: 5px; CSS -moz-border-radius: 5px; border-radius: 5px; }Montag, 27. Februar 12
  • 31.
    SCSS @mixin linkcolor($link:black, $hover:red) { color: $link; &:hover { color: $hover; } } a { @include linkcolor($hover:yellow); } a { color: black; } a:hover { color: yellow; } CSSMontag, 27. Februar 12
  • 32.
    SCSS @mixin linkcolor($link:black, $hover:red) { color: $link; &:hover { color: $hover; } } a { @include linkcolor($hover:yellow); } a { color: black; } a:hover { color: yellow; } CSSMontag, 27. Februar 12
  • 33.
  • 34.
    @mixin linkcolor($dark: false){ @if $dark == true { SCSS color: black; &:hover { color: blue; } } @else { color: white; &:hover { color: #ccc; } } } a { @include linkcolor(); } a.alt { @include linkcolor(true); } a { color: white; } a:hover { color: #ccc; } CSS a.alt { color: black; } a.alt:hover { color: blue; }Montag, 27. Februar 12
  • 35.
  • 36.
    Das wird geboten ★ Alles, was SASS bietet ★ Noch mehr Funktionen ★ Mixin Bibliothek ★ Zugri! auf Projekt-Umgebung ★ Projekt-Kon"guration ★ ErweiterungenMontag, 27. Februar 12
  • 37.
    .box { SCSS @include border-radius(8px); @include background(linear-gradient(#000, #333)); } .box { -moz-border-radius: 8px; CSS -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: linear-gradient(#000000, #333333); }Montag, 27. Februar 12
  • 38.
    header { SCSS background: image-url('logo.jpg'); h1 { width: image-width('logo.jpg'); height: image-height('logo.jpg'); } } header { CSS background: url('/images/logo.jpg?1321202172'); } header h1 { width: 346px; height: 400px; }Montag, 27. Februar 12
  • 39.
    SCSS .unlocked { background: inline-image('unlocked.png'); } .unlocked { background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAABkCAMAAACxdeD +AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/ CSS eHBhY2tldCBiZWdpbj0i77u/ IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIF hNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8v d3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi 8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0 dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYW NpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6ODVBQkU5NzQ1NjU1MTFFMUFGODdFNTI1QzQwQzYzNkMiIHhtcE1NOkRvY3VtZW50SUQ9 InhtcC5kaWQ6ODVBQkU5NzU1NjU1MTFFMUFGODdFNTI1QzQwQzYzNkMiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLm lpZDowQjAyREI0RDU2NEUxMUUxQUY4N0U1MjVDNDBDNjM2QyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDowQjAyREI0RTU2NEUxMUUxQUY4N0U1 MjVDNDBDNjM2QyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/ Pvv5YQwAAACEUExURcvLy/Pz87CwsImJic/Pz/v7++Tk5K+vr62trd3d3YCAgLGxsaKiot/f38rKyri4uPf398fHx/ Dw8Pj4+LW1tenp6ZaWlqurq66uroODg8jIyIuLi5ycnIqKiu/v7/r6+oWFhZubm9jY2KampuHh4ZiYmNLS0tnZ2YSEhH9/f7Kysv/// 3IN8QsAAACqSURBVHja7NXnDoIwFAXgikXcey/cem7f//2sDV3E8EdRY3qTNvTLpaeEEJh4Uizgn2L/ clxucziZAlgdPIzXaA8SbIYu1nCOhZiDuXhFIuduk1xsIHr0L2YKO0zVGHueihNxhXXoulXMOSOD1XLRpu8s8hZl1Rv9+tuUh3yls4zbP7bnd4NC +vvSySAZVGs76U55rYfdU3+v5AXlLEv3rfiJKPw7CvAuwAAQmUbpoWRiDAAAAABJRU5ErkJggg=='); }Montag, 27. Februar 12
  • 40.
  • 41.
    @import "icon/*.png"; SCSS @include all-icon-sprites($dimensions:true); .icon-sprite, .icon-minus { CSS background: url('/images/icon-sd557c6037f.png') no-repeat; } .icon-minus { background-position: 0 0; height: 7px; width: 24px; }Montag, 27. Februar 12
  • 42.
    Workflow Wie gehen wir damit um?Montag, 27. Februar 12
  • 43.
    Wege nach Rom ★ Lokal kompilieren SASS/SCSS-Datei & CSS im Repository ★ Auf dem Server kompilieren ★ Vom CMS kompilieren lassen SASS/SCSS-Modul & Compass-Modul für Drupal ★ Beim Deployment kompilierenMontag, 27. Februar 12
  • 44.
    CodeKit Eierlegendewollmilchsau ★ GUI ★ Compiliert SASS, LESS, Compass & Stylus ★ Compiliert Co!eScript ★ Browser-Reload ★ Bildkompression ★ uvm.Montag, 27. Februar 12
  • 45.
    Drupal-Module ★ Zusätzliche Fehlerquelle ★ Compass-Modul benötigt installiertes Compass auf dem Server ★ SASS/SCSS-Modul kann kein Compass Wer nur SASS benutzt, sollte es mal ausprobierenMontag, 27. Februar 12
  • 46.
    Meine Lieblingslösung ★ Lokal Entwickeln und Compilieren Mit CodeKit oder Terminal (bei Netzwerk- oder Server-Setups) ★ Nur die unkompilierten Dateien im Repository ★ Beim Deployment wird von Capistrano die CSS-Datei auf dem Server kompiliertMontag, 27. Februar 12
  • 47.
    Fragen? @dantz, moin@dantz.me, vortrieb.netMontag, 27. Februar 12
[8]ページ先頭
©2009-2025 Movatter.jp