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 ...
CSS
IS
AWESOME
old

new
http://sass-lang.com/
What is Sass?
Sass means syntactically awesome style sheets
is a preprocessor
Similar preprocessors: LESS, Stylus (needs J...
Installing Sass
In order to install and run Sass, you need to have Ruby installed on your system.

Mac OSX
Easy! Ruby is b...
Installing Sass
$ sudo gem install sass

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

already installed Sass?
chec...
Create your first Sass (SCSS) file
create a sass folder
create styles.scss
open in your favourite editor*

* Sublime Text ...
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 extensio...
SCSS
section {
margin: 1em 0;
header {
background-color: lightpink;
}
}

Sass
section
margin: 1em 0
header
background-colo...
compiling to CSS - watch changes
open terminal
$ sass input.scss output.css

watch folder
$ sass --watch sass:css

watch f...
GUIs
many GUIs for compiling
· Livereload ($9.99)
· Fire.App ($14)
· Compass.app ($10)
· CodeKit ($28)
· Prepros ($19)
· S...
Compiling output styles
:compressed
// sass --watch sass:css --style compressed
html,body{height:100%}.container{min-heigh...
Compiling output styles
:nested
// sass --watch sass:css --style nested
html,
body {
height: 100%; }
.container {
min-heig...
Compiling output styles
:expanded
// sass --watch sass:css --style expanded
html,
body {
height: 100%;
}
.container {
min-...
Compiling output with line numbers
:line-numbers
// sass --watch sass:css --style expanded --line-numbers
...
/* line 12, ...
Debugging in Sass 3.3
Sourcemaps to work with original files in developer tools
scss --sourcemap sass/styles.scss public/s...
Variables
working with variables
h1 {
border-bottom: 2px solid #000000; // black
color: #FF8700; // orange
margin: 0 0 0.5em;
}

SCS...
Variables
variables can be colors, sizes, percentage, ...
$page_max_width: 1200px;
$padding: 20px;

SCSS

.container {
min...
Calculating with Sass
SCSS
.container {
max-width: $page_max_width - $padding * 2;
padding: 0 $padding;
...
}

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

{float: ri...
Nesting
SCSS
nav {
float: right;
li {
float: left;
a {
color: #666;
&:hover {
color: #333;
}
}
&.current {
font-weight: bo...
Nesting
identation with SCSS makes no difference in CSS output
SCSS
nav {float: right;
li {float: left;
a {color: #666;
&:...
Nesting
HOW DEEP CAN I GO?
Sass nesting != HTML nesting
be careful with nesting!
you can run into performance issues with ...
Combining Selectors
Combining Selectors
div {
color: black
.foo {
color: black } //
+ .foo {
color: black } //
//
> .foo {
color: black } //
~...
Parent Selector - the ampersand
the & (ampersand) has a placeholder function for the parental selector
div {
.foo {
color:...
Parent Selector - the ampersand
a {
&:hover,
&:focus {
color: black
}
}

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

SCSS
Parent Selector - the ampersand
Usecase for Modernizr classes
div {
box-shadow: 0 0 5px rgba(#000, 0.8);
// Sass feature f...
Parent Selector - the ampersand
div {
.parent & .child {
color: black
}
}

.parent div .child {
color: black;
}

SCSS
Parent Selector - the ampersand
@media queries in place
aside {
width: 100%;
@media screen and (min-width: 680px) {
width:...
BTW did you recognize the Comments?
/* Hey look at this multiline comment
* that we want to show up in our CSS output. */
...
Importing Files
Importing
the way in CSS
/* style.css */
@import "base.css";
@import url("styles.css");
@import url("druck.css") print;

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

SCSS

create subfolders and devide into p...
Importing
Imagine this structure
/style.sass
/modules/
┗ _normalize.sass
┗ _base.sass
┗ _mixins.sass
/partials/
┗ _footer....
Importing
# style.sass
@import modules/normalize
@import modules/base
@import modules/mixins
@import partials/header
@impo...
@extend
@extend
@extend clones the attributes from rules and adds them to another
rule.
.button {
background-color: $color-main;
f...
@extend
.button-checkout {
@extend .button;
background-color: darken($color-main, 20%);
.msg & {
@extend .button;
backgrou...
Placeholder Selectors: %foo
// This ruleset won't be rendered on its own.
%button {
color: blue;
font-weight: bold;
font-s...
%placeholder
placeholder selectors will not be rendered to CSS.
%button {
background-color: $color-main;
font-weight: bold...
@mixin
Man, tell me the cool things!
Mixins
Are code snippets (reusable elements)
Parameterizable (use reasonable defaults)
@mixin border-radius($value) {
-web...
Mixins
compiled to
.box {
color: blue;
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
-webkit-border-radius:...
Mixins
Defaults and named arguments
@mixin link-colors($text:blue, $hover:red) {
color: $text;
&:hover { color: $hover; }
...
Mixins
SCSS
@mixin my-btn($color) {
color: $color;
}
@include my-btn(red);

SCSS

Sass
=my-btn($color)
color: $color
+my-b...
Using @content
@mixin ie6 {
* html & {
@content;
}
}
.m-login {
float: right;
@include ie6 {
display: inline;
}
}

.m-logi...
Functions
Functions
Operators
Relational operators (<, >, <=, >=) evaluate numbers
1 < 20 // true
10 <= 20 // true
4 > 1 // true
4 >...
Functions
Control Directives
@if
@for
@each
@while
$theme: ocean;
div {
@if $theme == dusty {
background: #c6bba9;
color: ...
Functions
@for loop
@for $level from 0 to 5 {
.tag-#{$level + 1} {
font-size: .7em + ($level * .5em);
}
}

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

SCSS

Function ...
Media-Queries with Sass
Variables in queries
use main breakpoints as variables
$break-small: 320px;
$break-large: 1200px;
.profile-pic {
float: le...
Mixin for different media queries using @content
SCSS

$break-small: 320px;
$break-large: 1200px;
@mixin respond-to($media...
Mixin for different media queries using @content
Usage
// profile picture module
.profile-pic {
float: left;
width: 250px;...
Mixin for different media queries using @content
CSS output sample
.profile-pic {
float: left;
width: 250px;
}
@media only...
mobile first and IE8
Sass-IE
Writing mobile-first styles without leaving IE < 9 behind
Media Query Mixin:
// all.scss
$fix-mqs: false !default;...
Sass-IE
OldIE Mixin:
// all.scss
$old-ie: false !default;
@mixin old-ie {
// Only use this content if we're dealing with o...
Including the Sass-IE CSS
To give the CSS to the browsers, use good old conditional comments:
<!--[if lte IE 8]>
<link rel...
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 mix...
Compass Plugins
Github List of Compass Plugins
loading Compass plugins
add to the config.rb
# config.rb
...
require 'compa...
RGBAPNG Plugin
Compass plugin for providing cross-browser compatible RGBA support
by creating transparent PNGs on the fly ...
Compass plugins
Responsive Grid Plugin – Susy
$ sudo gem install compass-susy-plugin
$ compass create myproject -r susy -u...
Susy Usage
SCSS

@import "susy";
// global variables
$total-columns: 12;
$column-width: 4em;
$gutter-width: 1em;
$grid-pad...
Susy Usage
.page {
// page acts as a container for our grid.
@include container;
// header and footer are full-width by de...
Compass plugins
Responsive Grid Plugin – Singularity – Grids without limits
$ sudo gem install singularitygs
$ compass cre...
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);
SCSS

// Span 1 column, starting at the 2nd column
.span1-pos2 {
@...
Easy 12 column grid
$grids: 12;
$gutters: 12px;
$gutter-styles: 'split' 'fixed';
$output: 'float';
@for $i from 1 through ...
Compass plugins
simple media queries Sass plugin – Breakpoint
$ gem install breakpoint

Add plugin to projects
# config.rb...
Breakpoint plugin usage
// basic media queries, min-width and min/max width
$basic: 543px;
$pair: 456px 794px;
.foo {
cont...
Breakpoint plugin CSS output
/* Nested Breakpoint calls become separate media queries */
.foo {
content: 'No Media Queries...
Breakpoint Media Types
$breakpoint-to-ems: true;
$media: 'screen' 700px;
#foo {
@include breakpoint($media) {
content: 'Me...
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 slidesho...
Upcoming SlideShare
Loading in...5
×

Fasten RWD Development with Sass

2,511

Published on

A short Sass introduction and how Sass can help developing responsive webdesign faster

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,511
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
31
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Fasten RWD Development with Sass

  1. 1. Fasten RWD Development with Sass Sven Wolfermann | maddesigns
  2. 2. 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
  3. 3. CSS IS AWESOME
  4. 4. old new http://sass-lang.com/
  5. 5. What is Sass? Sass means syntactically awesome style sheets is a preprocessor Similar preprocessors: LESS, Stylus (needs JS, i.e. a node.js server
  6. 6. 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
  7. 7. Installing Sass $ sudo gem install sass install beta version: $ sudo gem install sass --pre already installed Sass? check with $ sass --version
  8. 8. Create your first Sass (SCSS) file create a sass folder create styles.scss open in your favourite editor* * Sublime Text 2
  9. 9. Wait? What is the SCSS-thingy?
  10. 10. 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.
  11. 11. SCSS section { margin: 1em 0; header { background-color: lightpink; } } Sass section margin: 1em 0 header background-color: lightpink
  12. 12. 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
  13. 13. 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
  14. 14. 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; }
  15. 15. Compiling output styles :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; }
  16. 16. Compiling output styles :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 { border-bottom: 2px solid black; color: #ff8700; margin: 0 0 0.5em; }
  17. 17. 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; }
  18. 18. 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" }
  19. 19. Variables
  20. 20. 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
  21. 21. 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
  22. 22. 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
  23. 23. Nesting
  24. 24. 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;}
  25. 25. Nesting SCSS nav { float: right; li { float: left; a { color: #666; &:hover { color: #333; } } &.current { font-weight: bold; } } } SCSS
  26. 26. 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
  27. 27. Nesting HOW DEEP CAN I GO? Sass nesting != HTML nesting be careful with nesting! you can run into performance issues with long selectors
  28. 28. Combining Selectors
  29. 29. 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; }
  30. 30. 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
  31. 31. Parent Selector - the ampersand a { &:hover, &:focus { color: black } } a:hover, a:focus { color: black; } SCSS
  32. 32. 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; } } div { box-shadow: 0 0 5px rgba(#000, 0.8); } .no-boxshadow div { border: 1px solid #555; } SCSS
  33. 33. Parent Selector - the ampersand div { .parent & .child { color: black } } .parent div .child { color: black; } SCSS
  34. 34. Parent Selector - the ampersand @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
  35. 35. 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
  36. 36. Importing Files
  37. 37. 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
  38. 38. 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
  39. 39. 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
  40. 40. 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
  41. 41. @extend
  42. 42. @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
  43. 43. @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; } SCSS
  44. 44. 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
  45. 45. %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; } SCSS
  46. 46. @mixin Man, tell me the cool things!
  47. 47. 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
  48. 48. 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
  49. 49. 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
  50. 50. Mixins SCSS @mixin my-btn($color) { color: $color; } @include my-btn(red); SCSS Sass =my-btn($color) color: $color +my-btn(red) SCSS
  51. 51. Using @content @mixin ie6 { * html & { @content; } } .m-login { float: right; @include ie6 { display: inline; } } .m-login { float: right; } * html .m-login { display: inline; } SCSS
  52. 52. Functions
  53. 53. 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
  54. 54. 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
  55. 55. 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
  56. 56. 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
  57. 57. Media-Queries with Sass
  58. 58. 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
  59. 59. 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) {
  60. 60. 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
  61. 61. 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; } }
  62. 62. mobile first and IE8
  63. 63. 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
  64. 64. 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';
  65. 65. 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]-->
  66. 66. http://compass-style.org/
  67. 67. 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
  68. 68. Compass Plugins Github List of Compass Plugins loading Compass plugins add to the config.rb # config.rb ... require 'compassplugin' @import 'compassplugin'; SCSS
  69. 69. 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
  70. 70. 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"
  71. 71. 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
  72. 72. 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); } } }
  73. 73. 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';
  74. 74. Symmetric Grids - Twitter Bootstrap $grids: 12; $gutters: 1/3; Responsive Grids by @snugug
  75. 75. Symmetric Grids - Zurb Foundation $grids: 12; $gutters: 0.9375em; $gutter-style: split; Responsive Grids by @snugug
  76. 76. Asymetric Grids with Singularity $grids: 1 4 1; $gutters: 1/6; $gutter-style: split; Responsive Grids by @snugug
  77. 77. 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 { @include grid-span(3, 3); } // Span 5 columns, starting at the 7th column .span5-pos7 { @include grid-span(5, 7); }
  78. 78. 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
  79. 79. Compass plugins simple media queries Sass plugin – Breakpoint $ gem install breakpoint Add plugin to projects # config.rb require "breakpoint" // main.scss @import "breakpoint"; SCSS
  80. 80. 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
  81. 81. 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'; } }
  82. 82. 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
  83. 83. Team Sass on Github lot of Sass goodies · Singularity · Breakpoint · Toolkit · … https://github.com/Team-Sass
  84. 84. Questions? Thanks for your attention! Sven Wolfermann | maddesigns http://maddesigns.de/rwd-sass-compass/ HTML5 slideshow by Google
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×