Existe um SASS.js? Algo como LESS.js?

112

Já usei LESS.js antes. É 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 . Como posso usá-lo de maneira semelhante? Analisando um arquivo SASS para uso imediato em HTML. Parece que SASS.js é mais para uso com 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
fonte

6

Para a produção é a raiz do mal, para o desenvolvimento você tem sass watch.

— Hauleth

3

Eu gosto da ideia, pois o problema com o "sass watch" é que você às vezes testa a página acidentalmente antes que o "sass watch" comece a funcionar. Com less.js você pode carregar a página e ter certeza de que o css foi compilado quando você vir a página. Claro, apenas no ambiente de desenvolvimento.

— Maya Kathrine Andersen

Confira SassMeister: sassmeister.com - um compilador SASS online gratuito

— Dan

1

Existe, de fato, sass.js

— LukyVj

Relógio sass @Hauleth (como menos relógio) às vezes não é uma opção. Especialmente quando seus arquivos de origem são manipulados por uma dependência / construção de terceiros e você só pode ter os arquivos de origem completos quando estiver empacotando ou implantando seu aplicativo da web e implantando lentamente. (ou seja ... aplicativos da web java)

— Zardoz89

42

Não há implementação de JavaScript oficialmente sancionada de sass ou scss. Há algumas implementações em andamento que eu vi, mas nenhuma que eu recomende usar no momento.

No entanto, alguns pontos:

Por que você deveria fazer todos os seus usuários compilarem suas folhas de estilo quando você pode fazer isso de uma vez para todas elas?
Qual seria a aparência do seu site se o JavaScript fosse desativado.
Se você decidir mudar para uma implementação do lado do servidor no futuro, todos os seus modelos devem ser alterados de acordo.

Portanto, embora seja um pouco mais configurado para começar, nós (a equipe central do sass) achamos que a compilação do lado do servidor é a melhor abordagem a longo prazo. Da mesma forma, menos desenvolvedores preferem a compilação do lado do servidor para folhas de estilo de produção.

— chriseppstein
fonte

157

meu caso de uso: desenvolvimento de template html + css que será colocado no projeto rails. seria bom ter sass.js para fins de desenvolvimento de host local para que eu não tenha que mexer com as coisas do servidor.

— Josef Richter,

93

Existem muitos casos em que a compilação do lado do cliente é útil. Por exemplo, se você deseja permitir que os usuários brinquem com a aparência de suas páginas e salvem apenas o resultado que escolherem no servidor.

— montrealmike

26

Eu concordo 100% com chriseppstein (por que diabos você quer que os usuários compilem folhas de estilo), não coberto aqui, puro e simples: desenvolvimento. Desejo que todo o meu código js implantado seja reduzido e compactado, assim como meu css. Mas durante o desenvolvimento, ajuda ter acesso ao código em vez da versão "compilada". Não tenho certeza se falo por todos os engenheiros de front-end, mas posso dizer que muitos de nós usamos nosso navegador e um editor como as únicas ferramentas necessárias durante a fase de desenvolvimento. Não quero ter que "compilar" sass / scss durante o desenvolvimento. Implantação / CI / Produção são um assunto diferente

— Graza

15

Para jogar algo do lado dos autores; Gostaria de considerar o uso de SASS, mas não uso nem desejo usar Ruby; portanto, uma solução do lado do cliente é preferível a nenhuma. Escrevê-lo em Ruby restringe seu uso apenas a usuários de Ruby; se foi escrito em JS, pode ter sido usado em clientes ou no servidor (com nó, asp clássico, asp.net e possivelmente outros).

— Dan

27

uma implementação de JavaScript também pode ser usada no lado do servidor com node / rhino etc. sem ter que ter uma dependência de ruby

— Sam Hasler

29

Desde visionmeda / sass.js não está mais disponível e ECSs-js não foi atualizado em 2 anos, eu poderia interessá-lo em sass.js . É a biblioteca C ++ libsass (também usada por node-sass ) compilada para JavaScript usando Emscripten. Uma implementação de folhas de estilo ECSs compilação vinculados ou indexados num html pode ser encontrada em sass.link.js .

Experimente o sass.js usando o playground interativo

— Rodneyrehm
fonte

3

Agora precisamos apenas de um compilador C ++ para Ruby e podemos unificar a base de código.

— joeytwiddle

1

O sass.js parece ser consideravelmente grande em tamanho 670 KB (gzipado) em comparação com o tamanho less.js de 143kb (gzipado). também não vejo nenhuma opção em sass.js para definir dinamicamente variáveis css em comparação com less.js. isso é realmente útil quando você tem o site

— theamable

7

SIM

Como esperávamos, após reescrevê-lo em C ++ , é possível compilá-lo em Javascript via Emscripten .

Esta é a versão do navegador: https://github.com/medialize/sass.js/

Como eles recomendam, para nó você pode usar este: https://github.com/sass/node-sass

— Nikoloza
fonte

2

Uma combinação disso e da resposta (atualmente aceita) deve ser a resposta realmente aceita.

— plaidcorp

6

Acabei de descobrir um interessante Playground Sass.js. Algumas coisas podem ter mudado ao longo dos anos. Veja isso:

http://medialize.github.io/playground.sass.js/

— Chong Lip Phang
fonte

5

Você definitivamente não deve fazer todos os seus usuários compilarem folhas de estilo, no entanto, uma implementação de javascript também pode ser executada no servidor. Também estou procurando uma implementação de javascript sass - para usar em um aplicativo node.js. Isso é algo que a equipe atrevida está considerando?

— Tilleryj
fonte

3

Não quero usar SASS.js para produção! Eu quero ser capaz de implantar uma máquina de desenvolvimento sem a necessidade de instalar o Ruby apenas para SASS. Assim que o desenvolvimento estiver pronto, posso processar o SASS em qualquer máquina e mover o CSS resultante para o servidor de produção.

— A. Matías Quezada

1

Eu sugiro que você use Stylus em vez de atrevimento em projetos Node.

— airtonix

3

Há uma tentativa no GitHub , scss-js . No entanto, ele está incompleto e não teve nenhum commit em cinco meses.

— Peter Lyons
fonte

1

Isso se parece com um módulo node js? A pergunta original era sobre a implementação do lado do cliente, não?

— Jayarjo

1

Por que LibSass

Embora não haja uma implementação JavaScript oficialmente sancionada do sass, há uma versão oficial C / C ++ do mecanismo Sass, conhecida como LibSass . Como o LibSass é uma implementação oficial, é melhor optar por uma biblioteca JavaScript que usa o LibSass nos bastidores.

No servidor

Para JavaScript em execução em um ambiente Node.js, existe o Node-sass .

Por baixo do capô, o Node-sass usa o próprio LibSass.

No navegador

Para JavaScript em execução no navegador, não há Sass.js .

Nos bastidores, o Sass.js usa uma versão do LibSass (v3.3.6 no momento em que escrevi isso) que foi convertida para JavaScript com o Emscripten .

— John Slegers
fonte