Sass Basics

Sass Basics

// variable
$font-stack: Helvetica, sans-serif;
$primary-color: #16a085;
$secondary-color: #e67e22;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

// nesting
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

// extend
%btn {
    display: inline-block;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    border-radius: 0.25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

//mixin
@mixin button($bg, $color) {
    @extend %btn;
    color: $color;
    background-color: $bg;
    border-color: $bg;
}

.btn-river {
  @include button(#3498db, white);
}
.btn-amethyste {
  @include button(#9b59b6, white);
}
.btn-carrot {
 @include button(#e67e22, white);
}
.btn-cloud {
 @include button(#ecf0f1, #7f8c8d);
}