Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Getting started with scss and bootstrap


Published on

From the CSS Processor Madness meetup event:

by Charles Mata

Published in: Technology
  • Be the first to comment

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 jQuery 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 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: