Learn Sass and Compass quick
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Learn Sass and Compass quick

  • 3,636 views
Uploaded on

Quick overview of Sass and Compass. ...

Quick overview of Sass and Compass.

Presented to Code Fellows May 2013.

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,636
On Slideshare
1,109
From Embeds
2,527
Number of Embeds
9

Actions

Shares
Downloads
6
Comments
0
Likes
3

Embeds 2,527

http://www.billyshih.com 2,360
http://localhost 116
http://bair.local 39
http://www.linkedin.com 5
https://twitter.com 3
http://webcache.googleusercontent.com 1
http://seoautomated.com 1
http://www.google.co.jp 1
https://www.linkedin.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    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'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

Transcript

  • 1. Learn Sass + CompassQuickBilly Shih - Code Fellows - May 21, 2013
  • 2. Demo and notes onhttp://github.com/bbshih/sass_presentationhttp://github.com/bbshih/sass_presentation
  • 3. Syntactically AwesomeStylesheets
  • 4. 1. Indented syntax (.sass)2. SCSS (.scss)2. SCSS (.scss)2. SCSS (.scss)
  • 5. .sass .scss become .css
  • 6. VariablesNestingMixinsSelector InheritenceSelector InheritenceSelector InheritenceSelector Inheritence
  • 7. Compass = CSS SASSFramework
  • 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. 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. 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. 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. 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. 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. 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. 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. Compass$base-font-size: 16px;$base-line-height: 15px;@include establish-baseline;
  • 17. Links• http://sass-lang.com/• http://compass-style.org/
  • 18. @tobillysme@billyshih.comme@billyshih.com