Managing responsive websites with css preprocessors presented at Penn State Webconference Tuesday June 23, 2015. Sass and Less preprocessors simplify managing css for responsive websites.

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

3. Default viewport is 960px

4. <meta name="viewport"
content="width=device-width,
initial-scale=1.0">

5. <style media="screen" type="text/css">
@import url(/global/css/reset-min.css);
@import url(/global/css/grids-min.css);
@import url(/global/css/base-min.css);
@import url(/global/css/template.css);
@import url(/global/css/sections.css);
@import url(/global/css/navigation.css);
@import url(/global/css/scrollable_widget.css);
@import url(/global/js/tipTipv13/tipTip.css);
</style>
<link rel="stylesheet" type="text/css" href="/global/css/print.css" media="print" />
<link rel="stylesheet" type="text/css" href="/global/css/ie.css media="screen" />
<link rel="stylesheet" type="text/css" href="/global/css/site.css media="screen" />
http requests

6. <link rel="stylesheet"
href="//share.uakron.edu/global/includes/css/bootstrap.min.css" />
<link rel="stylesheet"
href="//share.uakron.edu/global/includes/css/main.css?d=20150421100248" />
<link rel="stylesheet" href="//share.uakron.edu/global/includes/css/print.css"
media="print" />
minimized requests

7. CSS preprocessor
{
.scss
}
{
.css
}

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

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

10. 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

11. Compiling SASS using Compass

12. 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%)

13. $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

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

15. @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

16. body.test a {
color: #6495ed;
&:hover {
color: darken(#6495ed, 10%);
}
&:visited {
color: darken(#6495ed, 50%);
}
}
compiled css
body.test a {
color: #6495ed;
}
body.test a:hover {
color: #3676e8;
}
body.test a:visited {
color: #092049;
}
Use nesting to namespace

17. .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

18. @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

19. 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

20. 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

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

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

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

24. Working setup

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

26. 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

27. 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 $

28. 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/

29. 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