fasten rwd development with sass

Fasten RWD Developmentwith SassSven Wolfermann | maddesigns

Sven Wolfermann (36)

Freelancer for modern frontend development (RWD, HTML5, CSS3) from Berlin

CSS3 Adventskalender 2010/2011

wrotes articles for T3N, PHP-Magazinand Webstandards-Magazin (new: Screengui.de)

Certified TYPO3 Integrator

Who is the guy?

Twitter: @maddesigns

Web: http://maddesigns.de

CSSISAWESOME

http://sass-lang.com/

What is Sass?

Sass means syntactically awesome style sheets

is a preprocessor

Similar preprocessors: LESS, Stylus (needs JS, i.e. a node.js server

Installing Sass

In order to install and run Sass, you need to have Ruby installed on your system.

Mac OSX

Easy! Ruby is built in :)

if not installed, use the package manager

on Windows?

use http://rubyinstaller.org/ to install ruby

$ sudo apt-get install ruby1.9.1-full

Installing Sass

install beta version:

already installed Sass?

check with

$ sudo gem install sass

$ sudo gem install sass --pre

$ sass --version

Create your first Sass (SCSS) file

create a sass folder

create styles.scss

open in your favourite editor*

* Sublime Text 2

Wait? What is the SCSS-thingy?

Sass or SCSS?

Sass has two syntaxes. The new main syntax is known as “SCSS” (for“Sassy CSS”). SCSS files use the extension .scss.

The second, older syntax is known as the indented syntax (or just“Sass”). Instead of brackets and semicolons, it uses the indentation oflines to specify blocks. Files in the indented syntax use the extension.sass.

section { margin: 1em 0; header { background-color: lightpink; }}

section margin: 1em 0 header background-color: lightpink

compiling to CSS - watch changes

open terminal

watch folder

watch file

$ sass input.scss output.css

$ sass --watch sass:css

$ sass --watch sass/style.scss:css/style.css

many GUIs for compiling

Livereload ($9.99)

Fire.App ($14)

Compass.app ($10)

CodeKit ($28)

Prepros ($19)

Scout App (free)

and build in in many text editors or IDEs

Compiling output styles

:compressed

:compact

// sass --watch sass:css --style compressedhtml,body{height:100%}.container{min-height:100%;max-width:1200px;width:auto;margin:

// sass --watch sass:css --style compacthtml, body { height: 100%; }

