Frontend-Entwicklung mit SASS & Compass

&CompassSASS

Montag, 27. Februar 12

Designer & Frontend-Entwicklerbei Vortrieb in Bremen.

Andreas Dantz

@dantz [email protected]


mailto:[email protected]


„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


.box {

margin: 1em;}

.box .content { border: 1px solid #f00;

}

CSS


.box

margin: 1em .content border: 1px solid #f00

SASS


.box {

margin: 1em .content { border: 1px solid #f00 }}

SCSS


CSS 2.1


CSS 3


Variablen & Co.CSS wird Programmiersprache


$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


4px + 4px;4px - 4px;4px * 2;4px / 2;

SCSS

8px;0px;8px;2px;

CSS


$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


round(4.3);ceil(4.2);floor(4.6);abs(-12);percentage(26/50);

SCSS

4;5;4;12;52%;

CSS


$maincolor: #f00;

a { color: $maincolor; }a:hover,a:focus { color: lighten($maincolor, 30%); }

SCSS

a { color: #f00; }a:hover,a:focus { color: #f99; }

CSS


adjust-hue($color, $degrees)

lighten($color, $amount)

darken($color, $amount)

saturate($color, $amount)

desaturate($color, $amount)

grayscale($color)

complement($color)

invert($color)

SCSS


http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html#adjust_hue-instance_method

http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html#adjust_hue-instance_method

http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html#lighten-instance_method

http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html#lighten-instance_method

http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html#darken-instance_method

http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html#darken-instance_method

http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html#saturate-instance_method

http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html#saturate-instance_method

http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html#desaturate-instance_method

http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html#desaturate-instance_method

http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html#grayscale-instance_method

http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html#grayscale-instance_method

http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html#complement-instance_method

http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html#complement-instance_method

http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html#invert-instance_method

http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html#invert-instance_method

NestingErbschaften und das spielen in Bäumen


.box {width: 60%;h2 { font-size: 24px; }

}

SCSS

.box {width: 60%;

}

.box h2 { font-size: 24px; }

CSS


article {header, footer { background-color: #000; }

}

SCSS

article header, article footer {background-color: #000

}

CSS


a {color: #f00;text-decoration: none;&:hover { text-decoration: underline }

}

SCSS

a { color: #f00; text-decoration: none;}

a:hover { text-decoration: underline; }

CSS


button {background: linear-gradient(#fff, #eee };.no-cssgradients & { background: #eee };

}

SCSS

button { # code mit dem Verlauf}

.no-cssgradients button { background: #eee; }

CSS


flickr.com/photos/sharynmorrow/


http://www.flickr.com/photos/sharynmorrow/

http://www.flickr.com/photos/sharynmorrow/

.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


.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


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


#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


MixinsEin Gang höher


@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


@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


@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


@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


Das wird geboten★ Alles, was SASS bietet★ Noch mehr Funktionen★ Mixin Bibliothek★ Zugri! auf Projekt-Umgebung★ Projekt-Kon"guration★ Erweiterungen


.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


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


.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


flickr.com/photos/runningdevine


http://www.flickr.com/photos/runningdevine

http://www.flickr.com/photos/runningdevine

@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


WorkflowWie gehen wir damit um?


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


CodeKit★ GUI

★ Compiliert SASS, LESS, Compass & Stylus

★ Compiliert Co!eScript

★ Browser-Reload

★ Bildkompression

★ uvm.

Eierlegendewollmilchsau


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


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


Fragen?@dantz, [email protected], vortrieb.net




Frontend-Entwicklung mit SASS & Compass

Technology

Transcript of Frontend-Entwicklung mit SASS & Compass