Sass

From Things and Stuff Wiki
Revision as of 03:12, 27 July 2012 by Milk (talk | contribs)
Jump to navigation Jump to search


Basics

_partial.sass  - partial files, for inclusion, will not be compiled

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

old?: Don't forget to add to $PATH (i.e. /var/lib/gems/1.8/bin)

node.js

Basics

Compass

Guides

Vertical rhythm

If you don't reset browser margin and padding defaults, you're gonna have a bad time.

vertical-rhythmic

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

Etc.

Drupal

Tools