A BRIEF HISTORY
OF SASS
• June 30th 2006 'Hampton Catlin'
1st commit for HAML on Github
• Dec 3rd 2006 'Nathan
Weizenbaum' began to commit
to Sass
• Aug 23, 2008 'Chris Eppstein' 1st
Compass commit on Github
• Aug 31, 2011 Rails 3.1 comes
configured with Sass
Slide 3
Slide 3 text
SASS IS NOT
EXCLUSIVE TO RAILS!
Slide 4
Slide 4 text
INSTALLING SASS
Starting with the Command Line versions
Slide 5
Slide 5 text
COMMAND LINE
$ gem install sass
Sass is dependent on Ruby. If you are
on a Mac, Ruby is already installed. For
Unix or Windows users, installing Ruby
is a prerequisite.
Slide 6
Slide 6 text
COMMAND LINE
$ gem install sass
$ gem install compass
If you want to use Compass, like Sass,
Compass is dependent on Ruby. Although
the installer states that installing Compass
includes Sass, I like to just make sure :D
Slide 7
Slide 7 text
INSTALLING SASS
The GUI
Slide 8
Slide 8 text
GUI APPS
http://compass.handlino.com/
• Works in mac, linux
and pc
• Built-in Web server
• LiveReload support
• Compass extensions
support
$10
donation ware
Slide 9
Slide 9 text
GUI APPS
http://mhs.github.com/scout-app/
• Works in mac and pc
• Built-in Web server
• Compass support
free
GUI APPS
http://livereload.com/
LiveReload monitors changes
in the file system. As soon as
you save a file, it is
preprocessed as needed, and
the browser is refreshed.
LiveReload
Slide 12
Slide 12 text
CODE HINTING,
COLOR CODE
Slide 13
Slide 13 text
EDITOR SUPPORT
Various text editors have various
levels of support for Sass. Here’s a
list of all of them that I know of.
http://sass-lang.com/editors.html
Slide 14
Slide 14 text
IT’S TIME FOR
YOUR FIRST
PROCESSED STYLESHEET
Slide 15
Slide 15 text
SASS
We’ll start out
making a very
simple directory
structure.
Inside the ‘sass’
directory, let’s crate
‘core.scss’
Last we will point
the sass --watch
command at these
directories.
$ sass --watch sass:style
Slide 16
Slide 16 text
SCOUT
Scout requires the
manual folder set up
like using Sass, but
has a simple UI for
choosing the folder
to watch and the
folder to process to.
Slide 17
Slide 17 text
SCOUT
Create project file
Create Sass directory
Create Style directory
Open Scout
Click [+] to add new project
Select Sass directory
Select Style directory
Slide 18
Slide 18 text
LIVE RELOAD
LiveReload requires
the manual folder
set up like using
Sass, but has a
simple UI for
choosing the folder
to watch and the
folder to process to.
Slide 19
Slide 19 text
WHAT ABOUT COMPASS?
"Where Sass left
off, Compass
goes to the next
level."
— Nathan Smith in
Sass for Designers
Slide 20
Slide 20 text
COMPASS
$ cd [dir_loc]
$ compass create my_project
$ cd my_project
$ compass watch
Slide 21
Slide 21 text
COMPASS.APP
Compass.app is a GUI app that
comes with Ruby, Sass and
Compass installed.
Creating a new project is the
same as using the command line
with Compass itself.
Slide 22
Slide 22 text
COMPASS.APP
Launch app
create > compass > project
Choose location for new
project folder
Slide 23
Slide 23 text
LET’S TALK ABOUT
SASS
Slide 24
Slide 24 text
SASS & SCSS
• Sass is the language and the original syntax
• The Sass syntax uses indentation (white space)
to indicate nesting of selectors and new lines
• SCSS is an extension of the standard CSS syntax
• Simply update .css to .scss and you are running!
• SCSS is a syntax of the Sass language
• SCSS uses brackets and semicolons to separate
properties and new lines
Slide 25
Slide 25 text
NESTING
.your_new_class {
! background: orange;
! p {
! ! font: {
! ! weight: bold;
! ! size: 14px;
! ! family: arial;
! ! }
! }
}
In SCSS each new open
bracket declares a
parent child
relationship between
selectors.
As well, semicolons
separate properties.
But be mindful of the
Inception Rule: don’t go
more than four levels
deep.
Good CSS habits go far.
NESTING
.your_new_class {
background: orange;
p {
font: {
weight: bold;
size: 14px;
family: arial;
}
}
}
Just to be clear ... this will
work as well.
It is the brackets and
semicolons that delineate
parent relationships and
properties.
This is how you can
update a .CSS file to .SCSS
and it works.
But ... hard as hell to read.
scss
Slide 28
Slide 28 text
PARENT REFERENCES
a {
! color: red;
! text-decoration: none;
! &:hover {
! ! text-decoration: underline;
! }
}
What about
pseudoclasses,
like :hover?
You just need to use
the Sass special
character ‘&’. In a
selector, ‘&’ will be
replaced verbatim with
the parent selector.
PARENT REFERENCES
button {
! background: grey;
! border: 1px solid black;
! border-radius: 5px;
! &.fail {
! ! color: red;
! ! border-color: red;
! }
}
The Sass special
character ‘&’ is the
gift that keeps
giving.
Let’s say that you
need to chain two
selectors together?
Like button.fail, yup
we can do that.
PARENT REFERENCES
.box {
! box-sizing: border-box;
! width: 800px;
! padding: 30px;
! border: 1px solid black;
! .ie7 & {
! ! width: 738px;
! }
}
What about
Modernizer support?
What if you needed a
fallback for CSS
Gradients or want a
different effect for
text-shadows?
Or what about
supporting IE?
No worries, Sass has
you covered.
PARENT REFERENCES
.box {
! width: 800px;
! @media screen and (-webkit-
device-pixel-ratio: 2) {
! ! width: 97%;
! }
}
Media queries got
you down?
What if you could
define a selector
and then apply the
mobile version right
there? Well, in Sass
you can do just that.
VARIABLES
$main-color: #ce4dd6;
$style: solid;
#navbar {
border: {
bottom: {
color: $main-color;
style: $style;
}
}
}
If you need to write it
twice, then you are
doing it wrong.
As with other
languages, and unlike
CSS, Sass allows for
variables.
MIXINS W/ARGUMENTS
@mixin border_radius($radius:
5px) {
border-radius: $radius;
-moz-border-radius: $radius;
-webkit-border-radius: $radius;
}
.my_new_class {
! @include border_radius(3px
3px 0 0);
}
The real power of
mixins comes when
you pass them
arguments.
Arguments are
declared as a
parenthesized,
comma-separated
list of variables.
Each of those
variables is assigned
a value each time
the mixin is used.
@IMPORT
// Config file dependencies
// -------------------------------
@import "config";
@import "button_config";
@import "design_config";
In CSS @import
sucks. Each request is
another http request
and it is sloooooow.
In Sass, @import
pulls the code in at
time of processing.
Using partials helps
to create Sass
modules for efficient
coding practices.
Slide 43
Slide 43 text
LET’S WRAP THIS UP!
Slide 44
Slide 44 text
BUY THE BOOKS
‘sass40’
40% off early access book
http://www.manning.com/
netherland/
http://pragprog.com/book/
pg_sass/pragmatic-guide-to-sass
Slide 45
Slide 45 text
THESASSWAY.COM
Slide 46
Slide 46 text
RATE THE SPEAKER
You don’t win anything, but
it helps me to get better at this ;)
http://speakerrate.com/speakers/15438
Slide 47
Slide 47 text
DOWNLOAD THE DECK
http://speakerdeck.com/u/anotheruiguy/p/sass-for-noobs