Moving to SCSS from CSS

[149203]

We discussed this at the last meeting. Here's some simple starter links. If you want to try SCSS out right now, simply set the Codepen CSS Preprocessor to SCSS (found in CSS settings) and fire away. (If you're using another IDE, you'll have to look that up.) I recommend SCSS to start because you can put normal CSS code in a .scss file and it will work normally. So it's a good way to introduce some new things slowly. (SCSS stands for "Sassy CSS" btw!)

Learn SASS in 15 Minutes

Write Better Media Queries With SASS

Using media queries in Sass 3.2

Creating a Dead Simple Sass Mixin to Handle Responsive Breakpoints

The above examples use functions in their use of breakpoints. But here I take an approach that is uglier up front but will be less code when implemented. e.g. @include sm is shorter and clearer than @include bp(sm).

@mixin sm {
  @media (max-width: 479px) {
    @content;
  }
}

@mixin md {
  @media (min-width: 480px) and (max-width: 719px) {
    @content;
  }
}

@mixin lg {
  @media (min-width: 720px) and (max-width: 959px) {
    @content;
  }
}

@mixin xl {
  @media (min-width: 960px) {
    @content;
  }
}

.test {
  color: black;
  @include sm {
    color: blue;
  }
  @include md {
    color: pink;
  }
  @include lg {
    color: cyan;
  }
  @include xl {
    color: green;
  }
}

[j7an]

Thanks, there's also a video tutorial series for SASS on Youtube. Not sure if its teaching SCSS or the Ruby SASS syntax though: SASS