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

[ben-denzer]

I made a 'resources' repo at https://github.com/FCC-Las-Vegas/resources - I'm in need of some help trying to figure out how the thing should be designed / formatted though. We'll leave this issue on here for now, and hopefully we can get it migrated over to the new repo eventually.

[j7an]

Looks great

[149203]

Thanks @ben-denzer! I copy-pasta'd this issue to that resources repo.