Mixins & Extends

Mixins:

---

Mixins allow you to define styles/rulesets that can be re-used and referenced.

@include ipad-breakpoint {}

  @include ipad-breakpoint {
    display: block;
  }

  Compiles to:

  @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {
    display: block;
  }

@include hover-focus {}

  .class {
    @include hover-focus {
      color: red;
    }
  }

  Compiles to:

  .class:hover,
  .class:focus {
    color:red;
  }

@include invertPage('.class') {}

  @include invertPage('.contentWrapper') {
    margin: 1rem auto;
  }

  Compiles to:

  .contentWrapper {
    body:not(.homePage) & {
      padding: 1rem 15px;
      border-radius: 0.25rem;
      margin: 1rem auto;
    }
    .tertPage & {
      background-color: $tertiary-page-bg;
      color: invert($tertiary-page-bg);
    }
    .listPage & {
    background-color: $list-page-bg;
    color: invert($list-page-bg);
    }
  }

Adding drop shadows:

  .class {
    @include boxShadow
  }

  and on hover:

  .class {
    @include hover-focus {
      @include boxShadowHover
    }
  }

@include makeType('parent of modules') {other siblings of modules {}} Makes type and make list modules be side by side.

  After adding type and make modules, use:

  @include makeType('#spotlightPane') {
    .HTMLModule_12345 {
      width: 100%;
    }
  }

  Compiles to:

  #spotlightPane {
    display: flex;
    flex-wrap: wrap;}
  #spotlightPane .HTMLModule_12345 {
    width: 100%;}
  .ResponsiveFilterByType,
  .ResponsiveMakeList {
    flex: 1 0 100%;
    margin-top: 1rem;
    @include media-breakpoint-up(lg) {
      flex: 1 0 50%; }}
  .ResponsiveFilterByType {
    .FilterByType_Main {
      @extend %filterWithAfterText !optional;
      padding: 1rem;
      ul {
        display: flex;
        flex-wrap: wrap;
        text-align: center; }
      li {
        flex: 0 50%;
        margin-bottom: 0.5rem;
        @include media-breakpoint-up(sm) {
          flex: 0 25%; } } }}
  .ResponsiveMakeList {
    .FilterBackground {
      padding: 1rem;
      -webkit-column-count: 2;
      -moz-column-count: 2;
      column-count: 2;
      @include media-breakpoint-up(md) {
        -webkit-column-count: 4;
        -moz-column-count: 4;
        column-count: 4; } }}

@include reset-text('.class') {} Makes text color default back to $body-color and default font-family

  @include reset-text('.s41r_footerCenter .testimonialInfo') {
    font-size: 1rem;
  }

  Compiles to:

  .s41r_footerCenter .testimonialInfo {
    span, p, b, i, font {
      font-family: inherit!important;
      color: $body-color!important;
      font-size: 1rem;
    }
  }

Extends:

---

A placeholder is a selector, that won't appear in the CSS output unless extended.

%filterWithAfterText Adds vehicle type labels as ::after psuedo elements for the FilterByType module.

  .FilterByType_Main {
    @extend %filterWithAfterText !optional;
  }

%quickSearchBox Displays Responsive Search as a box.

  .ResponsiveSearch {
    @extend %quickSearchBox;
  }

%quickSearchBar Displays Responsive Search as a bar.

  .ResponsiveSearch {
    @extend %quickSearchBar;
  }

%default-btns Gives buttons a default styling.

  .button-class {
    @extend %default-btns;
  }

%cardboxStyle Wraps an element and styles it as a card.

  .class{
    @extend %cardboxStyle;
  }