Fasten RWD Development with Sass

Fasten RWD Development
with Sass
Sven Wolfermann | maddesigns

Who is the guy?
· Sven Wolfermann (36)
· Freelancer for modern frontend
development (RWD, HTML5, CSS3)
from Berlin
· CSS3 Adventskalender 2010/2011
· wrotes articles for T3N, PHP-Magazin
and Webstandards-Magazin
(new: Screengui.de)
· Certified TYPO3 Integrator
· Twitter: @maddesigns
· Web: http://maddesigns.de

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
$ sudo apt-get install ruby1.9.1-full

on Windows?
use http://rubyinstaller.org/ to install ruby

Installing Sass
$ sudo gem install sass

install beta version:
$ sudo gem install sass --pre

already installed Sass?
check with
$ 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 of
lines to specify blocks. Files in the indented syntax use the extension
.sass.

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

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

compiling to CSS - watch changes
open terminal
$ sass input.scss output.css

watch folder
$ sass --watch sass:css

watch file
$ 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
// sass --watch sass:css --style compressed
html,body{height:100%}.container{min-height:100%;max-width:1200px;width:auto;margin:

:compact
// sass --watch sass:css --style compact
html, 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 nested
html,
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 expanded
html,
body {
height: 100%;
}
.container {
min-height: 100%;
max-width: 1200px;
width: auto;
margin: 0 auto;
padding: 0 20px;
}
.container h1 {
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 {
color: #ff8700;
margin: 0 0 0.5em;
}

Debugging in Sass 3.3
Sourcemaps to work with original files in developer tools
scss --sourcemap sass/styles.scss public/styles.css

Include in Sass:
/*# sourceMappingURL=styles.css.map */

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

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

SCSS

change to global variables
$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
.container {
max-width: $page_max_width - $padding * 2;
padding: 0 $padding;
...
}

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

SCSS

Nesting
writing long selectors is time consuming
short selectors are better in general
CSS
nav
nav
nav
nav
nav

{float: right;}
li {float: left;}
li a {color: #666;}
li a:hover {color: #333;}
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
nav {float: right;
li {float: left;
a {color: #666;
&:hover {
color: #333;}
}
&.current {
font-weight: bold;}
}}

but sure it looks better if intended

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
div {
color: black
.foo {
color: black } //
+ .foo {
color: black } //
//
> .foo {
color: black } //
~ .foo {
color: black } //
//
& .foo {
color: black } //
//
&.bar {
color: black }
&:hover {
color: black }
}

SCSS

descendant
adjacent
sibling
child
general
sibling
Sass' parent
selector

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

SCSS

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

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

SCSS

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

SCSS

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

.parent div .child {
color: black;
}

SCSS

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

SCSS

BTW did you recognize the Comments?
/* 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 CSS
footer {
color: #336699; }

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

SCSS

Importing
the way in CSS
/* style.css */
@import "base.css";
@import url("styles.css");
@import url("druck.css") print;

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 of
Sass

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

SCSS

create subfolders and devide into partials
use underscore in your filenames to concatinate the partials within the
compiling process

Importing
Imagine this structure
/style.sass
/modules/
┗ _normalize.sass
┗ _base.sass
┗ _mixins.sass
/partials/
┗ _footer.sass
┗ _header.sass
/ie.sass
/print.sass

none underscore files will be compiled into seperate CSS files

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

this compiles to 3 files:
/css
┗ style.css
┗ ie.css
┗ print.css

SCSS

@extend
@extend clones the attributes from rules and adds them to another
rule.
.button {
background-color: $color-main;
font-weight: bold;
color: white;
padding: 5px;
}

SCSS

Then we can @extend the class to another
.button-checkout {
@extend .button;
background-color: darken($color-main, 20%);
}

SCSS

@extend
.button-checkout {
@extend .button;
.msg & {
@extend .button;
}
}

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

SCSS

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

SCSS

placeholder selectors can be extended, just like classes and IDs. The
extended selectors will be generated, but the base placeholder selector
will not
.btn-notice { @extend %button; }

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

SCSS

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

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

SCSS

@mixin
Man, 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
.box {
color: blue;
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

but thats a bad example – no need for the vendor prefixes of borderradius anymore
only use border-radius: 5px; in your stylesheets

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

SCSS

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

SCSS

Sass
=my-btn($color)
color: $color
+my-btn(red)

SCSS

Using @content
@mixin ie6 {
* html & {
@content;
}
}
.m-login {
float: right;
@include ie6 {
display: inline;
}
}

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

SCSS

Functions
Operators
Relational operators (<, >, <=, >=) evaluate numbers
1 < 20 // true
10 <= 20 // true
4 > 1 // true
4 >= 1 // true

SCSS

Comparison operators (==, !=) evaluate all data types
1 + 1 == 2 // true
small != 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);
}
}

.tag-1
.tag-2
.tag-3
.tag-4
.tag-5

{
{
{
{
{

font-size:
font-size:
font-size:
font-size:
font-size:

0.7em;
1.2em;
1.7em;
2.2em;
2.7em;

}
}
}
}
}

SCSS

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

SCSS

Function to calculate the em font size from pixels
@function px2em($font_size, $base_font_size: 16) {
@return $font_size / $base_font_size + em
}

SCSS

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

SCSS

Mixin for different media queries using @content
SCSS

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

$break-small) {

$break-small + 1)
$break-large - 1) {

$break-large) {

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

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

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:
// all.scss
$old-ie: false !default;
@mixin old-ie {
// Only use this content if we're dealing with old IE
@if $old-ie {
@content;
}
}

Separate IE stylesheet
// 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 support
by creating transparent PNGs on the fly for browsers that don't support
RGBA.
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); }

SCSS

Compass plugins
Responsive Grid Plugin – Susy
$ sudo gem install compass-susy-plugin
$ compass create myproject -r susy -u susy

Add Susy plugin to existing projects
# config.rb
require "susy"

Susy Usage
SCSS

@import "susy";
// global variables
$total-columns: 12;
$column-width: 4em;
$gutter-width: 1em;
$grid-padding: $gutter-width;

//
//
//
//

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

a 12-column grid
each column is 4em wide
1em gutters between columns
grid-padding equal to gutters

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
$ sudo gem install singularitygs
$ compass create myproject -r singularitygs --using singularitygs

Add Singularity plugin to existing projects
# config.rb
require "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);
SCSS

// 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 {
}
// Span 5 columns, starting at the 7th column
.span5-pos7 {
}

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
$ gem install breakpoint

Add plugin to projects
# config.rb
require "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';
}
}

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

SCSS

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

More Related Content

What's hot (20)

Viewers also liked (10)

Similar to Fasten RWD Development with Sass (20)

More from Sven Wolfermann (7)

Recently uploaded (20)

Fasten RWD Development with Sass