Gibt es eine SASS.js? So etwas wie LESS.js?

112

Ich habe LESS.js schon einmal benutzt. Es ist einfach zu bedienen, so etwas wie

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

Ich habe SASS.js gesehen . Wie kann ich es auf ähnliche Weise verwenden? Analysieren einer SASS-Datei zur sofortigen Verwendung in HTML. Es scheint, als ob SASS.js eher für Node.js geeignet ist .

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
quelle
6
Für die Produktion ist es die Wurzel des Bösen, für die Entwicklung, die Sie haben sass watch.
Hauleth
3
Ich mag die Idee, da das Problem mit "sass watch" darin besteht, dass Sie die Seite manchmal versehentlich testen, bevor "sass watch" ausgeführt wird. Mit less.js können Sie die Seite laden und sicherstellen, dass die CSS kompiliert wurde, wenn Sie die Seite sehen. Natürlich nur in der Entwicklerumgebung.
Maya Kathrine Andersen
Schauen Sie sich SassMeister an: sassmeister.com - ein kostenloser Online-SASS-Compiler
Dan
1
Es gibt tatsächlich sass.js
LukyVj
@ Hauleth Sass Uhr (wie weniger Uhr) ist manchmal keine Option. Insbesondere, wenn Ihre Quelldateien von einem Build / einer Abhängigkeit eines Drittanbieters verarbeitet werden und Sie nur dann über die vollständigen Quelldateien verfügen können, wenn Sie Ihre Webanwendung packen oder bereitstellen und sie langsam bereitstellen. (dh ... Java-Web-Apps)
Zardoz89

Antworten:

42

Es gibt keine offiziell genehmigte JavaScript-Implementierung von sass oder scss. Es gibt einige Implementierungen, die ich gesehen habe, aber keine, die ich derzeit empfehlen kann.

Bitte jedoch ein paar Punkte:

  1. Warum sollten Sie alle Ihre Benutzer dazu bringen, Ihre Stylesheets zu kompilieren, wenn Sie dies ein für alle Mal tun können?
  2. Wie würde Ihre Website aussehen, wenn JavaScript deaktiviert ist?
  3. Wenn Sie zu einem späteren Zeitpunkt zu einer serverseitigen Implementierung wechseln möchten, müssen alle Ihre Vorlagen entsprechend geändert werden.

Wir (das Sass-Kernteam) sind der Meinung, dass die serverseitige Kompilierung der beste langfristige Ansatz ist. In ähnlicher Weise bevorzugen weniger Entwickler die serverseitige Kompilierung für Produktionsstylesheets.

chriseppstein
quelle
157
Mein Anwendungsfall: Entwicklung einer HTML + CSS-Vorlage, die in ein Rails-Projekt eingefügt wird. Es wäre schön, sass.js für Localhost-Entwicklungszwecke zu haben, damit ich nicht mit Server-Sachen herumspielen muss.
Josef Richter
93
Es gibt viele Fälle, in denen die clientseitige Kompilierung nützlich ist. Wenn Sie beispielsweise zulassen möchten, dass Benutzer mit dem Aussehen ihrer Seite spielen und nur das von ihnen ausgewählte Ergebnis auf dem Server speichern.
Montrealmike
26
Ich stimme zu 100% mit chriseppstein überein (warum zum Teufel sollen Benutzer Stylesheets erstellen), das hier nicht behandelt wird, schlicht und einfach: Entwicklung. Mein gesamter bereitgestellter js-Code möchte wie bei meinem CSS minimiert und komprimiert werden. Während der Entwicklung ist es jedoch hilfreich, auf den Code zuzugreifen, anstatt auf eine "kompilierte" Version. Ich bin nicht sicher, ob ich für alle Front-End-Ingenieure spreche, aber ich kann sagen, dass verdammt viele von uns ihren Browser und einen Editor als die einzigen Tools verwenden, die während der Entwicklungsphase benötigt werden. Ich möchte sass / scss während der Entwicklung nicht "kompilieren" müssen. Bereitstellung / CI / Produktion sind eine andere Sache
Graza
15
Etwas auf die Seite des Autors zu werfen; Ich würde gerne SASS verwenden, aber ich verwende Ruby nicht und möchte Ruby auch nicht verwenden. Daher ist eine clientseitige Lösung keiner vorzuziehen. Das Schreiben in Ruby beschränkt die Verwendung nur auf Ruby-Benutzer. Wenn es in JS geschrieben wurde, könnte es auf Clients oder auf Servern verwendet werden (mit Node, Classic Asp, Asp.net und möglicherweise anderen).
Dan
27
Eine JavaScript-Implementierung könnte auch serverseitig mit Node / Rhino usw. verwendet werden, ohne dass eine Abhängigkeit von Ruby
Sam Hasler
29

