Wakkos

$breakpoints: (
  'small'  : 48em,
  'medium' : 56.25em,
  'large'  : 1600px,
  'qweqwe' : 1em,
);

@mixin respond-to($width) {
  @if map-has-key($breakpoints, $width) {
    @media (min-width: map-get($breakpoints, $width)) {

Wakkos

$bp-small: 600px;
$bp-medium: 720px;
$bp-large: 1440px;

@mixin mq($bp: $bp-medium, $bp-direction: min-width) {
    @media all and ($bp-direction: $bp) {
        @content;
    }
}

Wakkos

$size-vars: (
  "xx-small" :    .50,
  "x-small"  :    .70,  // 11px
  "small"    :    .75,  // 12px
  "medium"   :    .875, // 14px
  "normal"   :    1,    // 16px
  "x-normal" :    1.12, // 18px
  "big"      :    1.3,  // 21px
  "x-big"    :    1.8,  // 29px
  "xx-big"   :    2.5,  // 32px

Wakkos

$size-vars: (
  "xx-small" :    .50,
  "x-small"  :    .70,  // 11px
  "small"    :    .75,  // 12px
  "medium"   :    .875, // 14px
  "normal"   :    1,    // 16px
  "x-normal" :    1.12, // 18px
  "big"      :    1.3,  // 21px
  "x-big"    :    1.8,  // 29px
  "xx-big"   :    2.5,  // 32px

Wakkos

@each $header, $margin-bot, $font-size,
    $line-height
        in (h1, 0.5rem, 3, 1.1)
        (h2, 0.5rem, 2, 1.5)
        (h3, 1.5em, 1.4, 1.5)
        (h4, 1.5em, 1.3, 1.5)
        (h5, 0.5rem, 1.2, 1.5)
        (h6, 0.5rem, 0.9, 1.3)
{
    #{$header},

Wakkos

@each $header, $margin-bot, $font-size,
    $line-height
        in (h1, 0.5rem, 3, 1.1)
        (h2, 0.5rem, 2, 1.5)
        (h3, 1.5em, 1.4, 1.5)
        (h4, 1.5em, 1.3, 1.5)
        (h5, 0.5rem, 1.2, 1.5)
        (h6, 0.5rem, 0.9, 1.3)
{
    #{$header},

Wakkos

$unit: 6;

$directionsmap: (
top: top, 
right: right,
bottom: bottom, 
left: left
);

@each $key, $value in $directionsmap {