cssfly

CSSFly est un préprocesseur CSS qui ajoute de nouvelles fonctionnalités tels que des variables, import, des tableaux, des foreach et des conditions.

Documentation

Pour utiliser le programme, il faut utiliser la commande suivante :

node ./app.js input.cssfly output.css

.container {
  a {
    color: red;

    :hover {
      color: black;
    }
  }
}

Il est possible d'utiliser des variables globales et locales. Redefinition possible.

$a = 10px;
$b = 100px;
$size = $a * $b;
$size = $a + $b;

.container {
    height: $size;
}

.container-fluid {
  $size = 5px;
  height: $size;
}

@if(1 == 1)
h2 {
  color: red;
}
@elseif(false)
h2 {
  color: green;
}
@else
h2 {
  color: black;
}
@endif

$time = [(day, blue), (night, dark), (evening, pink)];

@each $name, $color in $time

    .time-$name{
        color:$color;
    }

@endeach

$pd-size = [1, 2, 5, 18, 14];

@each $size in $pd-size

    .padding-$size{
        padding:$size;
    }

@endeach

Il est possible d'importer des fichiers externes et internes (chemin débute à la racine de cssfly).

@import("https://google.com/style.css");
@import("style.css");
@import("style.cssfly");