Compass And Sass(Tim Riley)

Compass Tim Riley openmonkey.com My perspective: non-designer wanting a predictable world and to be able to knock together some decent looking things.

#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

!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

Sass Mixins =blue-border :border :color blue :width 2px :style dotted .comment +blue-border :padding 2px :margin 10px 0 .reply +blue-border Deﬁne 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.

=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 ﬂexible.

CSS Frameworks To reiterate from before: Iʼm a non-designer looking to extend my predictable world of backend code to the frontend.

I want to avoid the browser compatibility nightmares. The frameworks come from the people who know better than me.

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.

.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)

Compass is a framework that combines Sass with these CSS frameworks - and much more - to make it easier to develop stylesheets for semantic markup.

Framework Ports Blueprint 960.gs YUI Compass includes ports of several frameworks to Sass: Blueprint, 960.gs & YUI.

+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

.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

#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.

Compass Core Lib • CSS Reset • Text replacement • Sticky Footer • Link styling • Clearﬁx • 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

#app-suite-links :float left +horizontal-list .tickets +alternating-rows-and-columns(#ddffc8,#bbff91,#000)

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 efﬁciently 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 conﬁned to working with just one framework. It is easy to mix and match elements from each of these framework ports and the core lib.

Installation $ git clone git://github.com/nex3/haml.git $ cd haml && sudo rake install $ sudo gem install chriseppstein-compass --source=http://gems.github.com/

Standalone Usage $ compass -f blueprint project_dir $ cd project_dir $ compass -u # update the current project $ compass -w # watch

Rails Integration $ rails project_dir $ cd project_dir $ haml --rails . $ compass --rails -f blueprint .

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

http://github.com/chriseppstein/compass/ http://github.com/timriley/unfuddle-helpdesk

Compass And Sass(Tim Riley)

by elliando dias

Accessibility

Categories

Upload Details

Usage Rights

2 Embeds 23

Statistics