jdsteinbach

- colors = ['green', 'blue', 'yellow', 'red', 'silver']
- (colors).each do |color|
  %div{ :class => "#{color} column" }
    %p{ :class => "color-#{color}"} $color-#{color};
    - (1...5).each do |i|
      %p{ :class => "color-#{color}-#{i}"} $color-#{color}-#{i};

jdsteinbach

<div class="element loading">Loading</div>

jdsteinbach

.box-1
.box-2
.box-3
.box-4

jdsteinbach

.box-1
.box-2
.box-3
.box-4

jdsteinbach

<div class="box">I'm in a box.</div>

jdsteinbach

.box-1
.box-2
.box-3
.box-4

jdsteinbach

'use strict';

module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'), 
    
    sass: {
      options: {
        sourceMap: true,
        outputStyle: 'expanded'

jdsteinbach

// ----
// Sass (v3.4.11)
// Compass (v1.0.3)
// ----

@function pow(
  $number,
  $exponent
) {
  $_return: 1;

jdsteinbach

// ----
// Sass (v3.4.11)
// Compass (v1.0.3)
// ----

.rgba-demo {
  color: rgba(#383b52, .5);
}

jdsteinbach

// ----
// Sass (v3.4.9)
// Compass (v1.0.1)
// ----

$blue: #2980b9;
$blue-dark: #20638f;
$blue-light: #3498db;
$red: #e74c3c;
$red-dark: #d62c1a;