ahaywood

$icons: (
  checkmark: a,
  plus: b,
  minus: c
);
 
/* For each key in the map, created an own class */
@each $name, $value in $icons {
  .icon--#{$name} {
    content: $value;

ahaywood

$category-colors :              (imom-morning, $ff-yellow, $gray-8),
                                (movie-monitor, $ff-coral, white),
                                (pillow-talk, $ff-l-blue, white),
                                (susan, $ff-limey-green, white),
                                (marriage, $ff-red, white),
                                (family-fun, $ff-orange, white),
                                (printables, $ff-teal, white),
                                (mom-life, $ff-blue, white),
                                (quotes, $ff-purple, white),
                                (parenting, $ff-green, white);

ahaywood

 /* 5 is the number of list items and the number within $list */
$list: "0 0", "50px 0", "100px 0", "150px 0", "200px 0";

@for $i from 1 through 5 {
  li:nth-child(#{$i}) {
    $imgKey: random(5);
    $nth: nth($list, $imgKey);
    background-position: #{$nth};
  }
}

ahaywood

$types: 4;
$type-width: 20px;

@while $types > 0 {
    .while—#{$types} {
        width: $type-width + $types;
    }
    $types: $types - 1;
}

ahaywood

$list: “Amy”, “Henry”, “Isaac”, “Adele”;
@each $person in $list {
    .avatar—#{$person} {
        background: url(‘avatars/#{$person}.jpg”) no-repeat;
    }
}

ahaywood

$class-slug: span !default;

@for $i from 1 through 4 {
    .#{$class-slug}-#{$i} {
        width: 60px + $i
    }
}

ahaywood

$white-theme: true !default;

@if $white-theme {
    @debug “we’re using the #{$white-theme}”;
    background: white;
    text: black;
} @else {
    @debug “we’re using the #{$black-theme}”;
    background: black;
    text: white;

ahaywood

.something {
  z-index: map-get($zindex, change-your-world);
}

ahaywood

$breakpoints: (
  small: 767px,
  medium: 992px,
  large: 1200px
);

// _mixins.scss
@mixin breakpoint($breakpoint) { 
  @if map-has-key($breakpoints, $breakpoint) {
    @media (min-width: #{map-get($breakpoints, $breakpoint)}) {

ahaywood

/*------------------------------------*\
    #PRIMARY-MENU
\*------------------------------------*/
.primary-menu {
	@include grid;
	@include sans-serif;
	font-weight: $bold;
	height: $nav-bar-height;

	&__wrapper {