Quick overview of Sass and Compass. Presented to Code Fellows May 2013. Code examples here: https://github.com/bbshih/sass_presentation

1. Learn Sass + Compass
Quick
Billy Shih - Code Fellows - May 21, 2013

2. Demo and notes on
http://github.com/bbshih/sass_presentation
http://github.com/bbshih/sass_presentation

3. Syntactically Awesome
Stylesheets

4. 1. Indented syntax (.sass)
2. SCSS (.scss)
2. SCSS (.scss)
2. SCSS (.scss)

5. .sass .scss become .css

6. Variables
Nesting
Mixins
Selector Inheritence
Selector Inheritence
Selector Inheritence
Selector Inheritence

7. Compass = CSS SASS
Framework

8. group :assets do
gem 'sass-rails' # if running rails 3.1 or greater
gem 'compass-rails'
end
In your project directory run:
$ bundle
$ bundle exec compass init
$ bundle exec compass init
$ bundle exec compass init
$ bundle exec compass init
$ bundle exec compass init
$ bundle exec compass init
$ bundle exec compass init
$ bundle exec compass init
$ bundle exec compass init

9. Rename your application.css to
application.css.scss and add to the file:
@import "compass"
Create new .scss files and @import them
into the application.css.scss
Create new .scss files and @import them
into the application.css.scss
Create new .scss files and @import them
into the application.css.scss
Create new .scss files and @import them
into the application.css.scss
Create new .scss files and @import them

10. Variables
CSS SCSS
h2 { color: #ff00ee;}th
{ background-color: #ff00ee;}a
{ color: #ff00ee;}
$pink: #ff00ee;$green: #11aa00;$bright: $green;
$link: $pink;h2 { color: $bright;}th
{ background-color: $bright;}a { color: $link;}

11. Nesting
.main { border: 5px solid green;
font-size:20px;}.main th { color:
red;}th { color: blue;}
.main { border: 5px solid green;
font-size:20px; th { color:
red; }}th { color: blue; }

12. Mixins
p { background-image:
url("/assets/mindblown.gif"); height:
200px;}h1 { background-image:
url("/assets/mindblown.gif"); height:
200px;}
@mixin mindblown { background-
image: image-url("mindblown.gif");
height: 200px;}p { @include
mindblown;}h1 { @include
mindblown;}

13. Mixins w/ argument
@mixin mindblown { background-
image: image-url("mindblown.gif");
height: 200px;}p { @include
mindblown;}h1 { @include
mindblown;
height: 400px;}
@mixin mindblown($height)
{ background-image: image-
url("mindblown.gif"); height:
$height;}p { @include
mindblown(200px);}h1 { @include
mindblown(400px);
}

14. Selector Inheritence
HTML:
<div class=”alert
seriousAlert”></div>
CSS:
.alert { background-color: red; font-
size: 20px; text-align:
center;}.seriousAlert { border: 5px
solid blue;
HTML:
<div class=”seriousAlert”></div>
SCSS:
.alert { background-color: red; font-
size: 20px; text-align:
center;}.seriousAlert { @extend
.alert; border: 5px solid blue;}

15. Compass
.radius { -webkit-border-radius:
25px; -moz-border-radius: 25px;
-ms-border-radius: 25px; -o-border-
radius: 25px; border-radius:
25px;}table { border: 20px solid
orange;}
.radius { @include border-
radius(25px); }table { border: 20px
solid orange;}

16. Compass
$base-font-size: 16px;
$base-line-height: 15px;
@include establish-baseline;

17. Links
• http://sass-lang.com/
• http://compass-style.org/

18. @tobillys
me@billyshih.com
me@billyshih.com