Sass

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

Official Sass.

Init; 

gem install sass 
mv style.css style.scss 
sass --watch style.scss:style.css

sass --watch input.sass:output.css
sass --watch input-dir:output-dir
sass --watch .:../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.
  • sass-recipes - examples that you can use or modify to suit your needs.
    • CSS Arrows
    • Hover to View
    • Multi-Line Button
    • Progress Bar
    • Search Input
    • File Field Mask

Compass

Setup

gem install compass
compass version

Basics

Gradients

The linear-gradient and radial-gradient mixins have been deprecated. Instead use the background-image mixin and pass it a gradient function. The deprecation warning will print out the correct call for you to use. 

@import "compass/css3/images"

Other

Guides

Susy

  • Susy - Responsive grids for Compass.

Other

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=3796"