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

old

new

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 :)

Linux

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.

SCSS

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

GUIs

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; }

Compiling output styles

: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; }

Compiling output styles

: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;}

SCSS

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

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

SCSS

Variables

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

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

SCSS

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

SCSS

Calculating with Sass

SCSS

CSS

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

SCSS

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

Nesting

Nesting

writing long selectors is time consuming

short selectors are better in general

CSS

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

SCSS

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

SCSS

Nesting

identation with SCSS makes no difference in CSS output

SCSS

but sure it looks better if intended

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

SCSS

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

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 }}

SCSS

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

Parent Selector - the ampersand

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

SCSS

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

Parent Selector - the ampersand

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; }}

SCSS

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

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

Parent Selector - the ampersand

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

SCSS

.parent div .child { color: black;}

Parent Selector - the ampersand

@media queries in place

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

SCSS

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; }

SCSS

/* 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";

SCSS

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

SCSS

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

@extend

@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;}

SCSS

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

SCSS

@extend

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

SCSS

.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; }

SCSS

.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%);}

SCSS

.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);}

SCSS

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);}

SCSS

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

Mixins

SCSS

Sass

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

SCSS

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

+my-btn(red)

SCSS

Using @content

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

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

SCSS

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

Functions

Functions

Operators

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

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

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

SCSS

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

SCSS

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; }}

SCSS

Functions

@for loop

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

SCSS

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

.tag-2 { font-size: 1.2em; }

.tag-3 { font-size: 1.7em; }

.tag-4 { font-size: 2.2em; }

.tag-5 { font-size: 2.7em; }

Functions

User Functions

Function to calculate the em font size from pixels

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

SCSS

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

SCSS

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; }}

SCSS

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; } }}

SCSS

Mixin for different media queries using @content

Usage

// 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; }}

SCSS

Mixin for different media queries using @content

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

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:

<!--[if lte IE 8]> <link rel="stylesheet" href="css/all-old-ie.css"><![endif]-->

<!--[if gt IE 8]><!--> <link rel="stylesheet" href="css/all.css"><!--<![endif]-->

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));}

SCSS

.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;}

SCSS

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;

Responsive Grids by @snugug

Asymetric Grids with Singularity

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

Responsive Grids by @snugug

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);}

SCSS

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";

SCSS

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'; }}

SCSS

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'; }}

SCSS

@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