Sass

_mixins.scss

// Fonts

@mixin font-header {
  font-family: 'Lobster', cursive;
}

@mixin font-default {
  font-family: 'Open Sans', sans-serif;
}

// Responsive

@mixin img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
}

@mixin mq($param) {

  $bootstrap-breakpoints: (
    xs-only: ("(max-width: 575px)"),
    sm-only: ("(min-width: 576px) and (max-width: 767px)"),
    md-only: ("(min-width: 768px) and (max-width: 991px)"),
    lg-only: ("(min-width: 992px) and (max-width: 1199px)"),
    xl-only: ("(min-width: 1200px)"),
    xs-down: ("(max-width: 575px)"),
    sm-down: ("(max-width: 767px)"),
    md-down: ("(max-width: 991px)"),
    lg-down: ("(max-width: 1199px)"),
    sm-up: ("(min-width: 576px)"),
    md-up: ("(min-width: 768px)"),
    lg-up: ("(min-width: 992px)"),
    xl-up: ("(min-width: 1200px)"),
  );

  @media #{map-get($bootstrap-breakpoints, $param)} {
    @content
  }

}

// Links

@mixin any-link {

  &:link,
  &:active,
  &:visited {
    @content
  }
}

// Headers

@mixin headers {

  h1, h2, h3, h4, h5, h6 {
    @content
  }
}

$headers: ("h1", "h2", "h3", "h4", "h5", "h6");

// Selection color

@mixin select-color {

  &::selection {
    @content;
  }

  &::-moz-selection {
    @content;
  }
}

// Inputs

@mixin placeholder {

  &::-webkit-input-placeholder {
    @content
  }

  &::-moz-placeholder {
    @content
  }

  &:-ms-input-placeholder {
    @content
  }

  &:-moz-placeholder {
    @content
  }
}

// margins not first child

@mixin margin-not-first($direction, $margin) {
  margin-#{$direction}: $margin;

  &:first-child {
    margin-#{$direction}: 0;
  }
}

// wordpress content

@mixin post-content {

  p {
    @include margin-not-first(top, 10px);
    line-height: 1.4;
  }

  @each $header in $headers {

    $index: index($headers, $header);

    #{$header} {
      @include margin-not-first(top, 10px);
      font-size: 32px - $index*2;
    }
  }

  ul,
  ol {
    margin: 20px 0;
  }

  li {
    @include margin-not-first(top, 10px);
  }

  ul {

    li {
      padding-left: 30px;
      box-sizing: border-box;
      position: relative;

      &:before {
        content: '';
        display: block;
        border-radius: 50%;
        background-color: $color-accent;
        width: 7px;
        height: 7px;
        position: absolute;
        left: 8px;
        top: 7px;
      }
    }
  }
}

_reset.scss

input,
textarea,
button {
  border: none;
  padding: 0;
  margin: 0;
  background-color: transparent;

  &, &:focus {
    outline: none;
  }
}

textarea {
  resize: none;
}

a {

  @include any-link {
    outline: none;
    text-decoration: none;
  }

  &:hover {
    text-decoration: none;
    outline: none;
  }
}

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

p {
  margin: 0;
}

@include headers {
  font-weight: normal;
  margin: 0;
}