Extended CSS

There are compilers allowing us to write an extended/enhanced CSS, that once compiled, will generate a .css.

They are used to make the CSS files much more readable and cleaner.

  • SASS (14.3k ⭐, .scss, .sass)
  • Less (16.9k ⭐, .less)
  • Stylus (11k ⭐, .styl)

🐲 SASS 🐲

SASS (14.3k ⭐) is one of the two most-used ones.

$ npm install sass
$ sass --watch input.scss output.css # auto-compile 😍
$ sass input.scss output.css # manually compile 😪

Variables

$name: #d41;
p { color: $name; }

Inheritance

.test { }
.test2 { @extend .test; }

Nested tags

You can use & to reference the parent. You can group sub-styles inside one parent, to make the code cleaner.

p {
  // both are the same ("p:hover")
  :hover { color: #0a53be; }
  &:hover { color: #0a53be; }
  // "p span"
  span { color: #fc3; }
  // div > p
  div > & { /* ... */ }
}

Mixin

// declare a mixin
@mixin padding-x ($value) { padding-left: $value; padding-right: $value; }
// use the mixin
.button { @include padding-x(1rem); }
// parameter with a default value
@mixin some-mixin2 ($val: 0px) {}

Statements

$value: 0;
p {
  // if - else if - else
  @if ($value == 0) { color: red; }
  @else if (0) { }
  @else {}
  // for i = 0; i <= 12; i++
  @for $i from 0 through 12 {}
  // while
  $i: 0;
  @while $i <= 12 {
    width: $i+px; // concatenation
    $i: $i + 1;
  }
}

Predefined functions

p {
  color: mix(#FF0033, #FF0033, 50%);
  color: lighten(#FF0033, 50%);
  color: darken(#FF0033, 50%);
}

Split your SCSS into modules

You can create modules to split your code. A module is usually named _other.scss, not other.scss ⚠️. They will be merged into the file importing them, and won't have their own .css file.

You can use "use" or "import" to import a module (ex: _other.scss).

// both are the same
@use "other.scss";
@import "other";

🥂 Less 🥂

Less (16.9k ⭐) is one of the two most-used ones.

👻 To-do 👻

Stuff that I found, but never read/used yet.