Comments 28
UFO just landed and posted this here
Зачем мучиться с source maps, если есть FireSass?
Чтобы им воспользоваться, достаточно прописать
Чтобы им воспользоваться, достаточно прописать
sass_options = {debug_info: true} в конфиге Compass.
Насколько я вижу, оно работает ровно по тому же принципу, что было реализовано в старых версиях Chrome. Флаг --debug-info просто валит в CSS кучу информации. А в новых версиях генерируется отдельный файл .map со всеми маппингами.
В чем там меньше мучений — я не вижу. Да и вообще мучений не вижу, собственно.
В чем там меньше мучений — я не вижу. Да и вообще мучений не вижу, собственно.
Я использую этот флаг так:
Соответственно, доп. информация попадает в CSS только в процессе разработки, но не в продакшене.
Меньше мучений в том, что не надо ничего настраивать, устанавливать предрелизные версии софта, генерировать дополнительные файлы.
sass_options = (environment == :development && debug == true) ? {:debug_info => true} : {}
Соответственно, доп. информация попадает в CSS только в процессе разработки, но не в продакшене.
Меньше мучений в том, что не надо ничего настраивать, устанавливать предрелизные версии софта, генерировать дополнительные файлы.
Как не надо настраивать? А в конфиг писать? А дополнение ставить?
Устанавливать Sass 3.3.0 пришлось только из-за того, что Google немного опередил время и сломал поддержку старого способа в стабильной версии тоже. И это правильно, чтобы разработчики сильно не успели к этому привыкнуть.
И чем вам мешает маленький дополнительный файл? Он вообще никак не мешается.
Устанавливать Sass 3.3.0 пришлось только из-за того, что Google немного опередил время и сломал поддержку старого способа в стабильной версии тоже. И это правильно, чтобы разработчики сильно не успели к этому привыкнуть.
И чем вам мешает маленький дополнительный файл? Он вообще никак не мешается.
Не мешается.
Просто не понятно, зачем SASS-разработчику все переигрывать, если оно и так работает.
Тем более что поддержки source maps в Compass еще нет.
Просто не понятно, зачем SASS-разработчику все переигрывать, если оно и так работает.
Тем более что поддержки source maps в Compass еще нет.
До недавнего времени Chrome так же понимал --debug-info. С каким-то из обновлений от поддержки debug-info отказались в пользу source maps.
Как по мне так для разработки такой подход был проще, когда не надо генерировать отдельный файл. Потому как мы используем django-pipeline, который из коробки не может сделать source map.
Для Chrome есть аналог FireSass — SASS Inspector. Правда штука немного глючная.
Как по мне так для разработки такой подход был проще, когда не надо генерировать отдельный файл. Потому как мы используем django-pipeline, который из коробки не может сделать source map.
Для Chrome есть аналог FireSass — SASS Inspector. Правда штука немного глючная.
UFO just landed and posted this here
SASS Inspector для Chrome.
Подключение Source Maps в SASS описано в habrahabr.ru/post/178743/ (ближе к концу, раздел «Карты кодов для SASS») и работало как минимум с января 2013 в текущих версиях Хрома и Firefox + Firebug.
1) Там описан старый способ, который не заработает в новых версиях Chrome.
2) Меня вчера попросили рассказать — я рассказал.
3) В жизни бы не отыскал это :D
2) Меня вчера попросили рассказать — я рассказал.
3) В жизни бы не отыскал это :D
1) а откуда это сокровенное знание про новые версии?: ) Интересно, где искать.
3) habrahabr.ru/search/?q=SASS+chrome — на 1-й странице всё вообще по этой теме (все 2 статьи и текущая);
3) habrahabr.ru/search/?q=SASS+chrome — на 1-й странице всё вообще по этой теме (все 2 статьи и текущая);
1) Я сам тестировал + в разных статьях пишут. В той же про Less.
2) 155+ человек из опроса с вами не согласны.
2) 155+ человек из опроса с вами не согласны.
Пользуясь случаем, задам вопрос:
Как создать новый стиль в существующем CSS файле?
Редактирую уже созданные без проблем, а при клике на «New style rule» он создает его не в файле, а в «inspector-stylesheet». Может его как то перенести в файл можно?
Сейчас приходится создавать сначала пустые записи в CSS файле, потом их стилизовать. Чувствую, это неправильно.
Как создать новый стиль в существующем CSS файле?
Редактирую уже созданные без проблем, а при клике на «New style rule» он создает его не в файле, а в «inspector-stylesheet». Может его как то перенести в файл можно?
Сейчас приходится создавать сначала пустые записи в CSS файле, потом их стилизовать. Чувствую, это неправильно.
Так можно открыть существующий файл CSS во вкладке Sources и редактировать правила там.
Или добавлять правила не через New Style Rule, а через клик в любом свободном месте. Если остальные правила уже в файле, то ваше правило добавится к ним же.
Или нажать на inspector-stylesheet и перенести все свойства оттуда куда-нибудь еще.
Или добавлять правила не через New Style Rule, а через клик в любом свободном месте. Если остальные правила уже в файле, то ваше правило добавится к ним же.
Или нажать на inspector-stylesheet и перенести все свойства оттуда куда-нибудь еще.
Через source maps пока не поддерживается, но можно так, — robdodson.me/blog/2012/12/28/debug-less-with-chrome-developer-tools/
Ну а через source maps позже, думаю, по мере реализации github.com/cloudhead/less.js/issues/1050
Ну а через source maps позже, думаю, по мере реализации github.com/cloudhead/less.js/issues/1050
любопытно, можно-ли эту штуку адаптировать для более простого (и думаю распространенного) случая, когда результирующий CSS собирается по кусочкам из отдельных CSS-файлов? вроде как SASS это надмножество CSS.
может есть какая-то генерилка sourcemap для такого случая и если есть получится-ли воспользоваться функциональностью хрома?
может есть какая-то генерилка sourcemap для такого случая и если есть получится-ли воспользоваться функциональностью хрома?
А что вам мешает использовать Sass? Любой CSS — это валидный SCSS. Раскидали по файлам, подключили где какие надо и точно также пользуетесь.
UFO just landed and posted this here
вот и хочу узнать ответ на этот вопрос. :) навскидку, утилита sass не применяет к css файлам всяческие полезности scss, скажем не инлайнит import. а менять css на scss не вариант, т.к. это куча, в том числе стороннего кода.
Насколько я знаю, подключить простой CSS нельзя. Но достаточно переименовать файл из example.css в _example.scss и добавить его в all.scss так:
import «example»
Почему вы не хотите сделать так? CSS останется тем же, зато сможете его отрефакторить + source maps будут. Или можете просто не собирать все в один файл при разработке, а собирать только на продакшн. Но как по мне, так это еще больше мороки.
import «example»
Почему вы не хотите сделать так? CSS останется тем же, зато сможете его отрефакторить + source maps будут. Или можете просто не собирать все в один файл при разработке, а собирать только на продакшн. Но как по мне, так это еще больше мороки.
потому, что трюк с переименованием не сработает для неподконтрольного нам (библиотечного) css, а у нас такого вагон. плюс есть общие стандарты, где нет ничего про scss. тут проще sass закастомайзить, но пока меня этот вариант немного пугает (какой sass? какая кастомизация? ведь хочется лишь source maps для объединенного css чтобы сделать разработку еще чуть проще).
не собирать все в один файл это оффтоп, т.к. source maps в таком случае вообще не нужны )
не собирать все в один файл это оффтоп, т.к. source maps в таком случае вообще не нужны )
Очень жаль что Compass не работает. Придется ждать новых релизов Sass и Compass (
Sign up to leave a comment.
«Поддержка Sass» в Chrome Dev Tools