Sass

From Things and Stuff Wiki
Jump to navigation Jump to search


Basics

_partial.sass
  partial files with a leading underscore,
  for inclusion in the compiled source

About

Getting Sass/SCSS with:

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

Variables

// first we set descriptive variables:
$darkgrey: #333333;
$blue: #001eff;
 
// then we set functional variables:
$text_color: $darkgrey;
$link_color: $lightblue;
$border_color: $lightblue;
 
.myClass{
  color: $text_color;
  border-color: $border_color;
}
a{
  color: $link_color;
}

Mixins, functions, etc.

  • Bourbon - A simple and lightweight mixin/function library for Sass.

Compass

Guides

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.

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.

Drupal

Tools

Retrieved from "https://wiki.thingsandstuff.org/index.php?title=Sass&oldid=3646"