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
Basics
Compass
Guides
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