Da visionmeda / sass.js nicht mehr verfügbar ist und scss-js seit 2 Jahren nicht mehr aktualisiert wurde, könnte ich Sie für sass.js interessieren . Es ist die C ++ - Bibliothek libsass (auch von node-sass verwendet ), die mit Emscripten zu JavaScript kompiliert wurde. Eine Implementierung zum Kompilieren von in HTML verknüpften oder eingebetteten scss-Stylesheets finden Sie unter sass.link.js .

Probieren Sie sass.js auf dem interaktiven Spielplatz aus

Rodneyrehm
quelle
3
Jetzt brauchen wir nur noch einen C ++ to Ruby-Compiler und können die Codebasis vereinheitlichen.
Joeytwiddle
1
sass.js scheint eine beträchtliche Größe von 670 KB (gezippt) zu haben, verglichen mit einer Größe von 143 kb (gzipped) von less.js. Außerdem sehe ich in sass.js keine Option zum dynamischen Setzen von CSS-Variablen im Vergleich zu less.js. Dies ist wirklich nützlich, wenn Sie die beste Seite haben
Anirudha
6

Ich habe gerade einen interessanten Sass.js Spielplatz entdeckt. Einige Dinge haben sich im Laufe der Jahre möglicherweise geändert. Überprüfen Sie dies heraus:

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

Chong Lip Phang
quelle
5

Sie sollten auf keinen Fall alle Benutzer dazu bringen, Stylesheets zu kompilieren. Eine Javascript-Implementierung kann jedoch auch auf dem Server ausgeführt werden. Ich suche auch nach einer Javascript-Sass-Implementierung - zur Verwendung in einer node.js-App. Ist das etwas, worüber das Sass-Team nachdenkt?

tilleryj
quelle
3
Ich möchte SASS.js nicht für die Produktion verwenden! Ich möchte in der Lage sein, eine Entwicklungsmaschine bereitzustellen, ohne Ruby nur für SASS installieren zu müssen. Sobald die Entwicklung abgeschlossen ist, kann ich den SASS auf jedem Computer verarbeiten und das Ergebnis-CSS auf den Produktionsserver verschieben.
A. Matías Quezada
1
Ich schlage vor, Sie möchten Stylus anstelle von Sass für Node-Projekte verwenden.
Airtonix
3

Es gibt einen Versuch auf GitHub , scss-js . Es ist jedoch unvollständig und hat seit fünf Monaten keine Verpflichtungen mehr.

Peter Lyons
quelle
1
Das sieht aus wie ein Knoten js Modul? Die ursprüngliche Frage war eine clientseitige Implementierung, nein?
Jayarjo
1

Warum LibSass?

Während es keine offiziell genehmigte JavaScript-Implementierung von sass gibt, gibt es einen offiziellen C / C ++ - Port der Sass-Engine, der als LibSass bekannt ist . Da es sich bei LibSass um eine offizielle Implementierung handelt, sollten Sie sich für eine JavaScript-Bibliothek entscheiden, die LibSass unter der Haube verwendet.

Auf dem Server

Für JavaScript, das in einer Node.js-Umgebung ausgeführt wird, gibt es Node-sass .

Unter der Haube verwendet Node-sass LibSass selbst.

Im Browser

Für JavaScript, das im Browser ausgeführt wird, gibt es Sass.js .

Unter der Haube verwendet Sass.js eine Version von LibSass (v3.3.6 zum Zeitpunkt meines Schreibens), die mit Emscripten in JavaScript konvertiert wurde .

John Slegers
quelle