sass & compass (barcamp stuttgart 2012)

schöneresCSS

mitSass & Compass

Sass

Install & Run

$ gem install sass

$ sass --watch style.sass:style.css$ sass --watch assets/sass:public/css

Basic Syntaxcss scss sass

Nesting

articleborder-top: 1px dashed #eeeheader

margin-bottom: 15pxheader, section

color: #eee

article { border-top: 1px dashed #eeeeee; }article header { margin-bottom: 15px; }article header, article section { color: #eeeeee; }

SASS

CSS

Parent Selector

articlecolor: #f00&:hover

color: #00f.special &

h1font-size: 2em

article { color: red; }article:hover { color: blue; }.special article h1 { font-size: 2em; }

SASS

CSS

@media

#contentmargin: 0 1.5em@media screen and (min-width: 1280px)

margin: 0 2.5em

#content { margin: 0 1.5em; }@media screen and (min-width: 1280px) {

#content { margin: 0 2.5em; }}

SASS

CSS

Variablen

$link-color: #e78a15$link-hover: #138a1e$link-size: 0.8em

acolor: $link-colorfont-size: $link-size&:hover

color: $link-hover

a { color: #e78a15; font-size: 0.8em; }a:hover { color: #138a1e; }

SASS

CSS

Weiterverwendung mit @extend

.buttonbackground-color: #00fcolor: #fffpadding: 2em 1.5em

.button-delete@extend .buttonbackground-color: #f00

.button, .button-delete { background-color: blue; color: white; padding: 2em 1.5em; }.button-delete { background-color: red; }

SASS

CSS

Vorlagen mit @mixin

@mixin hover-link text-decoration: none &:hover text-decoration: underline

article a @include hover-link

.nav a color: blue @include hover-link

article a { text-decoration: none; }article a:hover { text-decoration: underline; }

.nav a { color: blue; text-decoration: none; }

.nav a:hover { text-decoration: underline; }

SASS

CSS

Funktionen mit @mixin

@mixin border-radius($amount)border-radius: $amount-mox-border-radius: $amount-webkit-border-radius: $amount

.alert@include border-radius(5px)

.alert { border-radius: 5px; -mox-border-radius: 5px; -webkit-border-radius: 5px;

}

SASS

CSS

benannte Argumente mit @mixin

@mixin flash-message($bgcolor:red, $hovercolor:blue)background-color: $bgcolor&:hover

background-color: $hovercolor

.alertbox@include flash-message($hovercolor: green)

.alertbox { background-color: red; }

.alertbox:hover { background-color: green; }

SASS

CSS

Import

/* screen.sass */@import "variables"@import "grid"@import "grid", "typography"

@media screen and (min-width: 480px)@import "phone"

#user@import "pages/user"

SASS

pages/_user.sass

screen.sass_variables.sass_grid.sass_typography.sass_phone.sass

etwas Mathematik

font-size: 18px - 5pxwidth: 200px * 3

Beispiel:

$layout-space: 10px$sidebar-width: 250px$page-width: 960px

#mainwidth: $page-width - $sidebar-width - (2 * $layout-space)

SASS

#main { width: 690px; }

CSS

Mathematische Funktionen

abs(-43) // => 43floor(3.9) // => 3ceil(3.2) // => 4round(2.8) // => 3percentage(13/25) // => 52%

Mehr ...

- Bedingungen (@if, @else, @elseif)- Logische Operatoren (<, >, >=, <=, ==, !=)- Verknuepfungen (and, or)- Schleifen (@for, @while, @each)- Farb-Inspektoren (hue, saturation, lightness, ..)- Farb-Funktionen (invert, mix, grayscale, darken, ..)- eigene Funktionen (@function)...

Compass

@mixin & @function Sammlung

Installation

$ gem install compass

$ compass create my_project$ cd my_project$ vim config.rb$ compass watch

oder

$ sass --compass --watch assets/sass:public/css

Cross Browser CSS3 Mixins

● Appearance● Background Clip● Background Origin● Background Size● Border Radius● Box● Box Shadow● Box Sizing● Columns

● Filter● Font Face● Hyphenation● Images (Gradients)● Inline Block● Opacity● CSS Regions● Text Shadow● Transform● Transition

Beispiel CSS3 Mixins

@import "compass".flash-message @include background(linear-gradient(#fff, #eee)) @include border-radius(5px)

.flash-message { background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #eeeeee)); background: -webkit-linear-gradient(#ffffff, #eeeeee); background: -moz-linear-gradient(#ffffff, #eeeeee); background: -o-linear-gradient(#ffffff, #eeeeee); background: linear-gradient(#ffffff, #eeeeee); -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px;

}

SASS

CSS

Layout Helper

Grid BackgroundGrid als Seitenhintergrund mithilfe CSS3 Gradients

Sticky FooterFooter am Seitenende

StretchingDimensionen eines Divs auf das Elternelement ausweiten

Utilities

Reset (global, einzelne Resets (Font, body, ..)Cross Browser ClearfixCross Browser Floatshas-layout Hacks...

Sprites

@import "compass"

@import "social/*.png"

@include all-social-sprites

.icons-sprite, .icons-facebook, .icons-flickr, .icons-twitter, .icons-xing { background: url('/images/icons-s2d05e1e0af.png') no-repeat; }

.icons-facebook { background-position: 0 -48px; }

.icons-flickr { background-position: 0 -16px; }

.icons-twitter { background-position: 0 -32px; }

.icons-xing { background-position: 0 0; }

SASS

CSS

Informations

● Sass - sass-lang.com● Sass Ruby on Rails Implementation

github.com/rails/sass-rails

● Compass - compass-style.org

● Noch mehr Infos○ 35 Great Resources for Compass and Sass○ Sass & Compass: The future of stylesheets now○ css2sass converter

Personal

Stefan BauckmeierAKRA GmbHhttp://twitter.com/emroxhttp://trafex.dehttps://www.xing.com/profile/Stefan_Bauckmeier