Sass
Basics
_partial.sass - partial files, for inclusion, will not be compiled
- http://sonspring.com/journal/sass-for-designers
- Using Sass & Compass in Drupal Theming - scribd, slide 40 on for techy
Ruby
Init;
gem install sass mv style.css style.scss sass --watch style.scss:style.css
Sasson config.rb
prefered_syntax = :scss http_path = '/' css_dir = 'styles' sass_dir = 'styles' images_dir = 'images' javascripts_dir = 'scripts' relative_assets = true line_comments = true #output_style = :compressed output_style = :expanded
PHP
Don't forget to add to $PATH (i.e. /var/lib/gems/1.8/bin)
Compass
Guides
Grids
- https://github.com/nextmat/compass-960-plugin - used in sasson
- http://compass-style.org/reference/blueprint/grid/
- http://theled.co.uk/blog/archive/2010/06/18/semantic-960-gs-using-sass-and-compass/
- http://blog.carbonfive.com/2009/03/02/compass-960-semantics/
- http://coding.smashingmagazine.com/2011/08/23/the-semantic-grid-system-page-layout-for-tomorrow/
- Susy - Responsive grids for Compass.
Vertical rhythm
If you don't reset browser margin and padding defaults, you're gonna have a bad time.
- http://compass-style.org/reference/compass/typography/vertical_rhythm/ - px based
- https://github.com/OliverJAsh/vertical-rhythm - em based
- https://github.com/pyrsmk/vertical-rhythmic - em based
$base-font-size: 1em; $base-line-height: 1.5em; @import "vertical-rhythmic";
@include $font-size() number $font-size : font size, in ems integer $lines : number of whitespace lines for the line-height Keeps base line proportions by default
@include margin() integer $lines : number of whitespace lines (default: 1) number $font-size : actual font-size, in ems, to calculate with (default: 1em) integer $border-width : width of additionnal borders around the box Useful to substract borders from the whitespace to not break the rhythm @include margin-top integer $lines : number of whitespace lines (default: 1) number $font-size : actual font-size, in ems, to calculate with (default: 1em) integer $border-width : width of additionnal borders around the box Useful to substract borders from the whitespace to not break the rhythm @include margin-bottom etc. @include padding @include padding-top @include padding-bottom @include border @include border-top @include border-bottom @include outline
// If using default-font-size: 0.9em and line-height: 1.4em
h1 {
@include font-size(1.5em);
}
// would give h1 the space of two 1.4em lines
// 2nd method
h1 {
font-size:1.5em;
line-height:rhythm(auto,1.5em);
}
// rhythm() can be used directly
Other
Zocal
- https://github.com/adamstac/zocial - css3 service buttons
Etc.
Drupal
- Using SASS with Drupal, December 18, 2011
- http://drupal.org/project/compass
- sasson
- sassy