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%;
  }
}

Breakpoints

Size	Bootstrap	Material UI	Kitiya
xs	767	0	599
sm	768	600	600
md	992	960	900
lg	1200	1280	1200
xl	1800	1920	1800

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).