Existe-t-il un SASS.js? Quelque chose comme LESS.js?

112

Je l' ai utilisé LESS.js avant. C'est facile à utiliser, quelque chose comme

<link rel="stylesheet/less" href="main.less" type="text/css">
<script src="less.js" type="text/javascript"></script>

J'ai vu SASS.js . Comment puis-je l'utiliser de la même manière? Analyse d'un fichier SASS pour une utilisation immédiate en HTML. Il semble que SASS.js est plus à utiliser avec Node.js ?

var sass = require('sass')
sass.render('... string of sass ...')
// => '... string of css ...'

sass.collect('... string of sass ...')
// => { selectors: [...], variables: { ... }, mixins: { ... }}
css sass less Jiew Meng
la source
6
Pour la production, c'est la racine du mal, pour le développement que vous avez sass watch.
Hauleth
3
J'aime l'idée puisque le problème avec "sass watch" est que vous testez parfois la page par inadvertance avant que "sass watch" ne se lance. Avec less.js, vous pouvez charger la page et vous assurer que le css a été compilé lorsque vous voyez la page. Bien sûr uniquement dans l'environnement de développement.
Maya Kathrine Andersen
Découvrez SassMeister: sassmeister.com - un compilateur SASS en ligne gratuit
Dan
1
Il y a, en effet, sass.js
LukyVj
@Hauleth sass watch (comme moins watch) n'est parfois pas une option. Surtout lorsque vos fichiers sources sont gérés par une version / dépendance tierce et que vous ne pouvez avoir les fichiers source complets que lorsque vous compressez ou déployez votre application Web et déployez sa lenteur. (ie ... java web apps)
Zardoz89

Réponses:

42

Il n'y a pas d'implémentation JavaScript officiellement sanctionnée de sass ou scss. Il y a quelques implémentations en cours que j'ai vues, mais aucune que je ne peux recommander d'utiliser pour le moment.

Cependant, veuillez quelques points:

  1. Pourquoi devriez-vous obliger tous vos utilisateurs à compiler vos feuilles de style alors que vous pouvez le faire une fois pour tous.
  2. À quoi ressemblerait votre site si JavaScript était désactivé.
  3. Si vous décidez de passer ultérieurement à une implémentation côté serveur, tous vos modèles doivent être modifiés en conséquence.

Donc, bien qu'il s'agisse d'un peu plus de configuration pour commencer, nous (l'équipe principale de sass) pensons que la compilation côté serveur est la meilleure approche à long terme. De même, les moins développeurs préfèrent la compilation côté serveur pour les feuilles de style de production.

Chriseppstein
la source
157
mon cas d'utilisation: développer un template html + css qui sera mis dans le projet rails. Ce serait bien d'avoir sass.js à des fins de développement localhost afin de ne pas avoir à jouer avec le serveur.
Josef Richter le
93
Il existe de nombreux cas dans lesquels la compilation côté client est utile. Par exemple, si vous souhaitez permettre aux utilisateurs de jouer avec l'apparence de leur page et d'enregistrer uniquement le résultat qu'ils choisissent sur le serveur.
montrealmike
26
Je suis à 100% d'accord avec chriseppstein (pourquoi diable voulez-vous que les utilisateurs compilent des feuilles de style), non couvert ici, purement et simplement: le développement. Tout mon code js déployé que je veux être minifié et compressé, comme avec mon css. Mais lors du développement, cela permet d'avoir accès au code plutôt qu'à la version "compilée". Je ne suis pas sûr de parler au nom de tous les ingénieurs front-end, mais je peux dire que nous sommes très nombreux à utiliser notre navigateur et un éditeur comme seuls outils nécessaires pendant la phase de développement. Je ne veux pas avoir à "compiler" sass / scss pendant le développement. Déploiement / CI / Production sont une autre affaire
Graza
15
Pour jeter quelque chose du côté des auteurs; Je voudrais envisager d'utiliser SASS mais je n'utilise pas et je ne veux pas utiliser Ruby; par conséquent, une solution côté client est préférable à aucune. L'écrire en Ruby limite son utilisation aux seuls utilisateurs de Ruby; s'il était écrit en JS, il aurait pu être utilisé sur des clients ou sur un serveur (avec node, asp classique, asp.net et éventuellement d'autres).
Dan
27
une implémentation JavaScript pourrait également être utilisée côté serveur avec node / rhino etc. sans avoir à avoir une dépendance sur ruby
Sam Hasler
29

Depuis visionmeda / sass.js est plus disponible et ne SCSS-js n'a pas été mis à jour en 2 ans, je pourrais vous intéresser à sass.js . C'est la bibliothèque C ++ libsass (également utilisée par node-sass ) compilée en JavaScript à l'aide d'Emscripten. Une mise en œuvre pour compiler les feuilles de style SCSS liés ou inline en html se trouve à sass.link.js .

Essayez sass.js en utilisant le terrain de jeu interactif

rodneyrehm
la source
3
Maintenant, nous avons juste besoin d'un compilateur C ++ vers Ruby et nous pouvons unifier la base de code.
joeytwiddle
1
sass.js semble être considérablement énorme en taille 670KB (gzippé) par rapport à la taille 143kb de less.js (gzippé). De plus, je ne vois aucune option dans sass.js pour définir dynamiquement des variables css par rapport à less.js. ceci est vraiment utile lorsque vous avez le site
mobile
5

Vous ne devriez certainement pas obliger tous vos utilisateurs à compiler des feuilles de style, mais une implémentation javascript peut également fonctionner sur le serveur. Je recherche également une implémentation javascript sass - à utiliser dans une application node.js. Est-ce quelque chose que l'équipe sass envisage?

tilleryj
la source
3
Je ne veux pas utiliser SASS.js pour la production! Je veux pouvoir déployer une machine de développement sans avoir besoin d'installer ruby ​​juste pour SASS. Une fois le développement terminé, je peux traiter le SASS sur n'importe quelle machine et déplacer le résultat CSS vers le serveur de production.
A. Matías Quezada
1
Je vous suggère d'utiliser Stylus au lieu de sass sur les projets Node.
airtonix
3

Il y a une tentative sur GitHub , scss-js . Cependant, il est incomplet et n'a eu aucun engagement depuis cinq mois.

Peter Lyons
la source
1
Cela ressemble à un module node js? La question initiale était une implémentation côté client, non?
jayarjo
1

Pourquoi LibSass

Bien qu'il n'y ait pas d'implémentation JavaScript officiellement sanctionnée de sass, il existe un port C / C ++ officiel du moteur Sass, appelé LibSass . Parce que LibSass est une implémentation officielle, il est préférable d'opter pour une bibliothèque JavaScript qui utilise LibSass sous le capot.

Sur le serveur

Pour JavaScript s'exécutant dans un environnement Node.js, il existe Node-sass .

Sous le capot, Node-sass utilise LibSass lui-même.

Dans le navigateur

Pour l' exécution de JavaScript dans le navigateur, il y a Sass.js .

Sous le capot, Sass.js utilise une version de LibSass (v3.3.6 au moment où j'écris ceci) qui a été convertie en JavaScript avec Emscripten .

John Slegers
la source