Czy istnieje SASS.js? Coś w rodzaju LESS.js?

112

Użyłem LESS.js wcześniej. Jest łatwy w użyciu, na przykład

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

Widziałem SASS.js . Jak mogę go używać w podobny sposób? Przetwarzanie pliku SASS do natychmiastowego użycia w HTML. Wygląda na to, że SASS.js jest bardziej do użytku z 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
źródło
6
Dla produkcji jest źródłem zła, dla rozwoju masz sass watch.
Hauleth
3
Podoba mi się ten pomysł, ponieważ problem z „sass watch” polega na tym, że czasami testujesz stronę przypadkowo, zanim „sass watch” zostanie uruchomiony. Za pomocą less.js możesz załadować stronę i upewnić się, że css został skompilowany, gdy zobaczysz stronę. Oczywiście tylko w środowisku deweloperskim.
Maya Kathrine Andersen
Sprawdź SassMeister: sassmeister.com - darmowy internetowy kompilator SASS
Dan
1
Jest rzeczywiście sass.js
LukyVj
Zegarek @Hauleth sass (jak mniej zegarka) czasami nie wchodzi w grę. Szczególnie, gdy pliki źródłowe są obsługiwane przez kompilację / zależność innej firmy, a pełne pliki źródłowe można mieć tylko podczas pakowania lub wdrażania aplikacji internetowej i wdrażania jej wolno. (tj ... aplikacje internetowe java)
Zardoz89

Odpowiedzi:

42

Nie ma oficjalnie zatwierdzonej implementacji JavaScript w sass lub scss. Jest kilka wdrożeń, które widziałem, ale żadna z nich nie jest obecnie rekomendowana.

Prosimy jednak o kilka punktów:

  1. Dlaczego miałbyś zmuszać wszystkich użytkowników do kompilowania arkuszy stylów, skoro możesz to zrobić raz dla wszystkich.
  2. Jak wyglądałaby Twoja witryna, gdyby obsługa JavaScript była wyłączona.
  3. Jeśli w przyszłości zdecydujesz się przejść na implementację po stronie serwera, wszystkie szablony muszą zostać odpowiednio zmienione.

Więc chociaż jest to trochę bardziej konfigurowalne, aby rozpocząć, my (zespół podstawowy Sass) uważamy, że kompilacja po stronie serwera jest najlepszym podejściem długoterminowym. Podobnie mniej programistów preferuje kompilację po stronie serwera dla arkuszy stylów produkcyjnych.

chriseppstein
źródło
157
mój przypadek użycia: opracowanie szablonu html + css, który zostanie umieszczony w projekcie railsowym. byłoby miło mieć sass.js do celów rozwoju hosta lokalnego, abym nie musiał majstrować przy obsłudze serwera.
Josef Richter
93
Istnieje wiele przypadków, w których kompilacja po stronie klienta jest przydatna. Na przykład, jeśli chcesz pozwolić użytkownikom bawić się wyglądem swojej strony i zapisywać tylko wynik, który wybiorą, z powrotem na serwerze.
montrealmike
26
W 100% zgadzam się z Chriseppsteinem (dlaczego, do cholery, chcesz, aby użytkownicy kompilowali arkusze stylów), nieujęte tutaj, jasne i proste: rozwój. Cały mój wdrożony kod js chcę zostać zminimalizowany i skompresowany, tak jak w przypadku mojego css. Jednak podczas programowania lepiej jest mieć dostęp do kodu niż do „skompilowanej” wersji. Nie jestem pewien, czy mówię w imieniu wszystkich inżynierów front-endu, ale mogę powiedzieć, że cholernie wielu z nas używa naszej przeglądarki i edytora jako jedynych narzędzi wymaganych na etapie rozwoju. Nie chcę "kompilować" sass / scss podczas programowania. Wdrożenie / CI / Produkcja to inna sprawa
Graza
15
Dorzucić coś po stronie autorów; Chciałbym rozważyć użycie SASS, ale nie używam ani nie chcę używać Rubiego; stąd rozwiązanie po stronie klienta jest lepsze niż żadne. Napisanie go w Rubim ogranicza jego użycie tylko do użytkowników Rubiego; gdyby został napisany w JS, mógłby zostać użyty na klientach lub na serwerze (z węzłem, klasycznym systemem asp, asp.net i prawdopodobnie innymi).
Dan
27
implementacja JavaScript może być również używany po stronie serwera z węzła / rhino itp bez konieczności posiadania zależność od rubinu
Sam Hasler
29

Od visionmeda / sass.js nie jest już dostępne i SCSS-js nie został zaktualizowany w ciągu 2 lat, mogę Cię zainteresować sass.js . To biblioteka C ++ libsass (używana również przez node-sass ) skompilowana do JavaScript przy użyciu Emscripten. Implementacja do kompilacji stylów SCSS połączonych lub włączonych w html można znaleźć na sass.link.js .

Wypróbuj sass.js przy użyciu interaktywnego placu zabaw

rodneyrehm
źródło
3
Teraz potrzebujemy tylko kompilatora C ++ do Ruby i możemy ujednolicić bazę kodu.
joeytwiddle
1
Plik sass.js wydaje się być bardzo duży w rozmiarze 670 KB (spakowany gzipem) w porównaniu do rozmiaru mniejszego.js 143 kb (spakowany gzipem). również nie widzę żadnej opcji w sass.js do dynamicznego ustawiania zmiennych css w porównaniu do less.js. jest to naprawdę przydatne, gdy masz świetną stronę
Anirudha
5

Zdecydowanie nie powinieneś zmuszać wszystkich użytkowników do kompilowania arkuszy stylów, jednak implementacja javascript może również działać na serwerze. Szukam również implementacji Sass w javascript - do użycia w aplikacji node.js. Czy to jest coś, co rozważa zespół Sass?

tilleryj
źródło
3
Nie chcę używać SASS.js do produkcji! Chcę móc wdrożyć maszynę deweloperską bez konieczności instalowania Rubiego tylko dla SASS. Po zakończeniu rozwoju mogę przetworzyć SASS na dowolnej maszynie i przenieść wynikowy CSS na serwer produkcyjny.
A. Matías Quezada
1
Sugeruję, abyś spojrzał na używanie Stylusa zamiast sass w projektach Node.
airtonix
3

Nastąpiła próba na GitHub , scss-js . Jednak jest niekompletny i nie miał żadnych zobowiązań od pięciu miesięcy.

Peter Lyons
źródło
1
To wygląda na moduł node js? Pierwotne pytanie dotyczyło implementacji po stronie klienta, nie?
jayarjo
1

Dlaczego LibSass

Chociaż nie ma oficjalnie usankcjonowanej implementacji JavaScript dla Sass, istnieje oficjalny port C / C ++ silnika Sass, znany jako LibSass . Ponieważ LibSass jest oficjalną implementacją, najlepiej jest wybrać bibliotekę JavaScript, która używa LibSass pod maską.

Na serwerze

W przypadku JavaScript działającego w środowisku Node.js istnieje Node-sass .

Pod maską Node-sass używa samego LibSass.

W przeglądarce

W przypadku JavaScript działającego w przeglądarce jest Sass.js .

Pod maską Sass.js używa wersji LibSass (v3.3.6 w momencie, gdy to piszę), która została przekonwertowana na JavaScript za pomocą Emscripten .

John Slegers
źródło