darren131

// making use of width/height magic selectors
.icon-giant-killer-bear {
  $width: icons-sprite-width(giant-killer-bear);
  $height: icons-sprite-height(giant-killer-bear);
  @include icons-sprite(giant-killer-bear);
  @include size($width, $height);
  margin: 0 4px 0 0;
  vertical-align: text-bottom;
}

darren131

(div.line>(div.unit.size1of3>.img+(h3.title>a[href="#"])+.line>.unit.size1of2.price>(.strike+strong)+.unit.size1of3>a.btn.btn-primary)*3)*3

produces:

<div class="line">
  <div class="unit size1of3">
    <div class="img"></div>
    <h3 class="title"><a href="#"></a></h3>
    <div class="line">
      <div class="unit size1of2 price">

darren131

// USAGE:
// resize the browser until your layout looks shit
// take note of the viewport size
// plug in that value and add the new styles...
// e.g.
//
// #logo {
//   float: left;
//   @include respond-to(650px) {
//     float:none;

darren131

@mixin resize-sprite($map, $sprite, $percent) {
  $spritePath:    sprite-path($map);
  $spriteWidth:   image-width($spritePath);
  $spriteHeight:  image-height($spritePath);
  $width: image-width(sprite-file($map, $sprite));
  $height: image-height(sprite-file($map, $sprite));

  @include background-size(ceil($spriteWidth * ($percent/100)) ceil($spriteHeight * ($percent/100)));
  width: ceil($width*($percent/100));
  height: ceil($height*($percent/100));

darren131

// Your site namespace... may not need this?
var YOUR_SITE = YOUR_SITE || {};
Modernizr.load([
  {
    // load jquery from the CDN
    load: '//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.js',
    complete: function () {
      // id the CDN fails then load local version of jquery
      if ( !window.jQuery ) {
            Modernizr.load('/wp-content/themes/calliduscloud/js/libs/jquery-1.8.1.min.js');

darren131

http://thesassway.com/guides
http://leveluptuts.com/tutorials/compass-tutorials
http://www.dontcom.com/post/26884274848/css-preprocessing
http://compass-style.org/help/tutorials/spriting/
http://www.youtube.com/watch?v=Tl6bceyTjFw
http://www.bariswanschers.com/blog/use-sass-and-compass-streamline-your-css-development

darren131

// This is based on Nicole Sullivan's OOCSS spacing module 
// with a slight modification, namely:
//
// 1. there's no vertical or horizontal
//
// Produces the following placeholder selectors
//  %mtn {
//      margin-top: 0;
//  }
//  %mbn {

darren131

# get the name of your theme folder
WP_THEME_FOLDER = File.basename(File.dirname(__FILE__))

# best path for assets in Wordpress project
http_path = "/wp-content/themes/#{WP_THEME_FOLDER}/"
css_dir = "."
sass_dir = "sass"
images_dir = "img"
javascripts_dir = "js"
fonts_dir = "fonts"

darren131

# best path for assets in Wordpress project
http_path = "/wp-content/themes/TheFold/"
css_dir = "."
sass_dir = "sass"
images_dir = "img"
javascripts_dir = "js"
fonts_dir = "fonts"

output_style = :expanded
environment = :development

darren131

@mixin set-color($background-color: #c00) {
  @if lightness($background-color) > lightness(#aaaaaa) {
    color: $dark;
  } @else {
    color: $light;
  }
  background:$background-color;
}