Sass & Compass:  Never Write  Regular CSS Again

© Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.
SASS & COMPASS:
NEVER WRITE
REGULAR CSS AGAIN
by Trevor Davis at RefreshDC on July , 

View Slide

@trevor_davis
HI! I’M
I work as a Front-End Developer at Viget.
TREVOR DAVIS

View Slide

I. What are Sass & Compass
II. How to install
III. How to get started
IV. Sass Syntax
V. Compass Features
WHAT WE WILL COVER

View Slide

A QUICK MESSAGE
ABOUT OTHER CSS
“GENERATORS”

View Slide

I WAS INITIALLY VERY
OPPOSED TO SASS

View Slide

arrestedstills.tumblr.com
CREDITS
I’VE MADE A HUGE MISTAKE.

View Slide

WHAT ARE
SASS & COMPASS

View Slide

‎ Ruby gems
‎ Sass is a CSS preprocessor
‎ Compass is a framework that uses Sass
‎ Generates regular CSS ﬁles
WHAT ARE SASS & COMPASS

View Slide

HOW DO
THEY WORK

View Slide

‎ "Watch" for changes to a ﬁle or folder
‎ If anything changes, regenerates new CSS ﬁle(s)
HOW DO THEY WORK

View Slide

HOW TO INSTALL

View Slide

‎ As long as your system has Ruby installed, very
simple:
gem install sass
gem install compass
HOW TO INSTALL

View Slide

HOW TO
GET STARTED

View Slide

‎ Almost no reason to not use Sass on every
project that requires CSS.
‎ Almost no reason to use Sass and not Compass.
Compass adds additional functionality without
any downside.
‎ Rails project vs non-rails project
HOW TO GET STARTED

View Slide

STANDALONE
PROJECTS

View Slide

‎ compass create
‎ Creates all the ﬁles and folders you need
‎ conﬁg.rb
‎ sass
‎ stylesheets
STANDALONE PROJECTS

View Slide

# conﬁg.rb
http_path = "/"
css_dir = "stylesheets/"
sass_dir = "compile/sass"
images_dir = "images/"

View Slide

‎ Create a sass or scss file in your sass_dir.
‎ compass watch on the command line
‎ Add CSS to this file, and it will auto generate a
CSS file in your css_dir
STANDALONE PROJECTS

View Slide

LIVERELOAD

View Slide

CODEKIT

View Slide

SASS SYNTAX

View Slide

Sass has two syntaxes. The new main syntax (as of
Sass 3) is known as “SCSS” (for “Sassy CSS”), and is
a superset of CSS3’s syntax. This means that every
valid CSS3 stylesheet is valid SCSS as well. SCSS
ﬁles use the extension .scss.

View Slide

The second, older syntax is known as the indented
syntax (or just “Sass”). Inspired by Haml’s terseness,
it’s intended for people who prefer conciseness over
similarity to CSS. Instead of brackets and
semicolons, it uses the indentation of lines to
specify blocks. Although no longer the primary
syntax, the indented syntax will continue to be
supported. Files in the indented syntax use the
extension .sass.

View Slide

NESTING

View Slide

‎ I used to hate nesting, but I have learned to really
love it.
‎ It's not something you HAVE to use.
‎ Be careful that you don't go too far because the
code can get sloppy and hard to read.
NESTING

View Slide

.nav 
background: #000;
li 
ﬂoat: left;

a 
color: #ﬀf;



View Slide

.nav {
background: #000;
}
.nav li {
ﬂoat: left;
}
.nav a {
color: #ﬀf;
}

View Slide

WITH GREAT POWER
COMES GREAT
RESPONSIBILITY.

View Slide

.nav {
ul {
li {
a {
span {
color: #ﬀf
}
}
}
}
}

View Slide

.nav ul li a span {
color: white;
}

View Slide

PARENT
REFERENCES

View Slide

a {
color: red;
&:hover {
color: blue;
text-decoration: underline;
}
}

View Slide

a {
color: red;
}
a:hover {
color: blue;
text-decoration: underline;
}

View Slide

img {
display: block;
.lte7 & {
-ms-interpolation-mode: bicubic;
}
}

View Slide

img {
display: block;
}
.lte7 img {
-ms-interpolation-mode: bicubic;
}

View Slide

VARIABLES

View Slide

$linkColor: #ce4dd6;
a {
color: $linkColor;
}

View Slide

a {
color: #ce4dd6;
}

View Slide

$side: top;
.bordered-#{$side} {
border-#{$side}: 1px solid green;
}

View Slide

.bordered-top {
border-top: 1px solid green;
}

View Slide

OPERATIONS

View Slide

‎ The standard math operations (+, -, *, /, and %)
are supported for numbers, even those with
units.
‎ For colors, there are all sorts of useful functions
for changing the lightness, hue, saturation, and
more.
OPERATIONS

