AcCSS : css processor (Présentation étoffée)
Présentation complète : http://cahnory.fr/AcCSS/
GitHub: https://github.com/cahnory/AcCSS
Demo: http://www.cahnory.fr/appz/AcCSS.html
Ça fait quoi ?
Blocks imbriqués
Source :
Code:
1
2
3
4
5
| #parent {
#child, #secondChild {
color: red;
}
} |
Résultat :
Code:
1
2
| #parent #child { color: red; }
#parent #secondChild { color: red; } |
AcCSS essaira de mixer les déclarations similaires mais c'est encore en cours de dev (suivre l'évolution sur le git)
Variables
Source :
Code:
1
2
| $color: red;
div { color: $color; } |
Résultat :
Code:
div { color: red; }
Fonctions
Définition
Code:
1
2
3
4
| $foo: $(bar) {
$->set('foo', $bar);
$->set('-webkit-foo', $bar);
$} |
Les fonctions sont du code php envoyé à la fonction eval. Comme cette technique n'est pas sécurisé elle est désactivée par défaut est peut être réactiver via :
$AcCSS->allowUserFunc(true);
La demande d'autorisation se fait lors de la déclaration d'une fonction et non lors de l'appel à la fonction. En clair, il est possible pour un même objet AcCSS d'avoir des autorisations différentes pour plusieurs portions de code.
À l'avenir je souhaite que la création d'"extensions" se fasse plutôt côté php via un mécanisme de plugin.
Appel
Source :
Résultat :
Code:
1
2
3
4
| div {
foo: bar;
-webkit-foo: bar;
} |
Divers
Par défaut, redéfinir une même propriété remplacera la précédente. Afin de protéger une propriété du remplacement, il suffit de la préfixer avec le signe "+" :
Source :
Code:
1
2
3
4
| color: black;
color: red;
+display: -moz-inline-stack;
display: inline-block; |
Résultat :
Code:
1
2
3
| color: red;
+display: -moz-inline-stack;
display: inline-block; |
Pourquoi avoir codé ça ?
Car je n'arrivai pas à dormir et que cela faisait un moment que je voulais coder une telle solution par moi même. En effet j'aime bien le confort apporté par LessPHP (pour ne citer que lui) mais certains comportements ne me convenaient pas (remplacement de valeur).
