csswizardry

<div class=foo>
  Hello world
</div>

csswizardry

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

// main.scss
$tabs-color: black;
$tabs-color-background: yellow;

$tabs-custom: (

csswizardry

// ----
// Sass (v3.3.10)
// Compass (v1.0.0.alpha.20)
// ----

// WHAT I’M TRYING TO DO
//
// inuitcss has its RWD settings and tools split over a number of files. What I
// want to do is take an array of breakpoints, loop through them to create
// corresponding media queries, and then loop through those media queries in order

csswizardry

// ----
// Sass (v3.3.12)
// Compass (v1.0.0.alpha.21)
// ----

%foo {
  color: red;

  &:hover {
    color: blue;

csswizardry

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

$breakpoints: (
    'small'     '(min-width: 340px)'    ,
    'medium'    '(min-width: 500px)'    ,
    'large'     '(min-width: 660px)'    ,
    'huge'      '(min-width: 1060px)'   ,

csswizardry

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

@mixin am($attribute, $value: null) {

  @if($value != null) {
    $value: "~=\"#{$value}\"";
  }

csswizardry

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

@mixin am($attribute, $value: null) {

  @if($value != null) {
    $value: "~=\"#{$value}\"";
  }

csswizardry

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

// AMCSS setup
$amcss-prefix: am-;

@mixin am($amcss-attribute, $amcss-value: null) {

csswizardry

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

// Add or remove the trailing slash (/) in the first group of comments
// in order to toggle between to different lines of code.

.top-line-activated {
  /**/

csswizardry

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

// Add or remove the trailing slash (/) in the first group of comments
// in order to toggle between two different groups of declarations.

.top-group-activated {
  /**/