Compass And Sass(Tim Riley)

Compass

Tim Rileyopenmonkey.com

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

#main :width 90% p :border-style solid :border-width 1px :border-color #00f a :text-decoration none :font-weight bold a:hover :text-decoration underline

#main { width: 90%;}#main p { border-style: solid; border-width: 1px; border-color: #00f;}#main p a { text-decoration: none; font-weight: bold;}#main p a:hover { text-decoration: underline;}

Intro to Sass

Cleaner SyntaxWhitespace awareNested 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

=blue-border :border :color blue :width 2px :style dotted

.comment +blue-border :padding 2px :margin 10px 0

.reply +blue-border

Sass Mixins

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.

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

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 PortsBlueprint

960.gsYUI

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

+container+column(n, last)+last+append(n)+prepend(n)+push(n)+pull(n)

!blueprint_grid_columns!blueprint_grid_width!blueprint_grid_margin

+blueprint-typography+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 %h2 Tests for common HTML elements %hr #sales %p Lorem ipsum dolor sit %p Lorem ipsum dolor sit #engineering %p.small Lorem ipsum dolor sit %p Lorem ipsum dolor sit %p.large Lorem ipsum dolor sit #support .testimonial %p Aliquip ex ea commodo consequat %blockquote %p Lorem ipsum dolor sit

#page +container +showgrid

#sales +column(8)

#engineering +column(8)

#support +column(8, true) .testimonial +box %p +last

With Compass it is easy to write unobtrusive stylesheets.

Compass Core Lib• CSS Reset

• Sticky Footer

• Clearfix

• Tag Cloud

• Cross-browser inline-block

• Text replacement

• Link styling

• List styling (bullets, orientation)

• Table styling (background colours, borders)

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

Installation

$ git clone git://github.com/nex3/haml.git

$ cd haml && sudo rake install

$ sudo gem install chriseppstein-compass \ --source=http://gems.github.com/

$ compass -f blueprint project_dir

$ cd project_dir

$ compass -u # update the current project

$ compass -w # watch

Standalone Usage

Rails Integration

$ rails project_dir

$ cd project_dir

$ haml --rails .

$ compass --rails -f blueprint .

Sinatra Integrationgem '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') endend

get "/stylesheets/screen.css" do content_type 'text/css' sass :"stylesheets/screen", :sass => Compass.sass_engine_optionsend

http://github.com/chriseppstein/compass/

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