SASS & COMPASS

config.rb

# Require any additional compass plugins here.

# Set this to the root of your project when deployed:
http_path             = "/pfad"
css_dir               = "css"
sass_dir              = "sass"
images_dir            = "images"
javascripts_dir       = "js"

# You can select your preferred output style here (can be overridden via the command line):
# output_style = :expanded or :nested or :compact or :compressed
#output_style = :compressed

# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true

# To disable debugging comments that display the original location of your selectors. Uncomment:
# line_comments = false
#line_comments = false

# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

style.scss

/* Compass Imports */
@import "compass/css3/";
@import "compass/utilities/sprites/base";

$sprite-layout: diagonal;
@import '../images/sprite/*.png';


/* SASS Variables */
$fontsize  :  12px;
$fontheight:  22px;
$fontweight:  400;



/* Hey look at this multiline comment
* that we want to show up in our CSS output. */

// These comments are single lines and 
// we do not want them to appear in our CSS


p {font-size: $font-size;}
p.small {font-size: $font-size - 2px;}

.sprite-icon {@include sprite-sprite(bild);}
.sprite-icon {@include sprite-sprite(bild_hover);}

.box-shadow {@include box-shadow(0px 6px 8px 0px rgba(0, 0, 0, 0.5));}

.border-radius {@include border-radius(10);}

.opacity {@include opacity(0.3);}

.transition {@include single-transition(all, 0.2s, linear);}