Getting Started withSCSS and Bootstrap
Why we chose SCSS and Bootstrap● CSS is valid SCSS, making the transition  from one to the other very smooth.● Bootstrap o...
Prerequisites / What to DownloadDownload and unzip Twitter Bootstraps default packageand latest version of jQueryhttp://tw...
What well be doing● Using Bootstrap as a reset / base stylesheet● Using SCSS to write our own custom styles  on top of Boo...
Thank youThanks to all for joining this event with Oversee.net and theSouthern California Web Designers and Developers!   ...
SCSS vs SASS vs CSS/* SCSS */                  /* SASS */                   /* CSS */$blue: #3bbfce;             $blue: #3...
Pros of SCSS vs SASSSCSS                                                          SASS● More expressive                   ...
Upcoming SlideShare
Loading in …5
×

Getting started with scss and bootstrap

1,093 views
992 views

Published on

From the CSS Processor Madness meetup event:

http://www.meetup.com/socalwdd/events/66952482/

by Charles Mata



Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,093
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Getting started with scss and bootstrap

  1. 1. Getting Started withSCSS and Bootstrap
  2. 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. 3. Prerequisites / What to DownloadDownload and unzip Twitter Bootstraps default packageand latest version of jQueryhttp://twitter.github.com/bootstraphttp://www.jquery.comIf you dont have ruby and ruby gems installed, becomefriends with the person closest to you who does have thetools installed and who smells nice.Or just follow along on-screen.$> gem install sass
  4. 4. What well 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. 5. Thank youThanks to all for joining this event with Oversee.net and theSouthern 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. 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. 7. Pros of SCSS vs SASSSCSS SASS● More expressive ● More concise (multiple rules on one line) ● Easier to read● Encourages proper rule ● Doesnt care about nesting semi-colons● Inline documentation is a bit easier● Syntax highlighting tends to work out of the box● Closer to CSS syntaxsource: http://thesassway.com/articles/sass-vs-scss-which-syntax-is-better

×