Sass
Jump to navigation
Jump to search
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
- PHPSass - richtheeek fork of PHamlP for Drupal
old?: Don't forget to add to $PATH (i.e. /var/lib/gems/1.8/bin)
- PHamlP - older
node.js
Compass
Guides
Grids
compass-960-plugin
- compass-960-plugin - used in sasson
- based on 960.gs / demo
- Compass, the 960 CSS framework, and Semantic Markup - March 2, 2009
- Cleaner 960.gs using SASS and Compass - June 19th, 2010
- Mastering the 960 Grid System
Install
gem install compass-960-plugin
// Grid mixins (see Sasson's layout partials for examples)
@import "960/grid";
Default is 12 colums. Set this in subtheme .scss;
$ninesixty-columns: 16;
Give an element a grid attribute
@include grid-container; - give to #page. sets width and auto margins @include grid(8); - declare an 8 column wide element @include grid-prefix(2); - add an empty 2-wide element before @include grid-suffix(2); - add an empty 2-wide element after @include grid-push(4); - push element 4 to the right @include grid-pull(4); - pull element 4 to the right @include alpha; - remove left gutter, for nested grid first element. must got after grid() @include omega; - remove right gutter, for nested grid last element. must got after grid()
blueprint
sass-960gs
- 960 Grid System - Standalone - recent
- Ruby Gem
Susy
- 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
vertical-rhythmic
- https://github.com/pyrsmk/vertical-rhythmic - em based
Usage
1em and 1.5em are the defaults (16px being browser em default. line-height is normally 1.4em)
$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
first basic method; default-font-size: 0.9em and line-height: 1.4em h1 the space of two 1.4em lines
@include $font-size(1.5)
second basic;
font-size:1.5em; line-height:rhythm(auto,1.5em);
@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
h1 {
@include font-size(1.5em);
}
// 2nd method
// rhythm() can be used directly
Responsive
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