SASS

SASS TUTORIALS

• SCSS Tutorial
• 7 Sass techniques to help you write better code
• Structuring your Sass Projects
• css-tricks: Sass Techniques from the Trenches

MIXINS

• GitHub: Bootstrap Mixins

Building Off of Bootstrap

@mixin breakpoint($class) {
  @if $class == xs {
    @media (max-width: 767px) { @content; }
  }
 
  @else if $class == sm {
    @media (min-width: 768px) { @content; }
  }
 
  @else if $class == md {
    @media (min-width: 992px) { @content; }
  }
 
  @else if $class == lg {
    @media (min-width: 1200px) { @content; }
  }
  
  @else if $class == xl {
    @media (min-width: 1800px) { @content; }
  }

  @else {
    @warn "Breakpoint mixin supports: xs, sm, md, lg, xl";
  }
}

Using the Mixin Within Your Code

aside.primary {
  float: right;
  width: 350px;
  @include breakpoint(sm) {
    float: none;
    width: 100%;
  }
}

Mixin Resources

• Responsive Desing: Helpful SASS mixins
• Simple SASS mixins to handle responsive breakpoints

Responsive Font Size

• Using a Mixin to Take the Math out of Responsive Font Sizes

First and foremost, RFS needs to be installed on the project. It’s available in npm and Yarn:

npm install rfs

styles.scss

/* import the rfs mixin */
@import "~rfs/scss";

body {
  @include font-size(20px);
  @include font-size(1.125rem);
}

h1 {
  @include font-size(50px);
  @include font-size(4.5rem);
}
h2 {
  @include font-size(40px);
  @include font-size(3.75rem);
}
h3 {
  @include font-size(30px);
  @include font-size(1.5rem);
}

Both px and rem units are also supported. If a value without a unit is passed, px is used by default. The font sizes are always rendered in rem (in combination with vw) to make sure the font sizes also increase when the default font size is increased in the browser (this is a feature often used by visually impaired people).