functions.md

RGB

• red($color) : Gets the red component of a color.
• green($color) : Gets the green component of a color.
• blue($color) : Gets the blue component of a color.
• mix($color1, $color2, [$weight])
• lighten($color, $amount) : Makes a color lighter.
• darken($color, $amount) : Makes a color darker.
• invert($color, [$weight]) : Returns the inverse of a color.

Number Functions

• percentage($number) : Converts a unitless number to a percentage.
• round($number) : Rounds a number to the nearest whole number.
• ceil($number) : Rounds a number up to the next whole number.
• floor($number) : Rounds a number down to the previous whole number.
• abs($number) : Returns the absolute value of a number.
• min($numbers…) : Finds the minimum of several numbers.
• max($numbers…) : Finds the maximum of several numbers.
• random()

Map

• map-get($map, $key) : Returns the value in a map associated with a given key.
• map-merge($map1, $map2) : Merges two maps together into a new map.
• map-remove($map, $keys…) : Returns a new map with keys removed.
• map-keys($map) : Returns a list of all keys in a map.
• map-values($map) : Returns a list of all values in a map.
• map-has-key($map, $key) : Returns whether a map has a value associated with a given key.

Looping.scss

$superheroes: c3po, luke, r2d2, anakin;
@each $hero in $superheroes {
  .#{$hero} {
    background-image : url("#{$hero}.png");
  }
}

$breakpoints: (sm: 375px, md: 768px, lg: 1200px);
@each $size, $bp in $breakpoints {
  @media only screen and (min-width: $bp) {
    .container-width { width: $bp; }
  }
}

$breakpoints: (sm: 375px, md: 768px, lg: 1200px);
$container-widths: (sm: 250px, md: 500px, lg: 750px);
@each $size, $bp in $breakpoints {
  @media only screen and (min-width: $bp) {
    .container-width { width: map-get($container-widths, $size); }
  }
}

// #########
// @for

@mixin light-color-class($color, $color-name, $i) {
  $color-value: if($1 == 1, $color, lighten($color, 3% * $i));

  .#{color}-#{i} {
    #{color}: $color-value;
  }
}

@for $i from 1 through 10 {
  @include light-color-class(#BA0000, passion, $i);
  @include light-color-class(purple, empathy, $i);
}

@for $i from 1 through 10 {
  .purple-#{$i} {
    background-color: lighten(purple, 5% * $i);

    &::before {
      display: inline-block;
      width: 100%;
      text-align: center;
      content: 'purple-#{$i}';
    }
  }
}

mixins.scss

@mixin box-shadow($shadows...) {
  -moz-box-shadow: $shadows;
  -webkit-box-shadow: $shadows;
  box-shadow: $shadows;
}

@mixin colors($text, $background, $border) {
  color: $text;
  background-color: $background;
  border-color: $border;
}

$values: #ff0000, #00ff00, #0000ff;
.primary {
  @include colors($values...);
}

$value-map: (text: #00ff00, background: #0000ff, border: #ff0000);
.secondary {
  @include colors($value-map...);
}

respond-to.scss

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

@mixin respond-to($breakpoint) {
  // If the key exists in the map
  @if map-has-key($breakpoints, $breakpoint) {
    // Prints a media query based on the value
    @media (min-width: map-get($breakpoints, $breakpoint)) {
      @content;
    }
  }
 
  // If the key doesn't exist in the map
  @else {
    @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
        + "Available breakpoints are: #{map-keys($breakpoints)}.";
  }
}

themify.scss

@mixin themify($themes: $themes) {
  @each $theme, $map in $themes {

    .theme-#{$theme} & {
      $theme-map: () !global;
      @each $key, $submap in $map {
        $value: map-get(map-get($themes, $theme), '#{$key}');
        $theme-map: map-merge($theme-map, ($key: $value)) !global;
      }

      @content;
      $theme-map: null !global;
    }

  }
}

@function themed($key) {
  @return map-get($theme-map, $key);
}


@mixin themify($themes: $themes) {
  @each $theme, $styles in $themes {

    .theme-#{$theme} & {
      $theme-map: () !global;
      @each $style, $color in $styles {
        $theme-map: $styles !global;
      }
      
      @content;
      $theme-map: null !global;
    }
  }
}