FSCSS Example

Using FSCSS to reduced the overall use of CSS, such as the variables, instead of --var: value ;is $var: value ;
Instead of var(--var) is $var! And array loops for animation:

Test Code:

<script src="https://cdn.jsdelivr.net/npm/fscss@1.1.2/exec.js" async=""></script>
<div name=foo></div> 
<style> 
/* Variables */
$primary-color: midnightblue;
$bg-stack: #FF9955 url(image.png) No-repeat center;
$border: 1px solid #4CAF50;
$gradient: mx(#111, #222, #333, #444, #555,#000,'00f,');
/* body elem */
Body{
Background: linear-gradient(30deg, $gradient!#0f0);
color: $primary-color!;
} 
/* Select by name */
$(name: foo){
Background: $bg-stack!;
Border: $border!;
%2(width, height[:200px;])
}
</style> 

Learn more about FSCSS
🕺FOLLOW Me on CODEPEN