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 π²
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.