Sass-Cheat-Sheet

sass-cheat-sheet.scss

// # Sass Cheat Sheet


// ## Variables
$color: rgb(#aee, .5);
$number: 10;
$string: 'tony';
$boolean: true;
$list: 'Item01', 'Item02';
$nestedList: (
  ('Betty', 18),
  ('Timmy', 21)
);
$map: (
  name: Timmy,
  age: 21
);

// ## Interpolation
$theme: 'jazz';
$moogle: 8;
$lg: '(min-height: ' + 900px + ')';
.theme_#{theme} {
  font-size: $moogle#{em};
  @media #{$lg} {}
}

// ## Math
.bombay {
  margin: random(100) * 1 % 0;
  padding: $chocobo * 2em;
  line-height: (24/16);
}

// ## Nesting
.straddle {
  @media print {}
  
  &:focus,
  &:hover {
    
  }
  
  &[attr*="wiggle"] {}
  
  @at-root .track{}
}


// ## Conditionals 
.ballin {
  $space: 'power';
  
  @if $space == 'jam' {
    transform: scale(1, -1);
  } @else if $space == 'power' {
    transform: scale(-1, 1);
  } @else {
    transform: scale(0, 0);
  }
  
  $doodle: 20;
  @if $doodle < 0 {
    background: #eaa;
  } @else if $doodle == 0 {
    background: #aea;
  } @else {
    background: #aae;
  }
}

// ## Mixins
@mixin turbo($background, $color: '#afa') {
  background: $background;
  color: $color;
}

.speeder {
  @include turbo(#000);
}

// ## For Loop
.zazzle {

  @for $i from 1 through 20 {

    &:nth-child(#{$i}) {
      background: hsl((255 / 20) * $i, 90, 60);
    }
  }
}

// ## Each Loop
$theme-colors: (
  (blue, $blue),
  (mint, $mint)
);

@each $label, $color in $theme-colors {

  .theme-#{$label} & {
    color: $color;
  }
}

$social-themes: (
  facebook: #3b5998,
  twitter: #55acee
);

@each $label, $color in $social-themes {

  .theme-#{$label} {
    color: $color;
  }
}