Использование клиентской стороны Stylus (CSS)

Новый парень здесь. Я искал хорошее решение для использования Stylus (скомпилированного CSS) клиентской стороны.

Теперь я знаю советы относительно использования скомпилированной клиентской стороны CSS, потому что:

Он прерывается, если JS не используется.
Требуется дополнительное время для компиляции в живой клиентской среде.
Его нужно перекомпилировать на каждом отдельном клиенте, который просто не зеленый.

Однако моя среда - это расширение, созданное для Chrome и Opera. Он работает в среде JS, и он работает в автономном режиме, поэтому не применяются ни 1, 2, ни 3. То, что я действительно ищу здесь, - это просто способ более эффективного написания CSS с меньшими головными болями, большим количеством переменных, вложением и миксинами.

Я попробовал Less, который является единственным из трио Less, Sass и Stylus, который в настоящее время хорошо работает на стороне клиента. Итак, кто-нибудь знает хорошее решение для Stylus?

Ответ 1

Препроцессоры CSS на самом деле не предназначены для работы на стороне клиента. Некоторые инструменты (то есть LESS) предоставляют компилятор на стороне клиента (JavaScript), который будет компилироваться "на лету"; однако это не предназначено для производства.

Тот факт, что Stylus/Sass не дает этого по умолчанию, на самом деле является хорошей вещью, и я лично желаю, чтобы LESS не сделал этого; однако, в то же время, я понимаю, что, открывая дверь людям, которые могут предпочесть иметь некоторые тренировочные колеса, которые могут помочь им вначале. Все учатся по-другому, так что это может быть только функция, которая может сначала получить определенные группы людей в дверях. Таким образом, для разработки это может быть хорошо, но на момент написания этой статьи этот рабочий процесс не является самым результативным в производстве. Надеюсь, в какой-то момент большинство полезных функций этих инструментов будут добавлены в собственный CSS, тогда это будет спорным вопросом.

В настоящее время я советую развернуть только скомпилированный CSS и использовать что-то вроде watch или guard или live-reload или codekit (или любой подходящий эквивалентный файл наблюдатель) в разработке, поэтому ваши файлы стилусов перекомпилируются по мере вашего кода.

Ответ 2

Эта страница, вероятно, имеет решение: http://learnboost.github.io/stylus/try.html

Кажется, скомпилировать Stylus на лету.

Ответ 3

Stylus может работать в браузере

Существует ветвь client, доступная в GitHub repo

Ответ 4

Я не совсем понимаю ваш вопрос, но я предлагаю некоторые из опыта, который у меня есть с скомпилированным css, используя LESS.

Ранним реализациям нужен javascript для компиляции LESS файлов в CSS в браузере, я никогда не пытался работать таким образом, мне показалось, что это не здорово, и, как вы говорите, если JS отключен в течение грубого времени,

Недавно я использовал приложения для компиляции кода LESS в действительный CSS, это обостряет необходимость преобразования JS-кода в исходный код.

Первое приложение, которое я использовал, это хруст http://crunchapp.net/, который работал достаточно хорошо, но не скомпилировал css на лету.

Приложение, которое я использую сейчас, называется simpleess http://wearekiss.com/simpless, и это создает корректный css на лету, поэтому, как только я нажмите сохранить в возвышенном тексте и обновить в браузере. Я вижу свои изменения в css.

Используя этот рабочий поток, я могу обойти проблемы, поднятые выше, когда я закончил разработку. Я просто загружаю свой файл css, полученный из простоты, которая также сильно минимизирована, что также экономит время с точки зрения необходимости для дальнейшего оптимизации css.

Надеюсь, я правильно понял вопрос, если не извинения.

Cheers, Стефан