Esiste un SASS.js? Qualcosa come LESS.js?

112

ho usato LESS.js prima. È facile da usare, qualcosa di simile

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

Ho visto SASS.js . Come posso usarlo in modo simile? Analisi di un file SASS da utilizzare immediatamente in HTML. Sembra che SASS.js sia più utilizzabile 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
fonte

6

Per la produzione è radice del male, per lo sviluppo hai sass watch.

— Hauleth

3

Mi piace l'idea poiché il problema con "sass watch" è che a volte provi accidentalmente la pagina prima che "sass watch" venga eseguito. Con less.js puoi caricare la pagina e assicurarti che il css sia stato compilato quando vedi la pagina. Ovviamente solo nell'ambiente di sviluppo.

— Maya Kathrine Andersen

Dai un'occhiata a SassMeister: sassmeister.com - un compilatore SASS online gratuito

— Dan

1

C'è, infatti, sass.js

— LukyVj

@Hauleth sass watch (come less watch) a volte non è un'opzione. Specialmente quando i tuoi file di origine sono gestiti da una build / dipendenza di terze parti e puoi avere i file di origine completi solo quando impacchetti o distribuisci la tua app web e la distribuzione è lenta. (cioè ... app web java)

— Zardoz89

42

Non esiste alcuna implementazione JavaScript ufficialmente approvata di sass o scss. Ci sono un paio di implementazioni in corso che ho visto, ma nessuna che posso consigliare di utilizzare in questo momento.

Tuttavia, per favore alcuni punti:

Perché dovresti obbligare tutti i tuoi utenti a compilare i tuoi fogli di stile quando puoi farlo una volta per tutti loro.
Come sarebbe il tuo sito se JavaScript fosse disabilitato.
Se in futuro decidi di passare a un'implementazione lato server, tutti i tuoi modelli devono essere modificati di conseguenza.

Quindi, sebbene sia un po 'più di configurazione per iniziare, noi (il team principale di sass) pensiamo che la compilazione lato server sia il miglior approccio a lungo termine. Allo stesso modo, i meno sviluppatori preferiscono la compilazione lato server per i fogli di stile di produzione.

— chriseppstein
fonte

157

il mio caso d'uso: sviluppo di un template html + css che verrà inserito nel progetto rails. Sarebbe bello avere sass.js per scopi di sviluppo localhost in modo da non dover armeggiare con le cose del server.

— Josef Richter

93

Ci sono molti casi in cui la compilazione lato client è utile. Ad esempio, se vuoi consentire agli utenti di giocare con l'aspetto della loro pagina e salvare solo il risultato che scelgono di nuovo sul server.

— montrealmike

26

Sono d'accordo al 100% con chriseppstein (perché diavolo vuoi che gli utenti compilino fogli di stile), non trattato qui, chiaro e semplice: sviluppo. Tutto il mio codice js distribuito voglio essere minimizzato e compresso, come con il mio css. Ma durante lo sviluppo, è utile avere accesso al codice piuttosto che alla versione "compilata". Non sono sicuro di parlare a nome di tutti gli ingegneri front-end, ma posso dire che molti di noi usano il browser e un editor come unici strumenti richiesti durante la fase di sviluppo. Non voglio dover "compilare" sass / scss durante lo sviluppo. Distribuzione / CI / Produzione sono una questione diversa

— Graza

15

Gettare qualcosa sul lato degli autori; Vorrei considerare l'utilizzo di SASS ma non uso né desidero utilizzare Ruby; quindi una soluzione lato client è preferibile a nessuna. Scriverlo in Ruby ne limita l'uso ai soli utenti di Ruby; se fosse stato scritto in JS avrebbe potuto essere utilizzato su client o su server (con node, classic asp, asp.net ed eventualmente altri).

— Dan

27

un'implementazione JavaScript potrebbe anche essere utilizzata lato server con node / rhino ecc. senza dover dipendere da ruby

— Sam Hasler

29

Dal momento che visionmeda / sass.js non è più disponibile e SCSS-js non è stato aggiornato in 2 anni, ho acquistato anche in sass.js . È la libreria C ++ libsass (usata anche da node-sass ) compilata in JavaScript usando Emscripten. Un'implementazione di fogli di stile SCSS compilazione legati o inline in HTML può essere trovato alla sass.link.js .

Prova sass.js utilizzando il playground interattivo

— rodneyrehm
fonte

3

Ora abbiamo solo bisogno di un compilatore da C ++ a Ruby e possiamo unificare la base di codice.

— joeytwiddle

1

sass.js sembra essere considerevolmente enorme nella dimensione 670KB (gzipped) rispetto a less.js 143kb (gzip). inoltre non vedo alcuna opzione in sass.js per impostare dinamicamente le variabili CSS rispetto a less.js. questo è davvero utile quando hai il sito disponibile

— Anirudha

7

SÌ

Come ci aspettavamo, dopo averlo riscritto in C ++ , è possibile compilarlo in Javascript tramite Emscripten .

Questa è la versione del browser: https://github.com/medialize/sass.js/

Come consigliato, per node puoi usare questo: https://github.com/sass/node-sass

— nikoloza
fonte

2

Una combinazione di questa e della risposta (attualmente accettata) dovrebbe essere la risposta effettivamente accettata.

— plaidcorp

6

Ho appena scoperto un interessante Playground Sass.js. Alcune cose potrebbero essere cambiate nel corso degli anni. Controllalo:

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

— Chong Lip Phang
fonte

5

Sicuramente non dovresti obbligare tutti i tuoi utenti a compilare fogli di stile, tuttavia un'implementazione di javascript può essere eseguita anche sul server. Sto anche cercando un'implementazione di javascript sass, da utilizzare in un'app node.js. È qualcosa che sta prendendo in considerazione il team sass?

— tilleryj
fonte

3

Non voglio usare SASS.js per la produzione! Voglio essere in grado di distribuire una macchina di sviluppo senza bisogno di installare ruby solo per SASS. Una volta completato lo sviluppo, posso elaborare il SASS su qualsiasi macchina e spostare il CSS dei risultati sul server di produzione.

— A. Matías Quezada

1

Ti suggerisco di utilizzare Stylus invece di sass sui progetti Node.

— airtonix

3

C'è un tentativo su GitHub , scss-js . Tuttavia, è incompleto e non ha avuto alcun impegno da cinque mesi.

— Peter Lyons
fonte

1

Sembra un modulo js del nodo? La domanda originale riguardava l'implementazione lato client, no?

— jayarjo

1

Perché LibSass

Sebbene non esista un'implementazione JavaScript ufficialmente sanzionata di sass, esiste un port C / C ++ ufficiale del motore Sass, noto come LibSass . Poiché LibSass è un'implementazione ufficiale, è meglio optare per una libreria JavaScript che utilizza LibSass sotto il cofano.

Sul server

Per JavaScript in esecuzione in un ambiente Node.js, c'è Node-sass .

Sotto il cofano, Node-sass utilizza LibSass stesso.

Nel browser

Per JavaScript in esecuzione nel browser, c'è Sass.js .

Sotto il cofano, Sass.js utilizza una versione di LibSass (v3.3.6 al momento in cui scrivo questo) che è stata convertita in JavaScript con Emscripten .

— John Slegers
fonte