.container { min-height: 100%; max-width: 1200px; width: auto; margin: 0 auto; padding

.container h1 { border-bottom: 2px solid black; color: #ff8700; margin: 0 0 0.5em; }

:nested

// sass --watch sass:css --style nestedhtml,body { height: 100%; }

.container { min-height: 100%; max-width: 1200px; width: auto; margin: 0 auto; padding: 0 20px; } .container h1 { border-bottom: 2px solid black; color: #ff8700; margin: 0 0 0.5em; }

:expanded

// sass --watch sass:css --style expandedhtml,body { height: 100%;}

.container { min-height: 100%; max-width: 1200px; width: auto; margin: 0 auto; padding: 0 20px;}.container h1 { border-bottom: 2px solid black; color: #ff8700; margin: 0 0 0.5em;}

Compiling output with line numbers

:line-numbers

// sass --watch sass:css --style expanded --line-numbers

.../* line 12, ../sass/style.scss */.container { min-height: 100%; max-width: 1200px; width: auto; margin: 0 auto; padding: 0 20px;}/* line 19, ../sass/style.scss */.container h1 { border-bottom: 2px solid black; color: #ff8700; margin: 0 0 0.5em;}

Debugging in Sass 3.3

Sourcemaps to work with original files in developer tools

Include in Sass:

Sassmaps output

scss --sourcemap sass/styles.scss public/styles.css

/*# sourceMappingURL=styles.css.map */

{ "version": "3", "mappings": "4DAUA,qFAWQ,CACJ,OAAO,CAAE,KAAK,CAOlB,…", "sources": ["../sass/_vars.css”,”../sass/styles.scss"], "file": "styles.css"}

Variables

working with variables

change to global variables

h1 { border-bottom: 2px solid #000000; // black color: #FF8700; // orange margin: 0 0 0.5em;}

$brand-color1: #000000;$brand-color2: #FF8700;

h1 { border-bottom: 2px solid $brand-color1; color: $brand-color2; margin: 0 0 0.5em;}

Variables

variables can be colors, sizes, percentage, ...

$page_max_width: 1200px;$padding: 20px;

.container { min-height: 100%; max-width: $page_max_width; width: auto; margin: 0 auto; padding: 0 $padding;}

Calculating with Sass

.container { max-width: $page_max_width - $padding * 2; padding: 0 $padding; ...}

.container { max-width: 1160px; /* 1200px - 20px * 2 */ padding: 0 20px; ...}

Nesting

writing long selectors is time consuming

short selectors are better in general

nav {float: right;}nav li {float: left;}nav li a {color: #666;}nav li a:hover {color: #333;}nav li.current {font-weight: bold;}

Nesting

nav { float: right; li { float: left; a { color: #666; &:hover { color: #333; } } &.current { font-weight: bold; } }}

Nesting

identation with SCSS makes no difference in CSS output

but sure it looks better if intended

nav {float: right;li {float: left;a {color: #666;&:hover {color: #333;}}&.current {font-weight: bold;}}}

Nesting

HOW DEEP CAN I GO?

Sass nesting != HTML nesting

be careful with nesting!

you can run into performance issues with long selectors

Combining Selectors

div { color: black .foo { color: black } // descendant + .foo { color: black } // adjacent // sibling > .foo { color: black } // child ~ .foo { color: black } // general // sibling & .foo { color: black } // Sass' parent // selector &.bar { color: black } &:hover { color: black }}

SCSS div { color: black; }div .foo { color: black; }div + .foo { color: black; }

div > .foo { color: black; }div ~ .foo { color: black; }

div .foo { color: black; }

div.bar { color: black; }div:hover { color: black; }

Parent Selector - the ampersand

the & (ampersand) has a placeholder function for the parental selector

div { .foo { color: black } &.foo { color: black }}

div .foo { color: black}div.foo { color: black;}

a { &:hover, &:focus { color: black }}

a:hover, a:focus { color: black;}

Usecase for Modernizr classes

div { box-shadow: 0 0 5px rgba(#000, 0.8); // Sass feature for Hex to RGB colors .no-boxshadow & { border: 1px solid #555; }}

div { box-shadow: 0 0 5px rgba(#000, 0.8); }

.no-boxshadow div { border: 1px solid #555; }

div { .parent & .child { color: black }}

.parent div .child { color: black;}

@media queries in place

aside { width: 100%; @media screen and (min-width: 680px) { width: 25%; }}

aside { width: 100%;}@media screen and (min-width: 680px) { aside { width: 25%; }}

BTW did you recognize the Comments?

This compiles to:

/* Hey look at this multiline comment* that we want to show up in our CSS output. */.container { color: black; }

// These comments are single lines and// we do not want them to appear in our CSSfooter { color: #336699; }

/* Hey look at this multiline comment* that we want to show up in our CSS output. */.container { color: black; }footer { color: #336699; }

Importing Files

Importing

the way in CSS

Importing CSS files into one file can cause performance issues

Limit your external references in your HTML

Importing in Sass is better

split your stylesheet in many chunks and use the import function ofSass

/* style.css */@import "base.css";@import url("styles.css");@import url("druck.css") print;

Importing

create subfolders and devide into partials

use underscore in your filenames to concatinate the partials within thecompiling process

@import "modules/base";@import "partials/header", "partials/footer";

Importing

Imagine this structure

none underscore files will be compiled into seperate CSS files

/style.sass/modules/┗ _normalize.sass┗ _base.sass┗ _mixins.sass/partials/┗ _footer.sass┗ _header.sass/ie.sass/print.sass

Importing

this compiles to 3 files:

# style.sass@import modules/normalize@import modules/base@import modules/mixins@import partials/header@import partials/footer@import ie@import print

/css┗ style.css┗ ie.css┗ print.css

@extend

@extend clones the attributes from rules and adds them to anotherrule.

Then we can @extend the class to another

.button { background-color: $color-main; font-weight: bold; color: white; padding: 5px;}

.button-checkout { @extend .button; background-color: darken($color-main, 20%);}

@extend

.button-checkout { @extend .button; background-color: darken($color-main, 20%); .msg & { @extend .button; background-color: darken($color-main, 30%); }}

.button, .button-checkout, .msg .button-checkout { background-color: blue; font-weight: bold; color: white; padding: 5px; }

.button-checkout { background-color: #000099; }.msg .button-checkout { background-color: #000066; }

Placeholder Selectors: %foo

placeholder selectors can be extended, just like classes and IDs. Theextended selectors will be generated, but the base placeholder selectorwill not

// This ruleset won't be rendered on its own.%button { color: blue; font-weight: bold; font-size: 2em; }

.btn-notice { @extend %button; } SCSS

.btn-notice { color: blue; font-weight: bold; font-size: 2em; }

%placeholder

placeholder selectors will not be rendered to CSS.

%button { background-color: $color-main; font-weight: bold; color: white; padding: 5px;}

.button-checkout { @extend %button; background-color: darken($color-main, 20%);}

.button-checkout { background-color: #000099; font-weight: bold; color: white; padding: 5px; }

@mixinMan, tell me the cool things!

Mixins

Are code snippets (reusable elements)

Parameterizable (use reasonable defaults)

@mixin border-radius($value) { -webkit-border-radius: $value; -moz-border-radius: $value; border-radius: $value;}.box { color: $color-main; font-family: $helvetica-font-stack; @include border-radius(5px);}

Mixins

compiled to

but thats a bad example – no need for the vendor prefixes of border-radius anymore

only use border-radius: 5px; in your stylesheets

.box { color: blue; font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}

Mixins

Defaults and named arguments

@mixin link-colors($text:blue, $hover:red) { color: $text; &:hover { color: $hover; }}

a { @include link-colors($hover: green);}

a { color: blue; }a:hover { color: green; }

Mixins

@mixin my-btn($color) { color: $color;}@include my-btn(red);

=my-btn($color) color: $color

+my-btn(red)

Using @content

@mixin ie6 { * html & { @content; }}

.m-login { float: right; @include ie6 { display: inline; }}

.m-login { float: right;}* html .m-login { display: inline;}

Functions

Operators

Relational operators (<, >, <=, >=) evaluate numbers

Comparison operators (==, !=) evaluate all data types

1 < 20 // true10 <= 20 // true4 > 1 // true4 >= 1 // true

1 + 1 == 2 // truesmall != big // true#000 == black // true

Functions

Control Directives

@if@for@each@while

$theme: ocean;div { @if $theme == dusty { background: #c6bba9; color: $color; } @else if $theme == ocean { background: blue; color: white; }}

Functions

@for loop

@for $level from 0 to 5 { .tag-#{$level + 1} { font-size: .7em + ($level * .5em); }}

.tag-1 { font-size: 0.7em; }

Functions

User Functions

Function to calculate the em font size from pixels

@function grid-width($cells) { @return ($cell-width + $cell-padding) * $cells;}

@function px2em($font_size, $base_font_size: 16) { @return $font_size / $base_font_size + em}

Media-Queries with Sass

Variables in queries

use main breakpoints as variables

$break-small: 320px;$break-large: 1200px;

.profile-pic { float: left; width: 100px; @media screen and (min-width: $break-small) { width: 250px; float: none; } @media screen and (min-width: $break-large) { float: right; }}

Responsive Web Design in Sass: Using Media Queries in Sass 3.2

Mixin for different media queries using @content

$break-small: 320px;$break-large: 1200px;

@mixin respond-to($media) { @if $media == smartpones { @media only screen and (max-width: $break-small) { @content; } } @else if $media == tablet { @media only screen and (min-width: $break-small + 1) and (max-width: $break-large - 1) { @content; } } @else if $media == desktop { @media only screen and (min-width: $break-large) { @content; } }}

// profile picture module.profile-pic { float: left; width: 250px; @include respond-to(smartpones) { width: 100% ;} @include respond-to(tablet) { width: 125px; } @include respond-to(desktop) { float: none; }}

CSS output sample

.profile-pic { float: left; width: 250px;}@media only screen and (max-width: 320px) { .profile-pic { width: 100%; }}@media only screen and (min-width: 321px) and (max-width: 1199px) { .profile-pic { width: 125px; }}@media only screen and (min-width: 1200px) { .profile-pic { float: none; }}

mobile first and IE8

Sass-IE

Writing mobile-first styles without leaving IE < 9 behind

Media Query Mixin:

// all.scss

$fix-mqs: false !default;

@mixin respond-min($width) { // If we're outputting for a fixed media query set... @if $fix-mqs { // ...and if we should apply these rules... @if $fix-mqs >= $width { // ...output the content the user gave us. @content; } } @else { // Otherwise, output it using a regular media query @media screen and (min-width: $width) { @content; } }}// and a respond-max mixin, that does what you might expect

Sass-IE

OldIE Mixin:

Separate IE stylesheet

// all.scss$old-ie: false !default;

@mixin old-ie { // Only use this content if we're dealing with old IE @if $old-ie { @content; }}

// all-old-oldie.scss$old-ie: true;$fix-mqs: 65em;

@import 'all';

Including the Sass-IE CSS

To give the CSS to the browsers, use good old conditional comments:

<link rel="stylesheet" href="css/all.css">

http://compass-style.org/

Compass

Compass is to Sass like jQuery to Javascript

Compass is a Framework, that extends Sass It brings a lot of CSS3 mixins and useful CSS stuff

http://sonspring.com/journal/sass-for-designers

Compass Plugins

Github List of Compass Plugins

loading Compass plugins

add to the config.rb

# config.rb...require 'compassplugin'

@import 'compassplugin'; SCSS

RGBAPNG Plugin

Compass plugin for providing cross-browser compatible RGBA supportby creating transparent PNGs on the fly for browsers that don't supportRGBA.

https://github.com/aaronrussell/compass-rgbapng

$ sudo gem install compass-rgbapng

@import "rgbapng";.box { @include rgba-background(rgba(0,0,0,0.75));}

.box { background: url('/images/rgbapng/000000bf.png?1282127952'); background: rgba(0, 0, 0, 0.75); }

Compass plugins

Responsive Grid Plugin – Susy

Add Susy plugin to existing projects

$ sudo gem install compass-susy-plugin$ compass create myproject -r susy -u susy

# config.rbrequire "susy"

Susy Usage

@import "susy";

// global variables$total-columns: 12; // a 12-column grid$column-width: 4em; // each column is 4em wide$gutter-width: 1em; // 1em gutters between columns$grid-padding: $gutter-width; // grid-padding equal to gutters

// usage .page { @include container; @include susy-grid-background;}

Susy Usage

.page { // page acts as a container for our grid. @include container; // header and footer are full-width by default. header, footer { clear: both; } // nav spans 3 columns of total 12. nav { @include span-columns(3,12); }

.content { // content spans the final (omega) 9 columns of 12. @include span-columns(9 omega,12); // main content spans 6 of those 9 columns. .main { @include span-columns(6,9); } // secondary content spans the final 3 (omega) of 9 columns. .secondary { @include span-columns(3 omega,9); } }}

Compass plugins

Responsive Grid Plugin – Singularity – Grids without limits

Add Singularity plugin to existing projects

$ sudo gem install singularitygs$ compass create myproject -r singularitygs --using singularitygs

# config.rbrequire "singularitygs"

@import 'singularitygs';

Symmetric Grids - Twitter Bootstrap

$grids: 12;$gutters: 1/3;

Responsive Grids by @snugug

Symmetric Grids - Zurb Foundation

$grids: 12;$gutters: 0.9375em;$gutter-style: split;

Asymetric Grids with Singularity

$grids: 1 4 1;$gutters: 1/6;$gutter-style: split;

Singularity Usage

@include grid-span($span, $location);

// Span 1 column, starting at the 2nd column.span1-pos2 { @include grid-span(1, 2);}

// Span 3 columns, starting at the 3th column.span3-pos3 { @include grid-span(3, 3);}

// Span 5 columns, starting at the 7th column.span5-pos7 { @include grid-span(5, 7);}

Easy 12 column grid

$grids: 12;$gutters: 12px;$gutter-styles: 'split' 'fixed';$output: 'float';

@for $i from 1 through $grids { .grid#{$i} { @include grid-span($i); }}

Easy 12 column grid

Compass plugins

simple media queries Sass plugin – Breakpoint

Add plugin to projects

$ gem install breakpoint

# config.rbrequire "breakpoint"

// main.scss@import "breakpoint";

Breakpoint plugin usage

// basic media queries, min-width and min/max width$basic: 543px;$pair: 456px 794px;

.foo { content: 'No Media Queries';

@include breakpoint($basic) { content: 'Basic Media Query'; }

@include breakpoint($pair) { content: 'Paired Media Query'; }}

Breakpoint plugin CSS output

/* Nested Breakpoint calls become separate media queries */.foo { content: 'No Media Queries';}

@media (min-width: 543px) { .foo { content: 'Basic Media Query'; }}

@media (min-width: 456px) and (max-width: 794px) { .foo { content: 'Paired Media Query'; }}

Breakpoint Media Types

$breakpoint-to-ems: true;$media: 'screen' 700px;

#foo { @include breakpoint($media) { content: 'Media'; }}

@media screen and (min-width: 43.75em) { #foo { content: 'Media'; }}

Team Sass on Github

lot of Sass goodies

Singularity

Breakpoint

Toolkit

https://github.com/Team-Sass

Questions?

Thanks for your attention!Sven Wolfermann | maddesigns

http://maddesigns.de/rwd-sass-compass/

HTML5 slideshow by Google

fasten rwd development with sass

px sass

sass nesting

sass scss file

expanded sass

installed sass

sass folder

compressed sass

nested sass

Education

sass & bootstrap

rwd splan15 web

rwd obhajoba

rga rwd process

rwd / infopak tutorial

sass breakpoints + responsive images + panels = rwd utopia

less & sass

teneriffa fasten

navigation in rwd from the rwd summit

catálogo fasten

newsletters rwd

first sass

sass - tutorial

sass manifesto

andreas mÜller fasten inchristentum fasten im …

compass & sass

future proof rwd

sass henno

ps9-rwd ps9-cut ps9-rwd ps9-cut summer...

sass inherited files - sass meetup in denver, co