Learn Sass + CompassQuickBilly Shih - Code Fellows - May 21, 2013
Demo and notes onhttp://github.com/bbshih/sass_presentationhttp://github.com/bbshih/sass_presentation
Syntactically AwesomeStylesheets
1. Indented syntax (.sass)2. SCSS (.scss)2. SCSS (.scss)2. SCSS (.scss)
.sass .scss become .css
VariablesNestingMixinsSelector InheritenceSelector InheritenceSelector InheritenceSelector Inheritence
Compass = CSS SASSFramework
group :assets dogem sass-rails # if running rails 3.1 or greatergem compass-railsendIn your project directory run:$ bundle...
Rename your application.css toapplication.css.scss and add to the file:@import "compass"Create new .scss files and @import...
VariablesCSS SCSSh2 { color: #ff00ee;}th{ background-color: #ff00ee;}a{ color: #ff00ee;}$pink: #ff00ee;$green: #11aa00;$br...
Nesting.main { border: 5px solid green;font-size:20px;}.main th { color:red;}th { color: blue;}.main { border: 5px solid g...
Mixinsp { background-image:url("/assets/mindblown.gif"); height:200px;}h1 { background-image:url("/assets/mindblown.gif");...
Mixins w/ argument@mixin mindblown { background-image: image-url("mindblown.gif");height: 200px;}p { @includemindblown;}h1...
Selector InheritenceHTML:<div class=”alertseriousAlert”></div>CSS:.alert { background-color: red; font-size: 20px; text-al...
Compass.radius { -webkit-border-radius:25px; -moz-border-radius: 25px;-ms-border-radius: 25px; -o-border-radius: 25px; bor...
Compass$base-font-size: 16px;$base-line-height: 15px;@include establish-baseline;
Links• http://sass-lang.com/• http://compass-style.org/
@tobillysme@billyshih.comme@billyshih.com
Upcoming SlideShare
Loading in...5
×

Learn Sass and Compass quick

4,484

Published on

Quick overview of Sass and Compass.

Presented to Code Fellows May 2013.

Code examples here: https://github.com/bbshih/sass_presentation

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

No Downloads
Views
Total Views
4,484
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
8
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide
  • - Extension of CSS3 that adds features that programming languages have - Make it easier to write and manage CSS - Interpreter translates Sass into CSS
  • 2 acceptable syntaxes with 2 file types: - Indented syntax(.sass) - Similar to Haml - SCSS Uses CSS semantics, so CSS is valid SCSS (I&apos;ll be using this in the demo)
  • - Sass interpreter spits out css files from sass files - Automatic with rails and Sass gem - Also has a watcher that can look for updates to sass files and automatically generate .css
  • - Variables allow you to set a value in one place - Nesting organizes styles and saves you from typing our classes or selectors over and over - Mixins
  • - Open-source CSS framework - Uses Sass to provide mixins that solve common problems encountered when creating CSS files
  • Learn Sass and Compass quick

    1. 1. Learn Sass + CompassQuickBilly Shih - Code Fellows - May 21, 2013
    2. 2. Demo and notes onhttp://github.com/bbshih/sass_presentationhttp://github.com/bbshih/sass_presentation
    3. 3. Syntactically AwesomeStylesheets
    4. 4. 1. Indented syntax (.sass)2. SCSS (.scss)2. SCSS (.scss)2. SCSS (.scss)
    5. 5. .sass .scss become .css
    6. 6. VariablesNestingMixinsSelector InheritenceSelector InheritenceSelector InheritenceSelector Inheritence
    7. 7. Compass = CSS SASSFramework
    8. 8. group :assets dogem sass-rails # if running rails 3.1 or greatergem compass-railsendIn 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. 9. Rename your application.css toapplication.css.scss and add to the file:@import "compass"Create new .scss files and @import theminto the application.css.scssCreate new .scss files and @import theminto the application.css.scssCreate new .scss files and @import theminto the application.css.scssCreate new .scss files and @import theminto the application.css.scssCreate new .scss files and @import them
    10. 10. VariablesCSS SCSSh2 { 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. 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. 12. Mixinsp { 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 { @includemindblown;}h1 { @includemindblown;}
    13. 13. Mixins w/ argument@mixin mindblown { background-image: image-url("mindblown.gif");height: 200px;}p { @includemindblown;}h1 { @includemindblown;height: 400px;}@mixin mindblown($height){ background-image: image-url("mindblown.gif"); height:$height;}p { @includemindblown(200px);}h1 { @includemindblown(400px);}
    14. 14. Selector InheritenceHTML:<div class=”alertseriousAlert”></div>CSS:.alert { background-color: red; font-size: 20px; text-align:center;}.seriousAlert { border: 5pxsolid 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. 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 solidorange;}.radius { @include border-radius(25px); }table { border: 20pxsolid orange;}
    16. 16. Compass$base-font-size: 16px;$base-line-height: 15px;@include establish-baseline;
    17. 17. Links• http://sass-lang.com/• http://compass-style.org/
    18. 18. @tobillysme@billyshih.comme@billyshih.com
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×