Compass And Sass(Tim Riley)

3,256 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,256
On SlideShare
0
From Embeds
0
Number of Embeds
24
Actions
Shares
0
Downloads
26
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Compass And Sass(Tim Riley)

  1. 1. Compass Tim Riley openmonkey.com My perspective: non-designer wanting a predictable world and to be able to knock together some decent looking things.
  2. 2. #main { width: 90%; #main } :width 90% #main p { p border-style: solid; :border-style solid border-width: 1px; :border-width 1px border-color: #00f; :border-color #00f } a #main p a { :text-decoration none text-decoration: none; :font-weight bold font-weight: bold; a:hover } :text-decoration underline #main p a:hover { text-decoration: underline; } Intro to Sass Cleaner Syntax Whitespace aware Nested selectors
  3. 3. !main_bg= #46ar12 !main_width= 40em #main :background-color= !main_bg :width= !main_width .sidebar :background-color= !main_bg + #333333 :width= !main_width - 25em Variables
  4. 4. Sass Mixins =blue-border :border :color blue :width 2px :style dotted .comment +blue-border :padding 2px :margin 10px 0 .reply +blue-border Define groups of CSS attributes and include them inline in any selectors throughout your stylesheet. Mixins are like CSS macros, or ruby modules or abstract classes.
  5. 5. =outer-table-borders(!width = 2px, !color = black) :border= !width "solid" !color thead th :border-bottom= !width "solid" !color tfoot th, td :border-top= !width "solid" !color th &:first-child :border-right= !width "solid" !color In the 2.1 (development) version of Sass, mixins can take arguments, which makes them much more flexible.
  6. 6. CSS Frameworks To reiterate from before: Iʼm a non-designer looking to extend my predictable world of backend code to the frontend.
  7. 7. I want to avoid the browser compatibility nightmares. The frameworks come from the people who know better than me.
  8. 8. So for me, CSS frameworks are a godsend. At the foundation, they are collections of CSS utility classes for you to include in your makrup. They can help you avert the unpleasant surprises of browser compatibility. Found some traction especially for creating grid-based layouts.
  9. 9. .container.showgrid %h2 Tests for common HTML elements %hr .span-8 %p Lorem ipsum dolor sit %p Lorem ipsum dolor sit .span-8 %p.small Lorem ipsum dolor sit %p Lorem ipsum dolor sit %p.large Lorem ipsum dolor sit .span-8.last .box %p.last Aliquip ex ea commodo consequat %blockquote %p Lorem ipsum dolor sit But! They pollute your markup with “display classes” - non-semantic class names. Also, they are little more than just a collection of CSS classes, not a true framework (EXPLAIN)
  10. 10. Compass is a framework that combines Sass with these CSS frameworks - and much more - to make it easier to develop stylesheets for semantic markup.
  11. 11. Framework Ports Blueprint 960.gs YUI Compass includes ports of several frameworks to Sass: Blueprint, 960.gs & YUI.
  12. 12. +container !blueprint_grid_columns +column(n, last) !blueprint_grid_width +last !blueprint_grid_margin +append(n) +prepend(n) +push(n) +blueprint-typography +pull(n) +blueprint-form These are not just Sass conversions - the frameworks enhanced these using mixins to provide a DSL that allows you to hook into the frameworks and provide smenatic markup
  13. 13. .container.showgrid %h2 Tests for common HTML elements %hr .span-8 %p Lorem ipsum dolor sit %p Lorem ipsum dolor sit .span-8 %p.small Lorem ipsum dolor sit %p Lorem ipsum dolor sit %p.large Lorem ipsum dolor sit .span-8.last .box %p.last Aliquip ex ea commodo consequat %blockquote %p Lorem ipsum dolor sit
  14. 14. #page #page %h2 Tests for common HTML elements +container %hr +showgrid #sales %p Lorem ipsum dolor sit #sales %p Lorem ipsum dolor sit +column(8) #engineering %p.small Lorem ipsum dolor sit #engineering %p Lorem ipsum dolor sit +column(8) %p.large Lorem ipsum dolor sit #support #support .testimonial +column(8, true) %p Aliquip ex ea commodo consequat .testimonial %blockquote +box %p Lorem ipsum dolor sit %p +last With Compass it is easy to write unobtrusive stylesheets.
  15. 15. Compass Core Lib • CSS Reset • Text replacement • Sticky Footer • Link styling • Clearfix • List styling (bullets, orientation) • Tag Cloud • Table styling • Cross-browser inline- (background colours, borders) block Besides the big frameworks, Compass provides its own useful core library, which includes support for: CSS Resets, Sticky Footers, Clear Fixes, Tag Clouds, Text Replacement, Link Styling, Table Styling
  16. 16. #app-suite-links :float left +horizontal-list .tickets +alternating-rows-and-columns(#ddffc8,#bbff91,#000)
  17. 17. Mix & Match @import compass/reset.sass @import compass/utilities.sass @import blueprint/modules/colors.sass @import blueprint/modules/grid.sass Compass allows you to build your stylesheets efficiently insofar as you are never required to pull in all the libs or frameworks wholesale. You can just pull in the parts that you want. Youʼre not confined to working with just one framework. It is easy to mix and match elements from each of these framework ports and the core lib.
  18. 18. Installation $ git clone git://github.com/nex3/haml.git $ cd haml && sudo rake install $ sudo gem install chriseppstein-compass --source=http://gems.github.com/
  19. 19. Standalone Usage $ compass -f blueprint project_dir $ cd project_dir $ compass -u # update the current project $ compass -w # watch
  20. 20. Rails Integration $ rails project_dir $ cd project_dir $ haml --rails . $ compass --rails -f blueprint .
  21. 21. Sinatra Integration gem 'haml', '~> 2.1' require 'haml' gem 'chriseppstein-compass' require 'compass' configure do Compass.configuration do |config| config.project_path = File.dirname(__FILE__) config.sass_dir = File.join('views', 'stylesheets') end end get "/stylesheets/screen.css" do content_type 'text/css' sass :"stylesheets/screen", :sass => Compass.sass_engine_options end
  22. 22. http://github.com/chriseppstein/compass/ http://github.com/timriley/unfuddle-helpdesk

×