SCSS vs modern CSS

scss-v-css.md

CSS vs SASS

CSS on its own can be fun, but stylesheets are getting larger, more complex, and harder to maintain. This is where a preprocessor can help. Sass lets you use features that don't exist in CSS yet like variables, nesting, mixins, inheritance and other nifty goodies that make writing CSS fun again.

that's from the Sass website, while I agree that may have been true 10 years ago, CSS has come a long way since then :) i think most of Sass's features (as listed here) are all things CSS3 has since taken care of. so, without further ado, my case:

Variables

SCSS (example from their website)

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

CSS (how i'd do it) caniuse

:root {
  --font-stack:    Helvetica, sans-serif;
  --primary-color: #333;
}


body {
  font: 100% var(--font-stack);
  color: var(--primary-color);
}

Nesting

SCSS (example from their website)

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

CSS (how i'd do it), no "caniuse" link here, this has always been a thing :)

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li { display: inline-block; }

nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

A note on CSS nesting: there's lots of fancy stuff u can do w/CSS selectors to define exactly how the nesting works, but two most common are: there's the descendant selector nav a which means any a which is a descendant of nav (regardless how deeply buried it is, could be a great great great grandchild), && then there's the Child selector nav > a which means any a which is a child of nav (no grand-kids effected)... there's more where that came from (all sorts of fancy selectors for targeting siblings or patterns of children && these can be combined w/other selectors to do all sorts of fancy tricks).

Partials / Modules

what is referred to as a "partial" in Sass (file w/the naming convention _filename.scss) in css is just a css file filename.css. to include these in other files:

SCSS

@use 'filename';

CSS (how i'd do it) caniuse

@import 'filename.css';

Mixins

Some things in CSS are a bit tedious to write, especially with CSS3 and the many vendor prefixes that exist. A mixin lets you make groups of CSS declarations that you want to reuse throughout your site. You can even pass in values to make your mixin more flexible. A good use of a mixin is for vendor prefixes. Here's an example for transform.

SCSS

@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}
.box { @include transform(rotate(30deg)); }

okokok... i'll give them that... buuuuuuut, it's 2020!!! i can't remember the last time i used vendor prefixes :P (definitly don't need it for transform these days), so in this particular example all u really need is:

.box { transform: rotate(30deg); }

Extend/Inheritance

SCSS (example from their website)

/* This CSS will print because %message-shared is extended. */
%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

// This CSS won't print because %equal-heights is never extended.
%equal-heights {
  display: flex;
  flex-wrap: wrap;
}

.message {
  @extend %message-shared;
}

.success {
  @extend %message-shared;
  border-color: green;
}

.error {
  @extend %message-shared;
  border-color: red;
}

.warning {
  @extend %message-shared;
  border-color: yellow;
}

Ok... this ones a little tricky, b/c it involves HTML && CSS, but if i understand what's going on above correctly, i figure it could be done like this:

/* This CSS will print because %message-shared is extended. */
.message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.message {
  /* ... */
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

.warning {
  border-color: yellow;
}

  <div class="message message-shared"></div>
  <div class="success message-shared"></div>
  <div class="error message-shared"></div>
  <div class="warning message-shared"></div>

Operators

SCSS (example from their website)

.container {
  width: 100%;
}

article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}

aside[role="complementary"] {
  float: right;
  width: 300px / 960px * 100%;
}

so... i'm not exactly sure what's goin on in that example, the website says:

Doing math in your CSS is very helpful. Sass has a handful of standard math operators like +, -, *, /, and %. In our example we're going to do some simple math to calculate widths for an aside & article.. We've created a very simple fluid grid, based on 960px. Operations in Sass let us do something like take pixel values and convert them to percentages without much hassle.

if i wanted "a very simple fluid grid" i'd probably just use CSS-Grids to make that happen, rather than having to do math (it's also way less CSS, here's a quick example of what i imagine they're trying to do)... but if u really wanna do math, we've got calc() now, for example: width: calc(100% - 30px);