From the CSS Processor Madness meetup event: http://www.meetup.com/socalwdd/events/66952482/ by Charles Mata

1. Getting Started with
SCSS and Bootstrap

2. Why we chose SCSS and Bootstrap
● CSS is valid SCSS, making the transition
from one to the other very smooth.
● Bootstrap offers a solid start to both basic
and responsive websites
○ Need to support mobile traffic, including
tablets of varying resolutions
● Cross browser compatible
● UI elements are uniformly styled

3. Prerequisites / What to Download
Download and unzip Twitter Bootstrap's default package
and latest version of jQuery
http://twitter.github.com/bootstrap
http://www.jquery.com
If you don't have ruby and ruby gems installed, become
friends with the person closest to you who does have the
tools installed and who smells nice.
Or just follow along on-screen.
$> gem install sass

4. What we'll be doing
● Using Bootstrap as a reset / base stylesheet
● Using SCSS to write our own custom styles
on top of Bootstrap
○ Variables
○ Mix-ins

5. Thank you
Thanks to all for joining this event with Oversee.net and the
Southern California Web Designers and Developers!
oooo$$$$$$$$$$$$oooo
oo$$$$$$$$$$$$$$$$$$$$$$$$o
oo$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$o o$ $$ o$
o $ oo o$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$o $$ $$ $$o$
oo $ $ "$ o$$$$$$$$$ $$$$$$$$$$$$$ $$$$$$$$$o $$$o$$o$
"$$$$$$o$ o$$$$$$$$$ $$$$$$$$$$$ $$$$$$$$$$o $$$$$$$$
$$$$$$$ $$$$$$$$$$$ $$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$ $$$$$$$$$$$$$$ """$$$
"$$$""""$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ "$$$
$$$ o$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ "$$$o
o$$" $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ $$$o
$$$ $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$" "$$$$$$ooooo$$$$o
o$$$oooo$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ o$$$$$$$$$$$$$$$$$
$$$$$$$$"$$$$ $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ $$$$""""""""
"""" $$$$ "$$$$$$$$$$$$$$$$$$$$$$$$$$$$" o$$$
"$$$o """$$$$$$$$$$$$$$$$$$"$$" $$$
$$$o "$$""$$$$$$"""" o$$$
$$$$o o$$$"
"$$$$o o$$$$$$o"$$$$o o$$$$
"$$$$$oo ""$$$$o$$$$$o o$$$$""
""$$$$$oooo "$$$o$$$$$$$$$"""
""$$$$$$$oo $$$$$$$$$$
""""$$$$$$$$$$$
$$$$$$$$$$$$
$$$$$$$$$$"
"$$$""

6. SCSS vs SASS vs CSS
/* SCSS */ /* SASS */ /* CSS */
$blue: #3bbfce; $blue: #3bbfce .content-navigation {
$margin: 16px; $margin: 16px border-color: #3bbfce;
color: #2b9eab;
.content-navigation { .content-navigation }
border-color: $blue; border-color: $blue
color: color: darken($blue, 9%) .border {
darken($blue, 9%); padding: 8px;
} .border margin: 8px;
padding: $margin / 2 border-color: #3bbfce;
.border { margin: $margin / 2 }
padding: $margin / 2; border-color: $blue
margin: $margin / 2;
border-color: $blue;
}

7. Pros of SCSS vs SASS
SCSS SASS
● More expressive ● More concise
(multiple rules on one line) ● Easier to read
● Encourages proper rule ● Doesn't care about
nesting semi-colons
● Inline documentation is
a bit easier
● Syntax highlighting
tends to work out of the
box
● Closer to CSS syntax
source: http://thesassway.com/articles/sass-vs-scss-which-syntax-is-better