Есть ли SASS.js? Что-то вроде LESS.js?

112

Я использовал LESS.js раньше. Легко использовать, что-то вроде

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

Я видел SASS.js . Как я могу использовать это аналогичным образом? Разбор файла SASS для немедленного использования в HTML. Похоже, что SASS.js больше подходит для 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
источник
6
Для производства это корень зла, для развития вы имеете sass watch.
Hauleth
3
Мне нравится эта идея, поскольку проблема с «sass watch» заключается в том, что вы иногда случайно тестируете страницу до того, как «sass watch» успевает запустить. С less.js вы можете загрузить страницу и убедиться, что CSS был скомпилирован, когда вы видите страницу. Конечно, только в среде разработки.
Майя Катрин Андерсен
Ознакомьтесь с SassMeister: sassmeister.com - бесплатный онлайн-компилятор SASS
Дэн,
1
Есть, действительно, sass.js
LukyVj
@Hauleth sass watch (например, меньше часов) иногда не подходит. Особенно, когда ваши исходные файлы обрабатываются сторонней сборкой / зависимостью, и вы можете иметь только полные исходные файлы, когда вы упаковываете или развертываете свое веб-приложение и развертываете его медленно. (т.е. ... веб-приложения на Java)
Zardoz89

Ответы:

42

Официально санкционированной JavaScript реализации sass или scss не существует. Есть несколько реализаций, которые я видел, но ни одну из них я не могу порекомендовать использовать в настоящее время.

Однако, пожалуйста, несколько моментов:

  1. Зачем заставлять всех пользователей компилировать ваши таблицы стилей, если вы можете сделать это один раз для всех.
  2. Как бы выглядел ваш сайт, если бы JavaScript отключен.
  3. Если вы решите перейти на реализацию на стороне сервера в будущем, все ваши шаблоны должны быть соответственно изменены.

Итак, хотя для начала требуется немного больше настроек, мы (основная команда sass) думаем, что компиляция на стороне сервера - лучший долгосрочный подход. Точно так же разработчики все реже предпочитают компиляцию на стороне сервера для рабочих таблиц стилей.

Chriseppstein
источник
157
мой вариант использования: разработка шаблона html + css, который будет помещен в проект рельсов. было бы неплохо иметь sass.js для целей разработки localhost, чтобы мне не приходилось возиться с серверными вещами.
Йозеф Рихтер
93
Есть много случаев, когда компиляция на стороне клиента полезна. Например, если вы хотите, чтобы пользователи играли с внешним видом своей страницы и сохраняли только выбранный ими результат обратно на сервер.
montrealmike
26
Я на 100% согласен с chriseppstein (какого черта вы хотите, чтобы пользователи компилировали таблицы стилей), здесь не рассматривается, просто и понятно: разработка. Весь мой развернутый код js я хочу минимизировать и сжать, как и мой css. Но во время разработки помогает иметь доступ к коду, а не к «скомпилированной» версии. Я не уверен, что говорю от имени всех интерфейсных инженеров, но могу сказать, что чертовски многие из нас используют наш браузер и редактор как единственные инструменты, необходимые на этапе разработки. Я не хочу "компилировать" sass / scss во время разработки. Развертывание / CI / Производство - другое дело
Граза,
15
Подбросить что-то на стороне авторов; Я хотел бы рассмотреть возможность использования SASS, но я не использую и не хочу использовать Ruby; следовательно, решение на стороне клиента предпочтительнее, чем никакое. Написание его на Ruby ограничивает его использование только пользователями ruby; если бы он был написан на JS, его можно было бы использовать на клиентах или на сервере (с node, classic asp, asp.net и, возможно, другими).
Дэн
27
реализация JavaScript также может использоваться на стороне сервера с node / rhino и т. д. без необходимости иметь зависимость от ruby
Сэм Хаслер,
29

Поскольку visionmeda / sass.js больше не доступен и SCSS-JS не была обновлена в течение 2 лет, я мог бы вас заинтересовать в sass.js . Это библиотека C ++ libsass (также используется node-sass ), скомпилированная в JavaScript с использованием Emscripten. Реализация для компиляции SCSS таблиц стилей , связанных или встраиваются в HTML можно найти на sass.link.js .

Попробуйте sass.js на интерактивной игровой площадке

rodneyrehm
источник
3
Теперь нам просто нужен компилятор C ++ to Ruby, и мы можем унифицировать кодовую базу.
joeytwiddle
1
sass.js кажется значительно большим - 670 КБ (в сжатом виде) по сравнению с размером less.js 143 КБ (в сжатом виде). также я не вижу в sass.js возможности динамически устанавливать переменные css по сравнению с less.js. это действительно полезно , когда у вас есть theamable сайт
Anirudha
7

ДА

Как мы и ожидали, после переписывания на C ++ его можно скомпилировать в Javascript через Emscripten .

Это версия браузера: https://github.com/medialize/sass.js/

Как они рекомендуют, для узла вы можете использовать этот: https://github.com/sass/node-sass

nikoloza
источник
2
Комбинация этого и (принятого в настоящее время) ответа должна быть фактическим принятым ответом.
plaidcorp
5

Вы определенно не должны заставлять всех своих пользователей компилировать таблицы стилей, однако реализация javascript также может работать на сервере. Я также ищу реализацию sass javascript - для использования в приложении node.js. Это то, что думает команда sass?

тиллерый
источник
3
Я не хочу использовать SASS.js в продакшене! Я хочу иметь возможность развернуть машину разработки без необходимости устанавливать ruby ​​только для SASS. После завершения разработки я могу обработать SASS на любой машине и перенести полученный CSS на рабочий сервер.
А. Матиас Кесада,
1
Я предлагаю вам взглянуть на использование Stylus вместо sass в проектах Node.
airtonix
3

Есть попытка на GitHub , scss-js . Однако он неполный, и за последние пять месяцев никаких коммитов не было.

Питер Лайонс
источник
1
Это похоже на модуль node js? Первоначальный вопрос касался реализации на стороне клиента, не так ли?
jayarjo
1

Почему LibSass

Хотя официально санкционированной реализации sass на JavaScript не существует, существует официальный порт C / C ++ для движка Sass, известный как LibSass . Поскольку LibSass является официальной реализацией, лучше всего выбрать библиотеку JavaScript, которая использует LibSass под капотом.

На сервере

Для JavaScript, работающего в среде Node.js, есть Node-sass .

Под капотом Node-sass использует сам LibSass.

В браузере

Для JavaScript работает в браузере, есть Sass.js .

Под капотом Sass.js использует версию LibSass (v3.3.6 на момент написания этой статьи), которая была преобразована в JavaScript с помощью Emscripten .

Джон Слегерс
источник