Sass

From Things and Stuff Wiki
Revision as of 09:44, 10 August 2012 by Milk (talk | contribs) (→‎Responsive)
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

Mixins, etc.

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

  • Breakpoint makes writing media queries in Sass super simple. Create a variable using a simplified syntax based on most commonly used media queries, then call it using the breakpoint mixin. Breakpoint handles all of the heavy lifting, from writing the media query itself, to handling cross-browser compatibility issues, so you can focus on what's important: making sure your website looks its best.

Other

Zocal

Etc.

Drupal

Tools