Post on 06-May-2015
description
&CompassSASS
Montag, 27. Februar 12
Designer & Frontend-Entwicklerbei Vortrieb in Bremen.
Andreas Dantz
@dantz moin@dantz.mevortrieb.net
Montag, 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 Dantz
Montag, 27. Februar 12
Montag, 27. Februar 12
.box {
margin: 1em;}
.box .content { border: 1px solid #f00;
}
CSS
Montag, 27. Februar 12
.box
margin: 1em .content border: 1px solid #f00
SASS
Montag, 27. Februar 12
.box {
margin: 1em .content { border: 1px solid #f00 }}
SCSS
Montag, 27. Februar 12
CSS 2.1
Montag, 27. Februar 12
CSS 3
Montag, 27. Februar 12
Variablen & Co.CSS wird Programmiersprache
Montag, 27. Februar 12
$main-color: #f00;$comp-color: #0ff;
a { color: $main-color; }a:hover,a:focus { color: $comp-color; }
SCSS
a { color: #f00; }a:hover,a:focus { color: #0ff; }
CSS
Montag, 27. Februar 12
4px + 4px;4px - 4px;4px * 2;4px / 2;
SCSS
8px;0px;8px;2px;
CSS
Montag, 27. Februar 12
$baseline: 16px;$border-width: 1px;
.box {border: $border-width solid #000;margin: $baseline / 2;padding: $baseline / 2 - $border-width;
}
SCSS
.box { border: 1px solid #000; margin: 8px; padding: 7px;}
CSS
Montag, 27. Februar 12
round(4.3);ceil(4.2);floor(4.6);abs(-12);percentage(26/50);
SCSS
4;5;4;12;52%;
CSS
Montag, 27. Februar 12
$maincolor: #f00;
a { color: $maincolor; }a:hover,a:focus { color: lighten($maincolor, 30%); }
SCSS
a { color: #f00; }a:hover,a:focus { color: #f99; }
CSS
Montag, 27. Februar 12
adjust-hue($color, $degrees)
lighten($color, $amount)
darken($color, $amount)
saturate($color, $amount)
desaturate($color, $amount)
grayscale($color)
complement($color)
invert($color)
SCSS
Montag, 27. Februar 12
NestingErbschaften und das spielen in Bäumen
Montag, 27. Februar 12
.box {width: 60%;h2 { font-size: 24px; }
}
SCSS
.box {width: 60%;
}
.box h2 { font-size: 24px; }
CSS
Montag, 27. Februar 12
article {header, footer { background-color: #000; }
}
SCSS
article header, article footer {background-color: #000
}
CSS
Montag, 27. Februar 12
a {color: #f00;text-decoration: none;&:hover { text-decoration: underline }
}
SCSS
a { color: #f00; text-decoration: none;}
a:hover { text-decoration: underline; }
CSS
Montag, 27. Februar 12
button {background: linear-gradient(#fff, #eee };.no-cssgradients & { background: #eee };
}
SCSS
button { # code mit dem Verlauf}
.no-cssgradients button { background: #eee; }
CSS
Montag, 27. Februar 12
flickr.com/photos/sharynmorrow/
Montag, 27. Februar 12
.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;}
SCSS
Montag, 27. Februar 12
.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; }
CSS
Montag, 27. Februar 12
Vorsicht!Montag, 27. Februar 12
#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; } } }}
SCSS
Montag, 27. Februar 12
#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;}
CSS
Montag, 27. Februar 12
MixinsEin Gang höher
Montag, 27. Februar 12
@mixin link-effect { color: #f00; &:hover { color: darken(#f00, 30%); }}
nav a { @include link-effect; }
SCSS
nav a { color: #f00;}
nav a:hover { color: #660000;}
CSS
Montag, 27. Februar 12
@mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius;}
.box { @include border-radius(5px); }
SCSS
.box { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
CSS
Montag, 27. Februar 12
@mixin linkcolor($link:black, $hover:red) { color: $link; &:hover { color: $hover; }}
a { @include linkcolor($hover:yellow); }
SCSS
a { color: black; }a:hover { color: yellow; }
CSS
Montag, 27. Februar 12
@mixin linkcolor($link:black, $hover:red) { color: $link; &:hover { color: $hover; }}
a { @include linkcolor($hover:yellow); }
SCSS
a { color: black; }a:hover { color: yellow; }
CSS
Montag, 27. Februar 12
Montag, 27. Februar 12
@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); }
SCSS
a { color: white; }a:hover { color: #ccc; }a.alt { color: black; }a.alt:hover { color: blue; }
CSS
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★ Erweiterungen
Montag, 27. Februar 12
.box { @include border-radius(8px); @include background(linear-gradient(#000, #333));}
SCSS
.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: linear-gradient(#000000, #333333);}
CSS
Montag, 27. Februar 12
header { background: image-url('logo.jpg'); h1 { width: image-width('logo.jpg'); height: image-height('logo.jpg'); }}
SCSS
header { background: url('/images/logo.jpg?1321202172');}
header h1 { width: 346px; height: 400px;}
CSS
Montag, 27. Februar 12
.unlocked { background: inline-image('unlocked.png');}
SCSS
.unlocked { background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAABkCAMAAACxdeD+AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6ODVBQkU5NzQ1NjU1MTFFMUFGODdFNTI1QzQwQzYzNkMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6ODVBQkU5NzU1NjU1MTFFMUFGODdFNTI1QzQwQzYzNkMiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDowQjAyREI0RDU2NEUxMUUxQUY4N0U1MjVDNDBDNjM2QyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDowQjAyREI0RTU2NEUxMUUxQUY4N0U1MjVDNDBDNjM2QyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pvv5YQwAAACEUExURcvLy/Pz87CwsImJic/Pz/v7++Tk5K+vr62trd3d3YCAgLGxsaKiot/f38rKyri4uPf398fHx/Dw8Pj4+LW1tenp6ZaWlqurq66uroODg8jIyIuLi5ycnIqKiu/v7/r6+oWFhZubm9jY2KampuHh4ZiYmNLS0tnZ2YSEhH9/f7Kysv///3IN8QsAAACqSURBVHja7NXnDoIwFAXgikXcey/cem7f//2sDV3E8EdRY3qTNvTLpaeEEJh4Uizgn2L/clxucziZAlgdPIzXaA8SbIYu1nCOhZiDuXhFIuduk1xsIHr0L2YKO0zVGHueihNxhXXoulXMOSOD1XLRpu8s8hZl1Rv9+tuUh3yls4zbP7bnd4NC+vvSySAZVGs76U55rYfdU3+v5AXlLEv3rfiJKPw7CvAuwAAQmUbpoWRiDAAAAABJRU5ErkJggg==');}
CSS
Montag, 27. Februar 12
flickr.com/photos/runningdevine
Montag, 27. Februar 12
@import "icon/*.png";@include all-icon-sprites($dimensions:true);
SCSS
.icon-sprite, .icon-minus { background: url('/images/icon-sd557c6037f.png') no-repeat;}
.icon-minus { background-position: 0 0; height: 7px; width: 24px;}
CSS
Montag, 27. Februar 12
WorkflowWie 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 lassenSASS/SCSS-Modul & Compass-Modul für Drupal
★ Beim Deployment kompilieren
Montag, 27. Februar 12
CodeKit★ GUI
★ Compiliert SASS, LESS, Compass & Stylus
★ Compiliert Co!eScript
★ Browser-Reload
★ Bildkompression
★ uvm.
Eierlegendewollmilchsau
Montag, 27. Februar 12
Drupal-Module★ Zusätzliche Fehlerquelle
★ Compass-Modul benötigt installiertes Compass auf dem Server
★ SASS/SCSS-Modul kann kein CompassWer nur SASS benutzt, sollte es mal ausprobieren
Montag, 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 kompiliert
Montag, 27. Februar 12
Fragen?@dantz, moin@dantz.me, vortrieb.net
Montag, 27. Februar 12