¿Existe un SASS.js? ¿Algo como LESS.js?

112

He usado LESS.js antes. Es fácil de usar, algo como

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

Vi SASS.js . ¿Cómo puedo usarlo de manera similar? Analizar un archivo SASS para usarlo inmediatamente en HTML. ¿Parece que SASS.js se usa más con 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
fuente
6
Para la producción es raíz del mal, para el desarrollo tienes sass watch.
Hauleth
3
Me gusta la idea, ya que el problema con "sass watch" es que a veces se prueba la página accidentalmente antes de que "sass watch" se ejecute. Con less.js puede cargar la página y asegurarse de que el css haya sido compilado cuando vea la página. Por supuesto, solo en el entorno de desarrollo.
Maya Kathrine Andersen
Echa un vistazo a SassMeister: sassmeister.com - un compilador de SASS en línea gratuito
Dan
1
De hecho, existe sass.js
LukyVj
@Hauleth sass watch (como menos reloj) a veces no es una opción. Especialmente cuando sus archivos de origen son manejados por una compilación / dependencia de terceros y solo puede tener los archivos de origen completos cuando está empaquetando o implementando su aplicación web y la implementación es lenta. (es decir, aplicaciones web Java)
Zardoz89

Respuestas:

42

No existe una implementación JavaScript autorizada oficialmente de sass o scss. Hay un par de implementaciones en progreso que he visto, pero ninguna que pueda recomendar usar en este momento.

Sin embargo, algunos puntos:

  1. ¿Por qué debería hacer que todos sus usuarios compilen sus hojas de estilo cuando puede hacerlo de una vez para todos?
  2. ¿Cómo se vería su sitio si JavaScript estuviera deshabilitado?
  3. Si decide cambiar a una implementación del lado del servidor en el futuro, todas sus plantillas deben cambiarse en consecuencia.

Entonces, aunque es un poco más de configuración para comenzar, nosotros (el equipo central sass) creemos que la compilación del lado del servidor es el mejor enfoque a largo plazo. Del mismo modo, los menos desarrolladores prefieren la compilación del lado del servidor para las hojas de estilo de producción.

chriseppstein
fuente
157
mi caso de uso: desarrollo de plantilla html + css que se pondrá en el proyecto rails. Sería bueno tener sass.js para fines de desarrollo de localhost para no tener que jugar con las cosas del servidor.
Josef Richter
93
Hay muchos casos en los que la compilación del lado del cliente es útil. Por ejemplo, si desea que los usuarios jueguen con el aspecto de su página y solo guarden el resultado, ellos eligen volver al servidor.
montrealmike
26
Estoy 100% de acuerdo con chriseppstein (¿por qué demonios quieres que los usuarios compilen hojas de estilo?), No cubierto aquí, simple y llanamente: desarrollo. Todo mi código js implementado quiero ser minificado y comprimido, como con mi css. Pero durante el desarrollo, es útil tener acceso al código en lugar de la versión "compilada". No estoy seguro de hablar en nombre de todos los ingenieros de front-end, pero puedo decir que muchos de nosotros usamos nuestro navegador y un editor como las únicas herramientas necesarias durante la fase de desarrollo. No quiero tener que "compilar" sass / scss durante el desarrollo. Implementación / CI / Producción son un asunto diferente
Graza
15
Para arrojar algo del lado de los autores; Me gustaría considerar usar SASS pero no uso ni quiero usar Ruby; por lo tanto, una solución del lado del cliente es preferible a ninguna. Escribirlo en Ruby restringe su uso solo a usuarios de Ruby; si estaba escrito en JS, podría haberse usado en clientes o en el servidor (con nodo, asp clásico, asp.net y posiblemente otros).
Dan
27
una implementación de JavaScript también podría usarse del lado del servidor con node / rhino, etc.sin tener que tener una dependencia de ruby
Sam Hasler
29

Desde visionmeda / sass.js ya no está disponible y SCSS-js no se ha actualizado en 2 años, puede ser que le interesan en sass.js . Es la biblioteca de C ++ libsass (también utilizada por node-sass ) compilada en JavaScript usando Emscripten. Una aplicación para hojas de estilo SCSS compilación vinculados o inline en html se puede encontrar en sass.link.js .

Pruebe sass.js usando el área de juegos interactiva

Rodneyrehm
fuente
3
Ahora solo necesitamos un compilador de C ++ a Ruby y podemos unificar el código base.
joeytwiddle
1
sass.js parece tener un tamaño considerablemente grande de 670 KB (comprimido en gzip) en comparación con el tamaño de 143 KB de less.js (comprimido en gzip). tampoco veo ninguna opción en sass.js para establecer dinámicamente variables css en comparación con less.js. esto es realmente útil cuando tienes un sitio temático
Anirudha
5

Definitivamente no debería hacer que todos sus usuarios compilen hojas de estilo, sin embargo, una implementación de JavaScript también se puede ejecutar en el servidor. También estoy buscando una implementación de javascript sass, para usar en una aplicación node.js. ¿Es esto algo que el equipo sass está considerando?

tilleryj
fuente
3
¡No quiero usar SASS.js para la producción! Quiero poder implementar una máquina de desarrollo sin necesidad de instalar ruby ​​solo para SASS. Una vez hecho el desarrollo, puedo procesar el SASS en cualquier máquina y mover el CSS resultante al servidor de producción.
A. Matías Quezada
1
Le sugiero que mire el uso de Stylus en lugar de sass en los proyectos de Node.
airtonix
3

Hay un intento en GitHub , scss-js . Sin embargo, está incompleto y no ha tenido ningún compromiso en cinco meses.

Peter Lyons
fuente
1
¿Esto parece un módulo de node js? La pregunta original era una implementación del lado del cliente, ¿no?
jayarjo
1

Por qué LibSass

Si bien no existe una implementación de JavaScript de sass autorizada oficialmente, existe un puerto oficial C / C ++ del motor Sass, conocido como LibSass . Debido a que LibSass es una implementación oficial, es mejor optar por una biblioteca de JavaScript que use LibSass bajo el capó.

En el servidor

Para JavaScript que se ejecuta en un entorno Node.js, existe Node-sass .

Debajo del capó, Node-sass usa LibSass en sí.

En el navegador

JavaScript se ejecuta en el navegador, no hay Sass.js .

Bajo el capó, Sass.js usa una versión de LibSass (v3.3.6 en el momento de escribir esto) que se ha convertido a JavaScript con Emscripten .

John Slegers
fuente