View Slide

$col: 100px;
.main {
width: $col * 6;
}

View Slide

.main {
width: 600px;
}

View Slide

.box {
background: rgba(#000, 0.5);
}

View Slide

.box {
background: rgba(0, 0, 0, 0.5);
}

View Slide

a {
color: #000;
&:hover {
color: lighten(#000, 30%);
}
}

View Slide

a {
color: #000;
}
a:hover {
color: #4d4d4d;
}

View Slide

MIXINS

View Slide

‎ Functions
‎ Reuse styles without having to duplicate.
‎ Make your code DRY.
MIXINS

View Slide

@mixin box-highlight() {
background: green;
border: 1px solid red;
padding: 20px;
width: 100%;
}
.call-out {
@include box-highlight();
color: yellow;
}
.special-box {
@include box-highlight();
}

View Slide

.call-out {
background: green;
padding: 20px;
width: 100%;
color: yellow;
}
.special-box {
background: green;
padding: 20px;
width: 100%;
}

View Slide

@mixin section($background: #000, $color: #ﬀf, $radius: 10px) {
background: $background;
border-radius: $radius;
color: $color;
padding: 20px;
}
.section-1 {
@include section();
}
.section-2 {
@include section(#cecece, #000, 5px);
}

View Slide

.section-1 {
background: black;
border-radius: 10px;
color: white;
padding: 20px;
}
.section-2 {
background: #cecece;
border-radius: 5px;
color: black;
padding: 20px;
}

View Slide

@mixin shadowed() {
overﬂow: hidden;
position: relative;
h2 {
font-size: 36px;
}
&:before {
box-shadow: 0 0 10px rgba(#000, 0.5);
content: "";
height: 20px;
left: 10px;
position: absolute;
right: 10px;
top: -20px;
}
}
.section {
@include shadowed();
}

View Slide

.section {
overﬂow: hidden;
position: relative;
}
.section h2 {
font-size: 36px;
}
.section:before {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
content: "";
height: 20px;
left: 10px;
position: absolute;
right: 10px;
top: -20px;
}

View Slide

@mixin respond-to($media) {
@if $media == small-and-under {
@media only screen and (max-width: 479px) { @content; }
}
@else if $media == medium {
@media only screen and (min-width: 480px) and (max-width: 767px) { @content; }
}
@else if $media == full {
@media only screen and (min-width: 1000px) { @content; }
}
}
.some-thing {
width: 800px;
@include respond-to(medium) {
width: 100%;
}
}

View Slide

.some-thing {
width: 800px;
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
.some-thing {
width: 100%;
}
}

View Slide

EXTEND

View Slide

‎ Kinda like mixins, but also kinda not.
‎ Replacement for mixins with no parameters.
‎ Extend only works for single elements
‎ Not possible: @extend .nav a
EXTEND

View Slide

.box-highlight {
background: green;
padding: 20px;
width: 100%;
}
.highlight {
@extend .box-highlight;
color: yellow;
}
.another-highlight {
@extend .box-highlight;
}

View Slide

.box-highlight, .highlight, .another-highlight {
background: green;
padding: 20px;
width: 100%;
}
.highlight {
color: yellow;
}

View Slide

“SILENT” EXTENDS

View Slide

%font-georgia {
color: #666;
font-family: Georgia;
font-style: italic;
}
.heading {
@extend %font-georgia;
}
.footnote {
@extend %font-georgia;
font-style: normal;
}

View Slide

.heading, .footnote {
color: #666;
font-family: Georgia;
font-style: italic;
}
.footnote {
font-style: normal;
}

View Slide

LOOPS

View Slide

$col: 100px;
$gutter: 20px;
@for $i from 1 through 5 {
.span-#{$i} {
width: ($i * $col) + ($gutter * ($i - 1));
}
}

View Slide

.span-1 {
width: 100px;
}
.span-2 {
width: 220px;
}
.span-3 {
width: 340px;
}
.span-4 {
width: 460px;
}
.span-5 {
width: 580px;
}

View Slide

@each $service in twitter, facebook, linkedin, ﬂickr {
.#{$service} {
background-image: url(/images/icons/#{$service}.png);
}
}

View Slide

.twitter {
background-image: url(/images/icons/twitter.png);
}
.facebook {
background-image: url(/images/icons/facebook.png);
}
.linkedin {
background-image: url(/images/icons/linkedin.png);
}
.ﬂickr {
background-image: url(/images/icons/ﬂickr.png);
}

View Slide

IMPORT

View Slide

‎ Break your css into multiple ﬁles
‎ Sass combines into a single ﬁle
‎ No extra HTTP requests
IMPORT

View Slide

# _forms.scss
input {
background: #dedede;
border: 1px solid #000;
}

View Slide

# _buttons.scss
button {
background: #000;
color: #ﬀf;
padding: 5px 10px;
text-transform: uppercase;
}

View Slide

# all.scss
@import "forms";
@import "buttons";

View Slide

# all.css
input {
background: #dedede;
border: 1px solid #000;
}
button {
background: #000;
color: #ﬀf;
padding: 5px 10px;
text-transform: uppercase;
}

View Slide

COMPASS FEATURES

View Slide

‎ Compass gives you a whole bunch of prebuilt
mixins to use.
‎ Import all of the CSS3 mixins
‎ @import "compass/css3";
‎ Then you can use those mixins just like you
would any other mixin.
COMPASS FEATURES

View Slide

BUILT-IN MIXINS

View Slide

.rounded-box {
@include border-radius(10px);
}

View Slide

.rounded-box {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
}

View Slide

.gradient {
@include background-image(linear-gradient(#ﬀf, #ccc));
}

View Slide

.gradient {
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%,
color-stop(0%, #ffff ), color-stop(100%, #cccccc));
background-image: -webkit-linear-gradient(#ffffff, #cccccc);
background-image: -moz-linear-gradient(#ffffff, #cccccc);
background-image: -o-linear-gradient(#ffffff, #cccccc);
background-image: -ms-linear-gradient(#ffffff, #cccccc);
background-image: linear-gradient(#ffffff, #cccccc);
}

View Slide

.rotate-me {
@include rotate(30deg);
}

View Slide

.rotate-me {
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
}

View Slide

.three-columns {
@include column-count(3);
@include column-rule(1px dotted #000);
}

View Slide

.three-columns {
-webkit-column-count: 3;
-moz-column-count: 3;
-o-column-count: 3;
column-count: 3;
-webkit-column-rule: 1px dotted black;
-moz-column-rule: 1px dotted black;
-o-column-rule: 1px dotted black;
column-rule: 1px dotted black;
}

View Slide

.transition-me {
background: red;
@include transition(background 0.5s ease-in-out);
&:hover {
background: green;
}
}

View Slide

.transition-me {
background: red;
-webkit-transition: background 0.5s ease-in-out;
-moz-transition: background 0.5s ease-in-out;
-ms-transition: background 0.5s ease-in-out;
-o-transition: background 0.5s ease-in-out;
transition: background 0.5s ease-in-out;
}
.transition-me:hover {
background: green;
}

View Slide

‎ box-shadow
‎ font-face
‎ background-size
‎ and many more!
‎ compass-style.org/reference/compass/css3/
MANY MORE MIXINS

View Slide

SPRITING

View Slide

‎ Compass can automatically combine images,
create sprites, and update your CSS.
‎ It's pretty amazing.
SPRITING

View Slide

$icons-spacing: 20px;
@import "icons/*.png";
.twitter
@include icons-sprite(twitter);
}
.facebook
@include icons-sprite(facebook);
}
.linkedin
@include icons-sprite(linkedin);
}
.ﬂickr
@include icons-sprite(ﬂickr);
}

View Slide

.#{$service} {
@include icons-sprite(#{$service});
}
}

View Slide

.icons-sprite, .twitter, .facebook, .linkedin, .ﬂickr {
background: url('/images/icons-s589c2b097f.png') no-repeat;
}
.twitter {
background-position: 0 -75px;
}
.facebook {
}
.linkedin {
background-position: 0 0;
}
.ﬂickr {
}

View Slide

.#{$service} {
@include icons-sprite(#{$service}, $oﬀset-x: 10px, $oﬀset-y: 10px);
}
}

View Slide

.twitter {
background-position: 10px -65px;
}
.facebook {
}
.linkedin {
background-position: 10px 10px;
}
.ﬂickr {
}

View Slide

DEMO TIME
CREDITS arrestedstills.tumblr.com

View Slide

Sass: sass-lang.com
Compass: compass-style.org
Github Repo: git.io/5piz6Q
LiveReload: livereload.com
Codekit: incident57.com/codekit
web: trevordavis.net
twitter: @trevor_davis
Thanks!
Let’s Connect
Resources

View Slide

Sass & Compass:  Never Write  Regular CSS Again

Sass & Compass:  Never Write  Regular CSS Again

Trevor Davis

More Decks by Trevor Davis

Other Decks in Technology

Featured

Transcript

Sass & Compass: Never Write Regular CSS Again

Sass & Compass: Never Write Regular CSS Again

Trevor Davis

More Decks by Trevor Davis

Other Decks in Technology

Featured

Transcript

Sass & Compass:  Never Write  Regular CSS Again

Sass & Compass:  Never Write  Regular CSS Again