28106 sujets

CSS et mise en forme, CSS3

Bonjour,
Je souhaite utilisé le framework CSS Foundation et notamment le personnalisé à l'aide de ses fonctionnalités SASS.
Le problème c'est que je ne suis pas sûre d'avoir bien compris comment SASS fonctionne.

Est ce que SASS est quelque chose que l'on utilise en local (en développement) pour pouvoir compiler son travail en des fichiers CSS que l'on envoi ensuite sur son site distant (pour la production) ?

Ou est ce que SASS s'utilise également en distant ?
Administrateur
Bonjour,

Il y a une 3e option qui est peut-être la 2nde dont tu parles : compiler Sass sur chaque navigateur de chaque visiteur. Je crois que ça n'existe pas pour Sass mais ça existait avec LESS.js : il faut oublier cette option tout de suite, quelque soit le préprocesseur ^^

Chez Alsacreations.fr on utilise Prepros (le 4 est encore open source grauite ou propriétaire payante, la version 5 n'est que payante) sur nos postes.
Mais tu peux inclure la compilation Sass dans un processus de build avec grunt, gulp, etc avant la minification des CSS résultantes en parallèle de la minification du JS et surtout de la compression des images PNG, SVG, etc
Une fois configuré, c'est automatique (c'est un peu le but). Note : y a pas besoin de lancer un script à chaaaaque fois que tu enregistres un fichier .sass, il y a grunt-watch ou gulp-newer pour surveiller ça et lancer le script qui va bien tout seul. Le but c'est d'être efficace, pas de ralentir notre travail d'intégration Smiley ravi
Merci de vos réponses.
En fait je voulais juste savoir comment cela se passait en pratique avec SASS et COMPASS tout simplement.

Mais j'ai compris maintenant, ce sont un langage de programmation et outil de compilation, mais le résultat final est bien d 'envoyer de simple CSS en ligne.
Administrateur
Oui ce sont des préprocesseurs :
Un préprocesseur est un outil qui prend en entrée un fichier dans un format autre que CSS (LESS, Sass ou Stylus avec nesting, mixins inconnus de CSS) et crée à partir de ça un fichier CSS.
Un "postprocesseur CSS" est un outil qui prend en entrée un fichier CSS et en sortie un nouveau fichier CSS (pour le minifier par exemple ou bien Autoprefixer pour ne plus avoir à penser aux -webkit, -moz- et à les enlever du code quand ils ne sont plus nécessaires ou bien Pleeease qui est composé de pas mal de plugins).

On peut utiliser les 2 si on veut du "nesting" et Autoprefixer (c'est mon cas) ou bien, c'est l'idée de départ de Pleeease, vouloir écrire du CSS avec des variables CSS mais comme ça fonctionne pas dans tous les navigateurs du moment (2014), le transformer en CSS qui passe "sur IE" (bon calc() est pas toujours transformable côté développeur : 2em + 20px le résultat est constant en connaissant la taille de texte mais 25% - 4px par contre ça ira pas)