fasten rwd development with sass
DESCRIPTION
A short Sass introduction and how Sass can help developing responsive webdesign fasterTRANSCRIPT
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
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