Managing responsive websites with css preprocessors.

Design responsive sites using
CSS 3 preprocessors
SASS, Compass, Less
Brad Rice
Web Designer, The University of Akron

CSS preprocessor
{
.scss
}
{
.css
}

SCSS @import
@import "grids";
@import "webfonts";
@import "compass";
@import "variables";
@import "mixins";
@import "objects";
filename: _grids.scss

SCSS @import
@import "tablet";
@import "desktop";
@import "large";
@import "huge";
Use media queries at the bottom of main the sass file

Compiling SASS
From command line:
sass style.scss - prints to screen
sass style.scss ../css/style.css – prints to file
sass –-watch style.scss ../css/style.css – watches file for changes
with compass: compass watch – watches entire scss directory
uses a config.rb file for configuration of where to save file changes

Basics of Sass
Mixins
Similar sets of properties used
multiple times with small
variations
Extend
Sets of properties that
match exactly
Functions
Commonly used operations
to determine value
Variables
$basesize: 12px;
$primary-color: #00285e;
Nesting
Sass adds the ability to nest
selectors in ways you can't
do in css
Built in Functions
Sass provides it's own set of
functions
darken($primary-color, 10%)

$background-color: #ffe4c4;
$primary-color: #a52a2a;
$secondary-color: #b8860b;
$h1-size: 2.2em;
h1, h2, h3 {
color: $primary-color;
}
h1 {
font-size: $h1-size;
}
compiled css
h1, h2, h3 {
color: #a52a2a;
}
h1 {
font-size: 2.2em;
}
Variables

a {
color: #6495ed;
&:hover {
color: darken(#6495ed, 10%);
}
&:visited {
}
}
compiled css
a {
color: #6495ed;
}
a:hover {
color: #3676e8;
}
a:visited {
color: #092049;
}
Nesting & selector

@mixin text-block($f-size: 1.5em,
$l-height: 140%, $m-top: .5em,
$m-bottom: .5em) {
margin-bottom: $m-bottom;
margin-top: $m-top;
font-size: $f-size;
line-height: $l-height;
}
.test {
@include text-block;
}
compiled css
.test {
margin-bottom: .5em;
margin-top: .5em;
font-size: 1.5em;
line-height: 140%;
}
Mixins

body.test a {
color: #6495ed;
&:hover {
}
&:visited {
}
}
compiled css
body.test a {
color: #6495ed;
}
body.test a:hover {
color: #3676e8;
}
body.test a:visited {
color: #092049;
}
Use nesting to namespace

.btn-a {
background: #777;
border: 1px solid black;
font-size: 1em;
}
.btn-b {
@extend .btn-a;
background: #ff0;
}
compiled css
.btn-a, .btn-b {
background: #777;
border: 1px solid black;
font-size: 1em;
}
.btn-b {
background: #ff0;
}
Extend

@if theme == 'dark' {
background: #000;
} @else {
background: #fff;
}
@each $item in $items { <styles> }
.item {
@for $i from 1 through 3 {
&.item-#{$i} {
top: $i + 30px;
}
}
}
Also: @while < 4 { }
Directives
@elseif
@if
@each
@while,
@for
@function

When to use
Mixins
Similar sets of properties used
multiple times with small
variations
Extend
Sets of properties that
match exactly
Functions
Commonly used operations
to determine value

Operators
Mixins
+ Addition
- Subtraction
* Multiplication
/ Division
% Remainder
Equality
== Equal to
!= Not equal to
String
font: Arial + " sans-serif";
Comparison
and x and y true if both x and y are true
or x or y true if either x or y is true
not x true if x is not true

Compass http://compass-style.org/
@import 'compass';
@import 'compass/reset';
html {
@include box-sizing;
}
body {
font-size: 100%;
}
compiled css
.. reset stuff
html {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-size: 100%;
}

Media Queries
@mixin respond-to($width){
@media (min-width: $width){
@content;
}
}
div.main {
border: 1px solid #000;
@include respond-to(750px){
float: left;
width: 75%;
}
}
compiled css
div.main {
border: 1px solid #000;
}
@media (min-width: 750px) {
div.main {
float: left;
width: 75%;
}
}

Breakpoint
http://breakpoint-sass.com/
$high-tide: 500px;
.johnny-utah {
@include breakpoint($high-tide) {
content: 'Whoa.';
}
}
compiled css
@media (min-width: 500px) {
.johnny-utah {
content: 'Whoa.';
}
}

Let's code – Vinyl vintage website
David Bowie Grateful DeadFocus
Genesis Talking HeadsTodd
Rundgren
Logo

Sass/Compass productivity
• Sass and Compass team up for maximum productivity and help you accomplish browser
compatibility
• Susy allows you to create your own grid layouts
• Bootstrap or Foundation are more complete css frameworks that help you style large sites
with lots of configurations
• SassMeister.com allows you to play with sass and evaluate frameworks that will best suit your
application
Foundation sass: http://foundation.zurb.com/docs/sass.html
Bootstrap sass: http://getbootstrap.com/getting-started/#download

Less
• Less is javascript based, so requires node.js and npm to install and run
• Less.js can be a client side processor for times you want runtime generation of css
• Less syntax is not very different from Sass. The main issue is using @ for variables instead of $

Tools for the "No command line" types
• Codekit (mac): https://incident57.com/codekit/index.html
• Cactus (mac): http://cactusformac.com/
• Mixture: http://mixture.io/
• Webstorm: https://www.jetbrains.com/webstorm/
• Scout: http://mhs.github.io/scout-app/
• Prepos: https://prepros.io/

Resources and contact info
• bradrice.com/blog
• Sass resources – http://www.bradrice.com/sass-resources
• Less resources - http://www.bradrice.com/less-resources
• Github repo - https://github.com/bradrice/vinyl
• Github repo for webstart - https://github.com/bradrice/webstart
• Twitter: @brad_rice
• Email: brad@bradrice.com

Managing responsive websites with css preprocessors.

More Related Content

What's hot

Viewers also liked

Similar to Managing responsive websites with css preprocessors.

Recently uploaded

Managing responsive websites with css preprocessors.

Editor's Notes