Post on 28-Jan-2015
description
yWork & Play(Verantwortungsvolles) Arbeiten mit SASS & Compass
CSS zu kompilieren ist total bescheuert, unnötig und führt zu minderwertigen Ergebnissen. Wer so etwas nutzt, schlägt auch wehrlose Omas auf der Straße.
Andreas Dantz, anno 2009
„
CSS 2.1flickr.com/photos/thomasbrauner
CSS 3h!p://www.flickr.com/photos/bcnbits/
.css
.sass
.scss
CSS
.box {
margin: 1em;
}
.box .content {
border: 1px solid #f00;
}
SASS
.box
margin: 1em
.content
border: 1px solid #f00
SCSS
.box {
margin: 1em
.content {
border: 1px solid #f00;
}
}
Variablen1
erste Schri!e in Richtung Programmiersprache
$color-main: #00aeef;$baseline: 16px;
strong { color: $color-main; }p { margin-bottom: $baseline; }
SCSS
strong { color: #00aeef; }p { margin-bottom: 16px; }
CSS
4px + 4px;4px - 4px;4px * 2;4px / 2;
8px;0px;8px;2px;
SCSS
CSS
halbe Grundlinie als Margin
halbe Grundlinie abzüglich Rahmen als Padding
$baseline: 32px;$border-width: 4px;
.box { border: $border-width solid $color-main; margin: $baseline / 2; padding: $baseline / 2 - $border-width;}
SCSS
.box { border: 4px solid #00aeef; margin: 16px; padding: 12px;}
CSS
round(4.3);ceil(4.2);floor(4.6);abs(-12);percentage(120/960);
SCSS
4;5;4;12;12,5%;
CSS
$color-main: #00aeef;
a { color: $color-main; }a:hover,a:focus { color: lighten($color-main, 15%); }
SCSS
a { color: #00aeef; }
a:hover,a:focus { color: #3dcaff;}
CSS
adjust-hue($color, $degrees)
lighten($color, $amount)
darken($color, $amount)
saturate($color, $amount)
desaturate($color, $amount)
grayscale($color)
complement($color)
invert($color)
SCSS
@if
@for
@each
@while
SCSS
SCSS@import "compass/reset","compass/css3"; @import "layout";
// ============== Vars =====================$items: 6; // number of items$arc: 90; // arc of the circle$angle: $arc/$items; // angle between items$space:170; // a value in pixel. It's the space between the red circle and the items$circleCenterX: 30; // the X coord of the red circle center $circleCenterY: 30; // the Y coord of the red circle center $disappearDelay: 50;
// Generate items position + keyframes animation@for $i from 1 through $items { // I'm not really good in math, so I suppose that they have a better way to calcul coordinates :) $rad: ( $angle * ($i - 1) + $angle/2 ) * (pi()/180); $x:round(($circleCenterX + $space) * cos($rad) ); $y:round(-($circleCenterY + $space) * sin($rad) ); // Coords for the rebound during the animation $xm: round($x * 1.15); $ym: round($y * 1.15); $disappearDelay: $disappearDelay * 1.35; // CSS checkbox + label tricks #menu:checked ~ .items li:nth-child(#{$i}) { -webkit-animation-name: "appear-'#{$i}'"; -webkit-animation-duration: 240ms; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; -webkit-animation-delay: (20 * $i)+ms; } #menu:not(:checked) ~ .items li:nth-child(#{$i}) { -webkit-animation-name: "disappear-'#{$i}'"; -webkit-animation-duration: (320 + $disappearDelay)+ms; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; } // Generate keyframes // ====================== // Sass interpolation doesn't work with keyframe. CF : https://github.com/nex3/sass/issues/46 // so I use a tricks ==> "appear-'#{$i}'" - And it doesn't work in Firefox. @-webkit-keyframes "appear-'#{$i}'" { 0% { -webkit-transform:translate3d(0, 0, 0px) rotateZ(270deg); -webkit-animation-timing-function:cubic-bezier(1,.6,.57,.75); } 80% { -webkit-animation-timing-function:cubic-bezier(.45,.97,.51,.78); -webkit-transform:translate3d($xm+px, $ym+px,0px) rotateZ(0deg); } 100% { -webkit-transform:translate3d($x+px, $y+px,0px); } } @-webkit-keyframes "disappear-'#{$i}'" { 0% { -webkit-transform:translate3d($x+px, $y+px,0px) rotateZ(0deg); -webkit-animation-timing-function:cubic-bezier(1,.6,.57,.75); } 70% { -webkit-transform:translate3d($xm+px, $ym+px,0px) rotateZ(360deg); -webkit-animation-timing-function:cubic-bezier(.45,.97,.51,.78) } 100% { -webkit-transform:translate3d(0,0,0px) rotateZ(540deg); } } }
h!ps://github.com/Victa/path-menu
und andere Sauerein mit SelektorenNesting
2
.box { margin: 12px; h2 { font-size: $baseline * 2; }}
SCSS
.box { padding: 12px;}.box h2 { font-size: 64px;}
CSS
article {header, footer { background-color: $color-main; }
}
SCSS
article header, article footer { background-color: #00aeef;}
CSS
$color-main: #00aeef;
a { color: $color-main; &:hover, &:focus { color: lighten($color-main, 15%); }}
SCSS
a { color: #00aeef; }
a:hover, a:focus { color: #3dcaff;}
CSS
button { color: #fff; background: linear-gradient(top,
$color-main 0%, darken($color-main, 5%) 100%); .no-cssgradients & { background: #eee };}
SCSS
button { background: linear-gradient(top,
#00aeef 0%, #009bd5 100%);}.no-cssgradients button { background: #eee;}
CSS
flickr.com/photos/sharynmorrow/
.message { background-color: lighten($color-main, 40%); border: $border-width solid $color-main;
h3 { font-size: $baseline / 2; }
p:last-child { margin-bottom: 0; }}
.error { @extend .message; background-color: lighten($color-error, 40%); border-color: $color-error;}
SCSS
.message, .error { background-color: #bcedff; border: 4px solid #00aeef; padding: 1em; margin-bottom: 32px;}
.message h3, .error h3 { font-size: 16px; margin-bottom: 16px;}
.message p:last-child, .error p:last-child { margin-bottom: 0;}
.error { background-color: #ffcccc; border-color: red;}
CSS
flickr.com/photos/basibanget
#page-wrapper #page #main-wrapper #main #content,#page-wrapper #main .column#content,.section .region #block-system-main.block { 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,.section .region #block-system-main.block { 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 h2.active,#page-wrapper #main .column#content h2,#page-wrapper #main .column#content .visuallyhidden,.section .region #block-system-main.block h2.active,.section .region #block-system-main.block h2,.section .region #block-system-main.block .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 h2.active a:link,#page-wrapper #main .column#content h2.active a:visited,#page-wrapper #main .column#content h2.active .button:link,#page-wrapper #main .column#content h2.active .button:visited,#page-wrapper #main .column#content h2 a:link,#page-wrapper #main .column#content h2 a:visited,#page-wrapper #main .column#content h2 .button:link,#page-wrapper #main .column#content h2 .button:visited,#page-wrapper #main .column#content .visuallyhidden a:link,#page-wrapper #main .column#content .visuallyhidden a:visited,#page-wrapper #main .column#content .visuallyhidden .button:link,#page-wrapper #main .column#content .visuallyhidden .button:visited,.section .region #block-system-main.block h2.active a:link,.section .region #block-system-main.block h2.active a:visited,.section .region #block-system-main.block h2.active .button:link,.section .region #block-system-main.block h2.active .button:visited,.section .region #block-system-main.block h2 a:link,.section .region #block-system-main.block h2 a:visited,.section .region #block-system-main.block h2 .button:link,.section .region #block-system-main.block h2 .button:visited,.section .region #block-system-main.block .visuallyhidden a:link,.section .region #block-system-main.block .visuallyhidden a:visited,.section .region #block-system-main.block .visuallyhidden .button:link,.section .region #block-system-main.block .visuallyhidden .button:visited { background-color: #f00;}
#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 h2.active a:hover,#page-wrapper #main .column#content h2.active a focus,#page-wrapper #main .column#content h2.active .button:hover,#page-wrapper #main .column#content h2.active .button focus,#page-wrapper #main .column#content h2 a:hover,#page-wrapper #main .column#content h2 a focus,#page-wrapper #main .column#content h2 .button:hover,#page-wrapper #main .column#content h2 .button focus,#page-wrapper #main .column#content .visuallyhidden a:hover,#page-wrapper #main .column#content .visuallyhidden a focus,#page-wrapper #main .column#content .visuallyhidden .button:hover,#page-wrapper #main .column#content .visuallyhidden .button focus,.section .region #block-system-main.block h2.active a:hover,.section .region #block-system-main.block h2.active a focus,.section .region #block-system-main.block h2.active .button:hover,.section .region #block-system-main.block h2.active .button focus,.section .region #block-system-main.block h2 a:hover,.section .region #block-system-main.block h2 a focus,.section .region #block-system-main.block h2 .button:hover,.section .region #block-system-main.block h2 .button focus,.section .region #block-system-main.block .visuallyhidden a:hover,.section .region #block-system-main.block .visuallyhidden a focus,.section .region #block-system-main.block .visuallyhidden .button:hover,.section .region #block-system-main.block .visuallyhidden .button focus { #background-color: #f0f;}
CSS
Die drei Legitimationen fürs Nesting in SASS
1. Ich möchte mehr Übersicht in meinem Stylesheet
2. Ich hä!e die Selektoren auch manuell in CSS kombiniert
3. Ich will mir Tipparbeit sparen
Ordnung scha" OrdnungArchitektur
3
application.scss_base.scss_layout.scss_menu.scss_mixins.scss…
@include "base";@include "mixins";@include "layout";@include "menu";…
keine Ausgabe!
jetzt bin ich offiziell CSS-ProgrammiererMixins
4
@mixin link-effect { color: $color-main; &:hover, &:focus {
color: darken($color-main, 30%); }}
nav a { @include link-effect; }
SCSS
nav a { color: #00aeef;}
nav a:hover, nav a:focus { color: #003f56;}
CSS
Mixins sollst Du nur benutzen,wenn Parameter übergeben.Sonst wirst das Stylesheet Du beschmutzen,kannst du damit wirklich leben?
@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, a:focus { color: $hover; }}
a { @include linkcolor($hover:yellow); }
SCSS
a { color: black; }a:hover, a:focus { 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
sonspring.com/journal/sass-for-designers
5
@import "compass";
.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
@import "icon/*.png";@include all-icon-sprites($dimensions:true); SCSS
.icon-sprite, .icon-plus, .icon-minus { background: url('/images/icon-sd55776.png'); no-repeat;}
.icon-plus { background-position: 0 0; height: 14px; width: 24px;}
.icon-minus { background-position: -15px 0; height: 7px; width: 24px;}
CSS
das Chaos beherrschenResponsive
6
@media screen and (min-width: 480px) { nav li { float: none; }}
$break-phone: 320px;
nav li { float: left; @media screen and (max-width: $break-phone + 1) { float: none;
}}
SCSS
nav li { float: left;}
@media screen and (max-width: 321px) { nav li { float: none; }}
CSS
#blow { @include border-radius(50%); background-color: $color-main;}
@for $i from 1 through 500 { @media screen and (min-width: $break-phone + $i) { #blow { width: #{600 - $i}px; height: #{600 - $i}px; } }}
SCSS
[…]
@media screen and (min-width: 335px) { #blow { width: 585px; height: 585px; } }@media screen and (min-width: 336px) { #blow { width: 584px; height: 584px; } }@media screen and (min-width: 337px) { #blow { width: 583px; height: 583px; } }@media screen and (min-width: 338px) { #blow { width: 582px; height: 582px; } }@media screen and (min-width: 339px) { #blow { width: 581px; height: 581px; } }@media screen and (min-width: 340px) { #blow { width: 580px; height: 580px; } }
[…]
CSS
$break-small: 320px;$break-large: 1024px;
@mixin respond-to($media) { @if $media == mobile { @media only screen and (max-width: $break-mobile) { @content; } } @else if $media == medium { @media only screen and (min-width: $break-mobile + 1) and (max-width: $break-large - 1) { @content; } } @else if $media == widescreen { @media only screen and (min-width: $break-large) { @content; } }}
SCSS
.avatar { border: 1px solid $color-main; @include respond-to(mobile) { width: 100% ;} @include respond-to(medium) { width: 150px; } @include respond-to(widescreen) { float: none; }}
.avatar { border: 1px solid #00aeef; }
@media only screen and (max-width: 320px) { .avatar { width: 100%; }}
@media only screen and (min-width: 321px) and (max-width: 1023px) { .avatar { width: 150px; }}
@media only screen and (min-width: 1024px) { .avatar { float: none; }}
CSS
woher? wie? wie viel?Workflow
7
CodeKit
TEAMWORK
flickr.com/photos/runningdevine
Fragen?Danke
8