«Поддержка Sass» в Chrome Dev Tools

[olegafx]

Всмысле, для CoffeeScript? Или там другая версия listen, мешающая установке Sass 3.3.0?

[lolmaus]

Зачем мучиться с source maps, если есть FireSass?



Чтобы им воспользоваться, достаточно прописать sass_options = {debug_info: true} в конфиге Compass.

[olegafx]

Насколько я вижу, оно работает ровно по тому же принципу, что было реализовано в старых версиях Chrome. Флаг --debug-info просто валит в CSS кучу информации. А в новых версиях генерируется отдельный файл .map со всеми маппингами.

В чем там меньше мучений — я не вижу. Да и вообще мучений не вижу, собственно.

[lolmaus]

Я использую этот флаг так:

sass_options = (environment == :development && debug == true) ? {:debug_info => true} : {}

Соответственно, доп. информация попадает в CSS только в процессе разработки, но не в продакшене.

Меньше мучений в том, что не надо ничего настраивать, устанавливать предрелизные версии софта, генерировать дополнительные файлы.

[olegafx]

Как не надо настраивать? А в конфиг писать? А дополнение ставить?

Устанавливать Sass 3.3.0 пришлось только из-за того, что Google немного опередил время и сломал поддержку старого способа в стабильной версии тоже. И это правильно, чтобы разработчики сильно не успели к этому привыкнуть.

И чем вам мешает маленький дополнительный файл? Он вообще никак не мешается.

[lolmaus]

Не мешается.

Просто не понятно, зачем SASS-разработчику все переигрывать, если оно и так работает.

Тем более что поддержки source maps в Compass еще нет.

[Yngvie]

До недавнего времени Chrome так же понимал --debug-info. С каким-то из обновлений от поддержки debug-info отказались в пользу source maps.

Как по мне так для разработки такой подход был проще, когда не надо генерировать отдельный файл. Потому как мы используем django-pipeline, который из коробки не может сделать source map.

Для Chrome есть аналог FireSass — SASS Inspector. Правда штука немного глючная.

[lolmaus]

SASS Inspector для Chrome.

[spmbt]

Подключение Source Maps в SASS описано в habrahabr.ru/post/178743/ (ближе к концу, раздел «Карты кодов для SASS») и работало как минимум с января 2013 в текущих версиях Хрома и Firefox + Firebug.

[olegafx]

1) Там описан старый способ, который не заработает в новых версиях Chrome.
2) Меня вчера попросили рассказать — я рассказал.
3) В жизни бы не отыскал это :D

[spmbt]

1) а откуда это сокровенное знание про новые версии?: ) Интересно, где искать.
3) habrahabr.ru/search/?q=SASS+chrome — на 1-й странице всё вообще по этой теме (все 2 статьи и текущая);

[olegafx]

1) Я сам тестировал + в разных статьях пишут. В той же про Less.
2) 155+ человек из опроса с вами не согласны.

[spmbt]

2) они не знали 2 магических слов.

[Rastishka]

Пользуясь случаем, задам вопрос:

Как создать новый стиль в существующем CSS файле?
Редактирую уже созданные без проблем, а при клике на «New style rule» он создает его не в файле, а в «inspector-stylesheet». Может его как то перенести в файл можно?

Сейчас приходится создавать сначала пустые записи в CSS файле, потом их стилизовать. Чувствую, это неправильно.

[olegafx]

Так можно открыть существующий файл CSS во вкладке Sources и редактировать правила там.

Или добавлять правила не через New Style Rule, а через клик в любом свободном месте. Если остальные правила уже в файле, то ваше правило добавится к ним же.

Или нажать на inspector-stylesheet и перенести все свойства оттуда куда-нибудь еще.

[Rastishka]

Спасибо за ответ, но пока эти способы какие то неюзабельные. =(

То, что правила добавляются через клик на пустом месте — я знаю, спасибо.
Речь именно о создании selector со списком CSS правил.

[akzhan]

Через source maps пока не поддерживается, но можно так, — robdodson.me/blog/2012/12/28/debug-less-with-chrome-developer-tools/

Ну а через source maps позже, думаю, по мере реализации github.com/cloudhead/less.js/issues/1050

[olegafx]

Видел эту статью. Не работает в новых версиях Chrome. Уже писал про это :)

[funca]

любопытно, можно-ли эту штуку адаптировать для более простого (и думаю распространенного) случая, когда результирующий CSS собирается по кусочкам из отдельных CSS-файлов? вроде как SASS это надмножество CSS.

может есть какая-то генерилка sourcemap для такого случая и если есть получится-ли воспользоваться функциональностью хрома?

[olegafx]

А что вам мешает использовать Sass? Любой CSS — это валидный SCSS. Раскидали по файлам, подключили где какие надо и точно также пользуетесь.

[funca]

вот и хочу узнать ответ на этот вопрос. :) навскидку, утилита sass не применяет к css файлам всяческие полезности scss, скажем не инлайнит import. а менять css на scss не вариант, т.к. это куча, в том числе стороннего кода.

[olegafx]

Насколько я знаю, подключить простой CSS нельзя. Но достаточно переименовать файл из example.css в _example.scss и добавить его в all.scss так:
import «example»

Почему вы не хотите сделать так? CSS останется тем же, зато сможете его отрефакторить + source maps будут. Или можете просто не собирать все в один файл при разработке, а собирать только на продакшн. Но как по мне, так это еще больше мороки.

[funca]

потому, что трюк с переименованием не сработает для неподконтрольного нам (библиотечного) css, а у нас такого вагон. плюс есть общие стандарты, где нет ничего про scss. тут проще sass закастомайзить, но пока меня этот вариант немного пугает (какой sass? какая кастомизация? ведь хочется лишь source maps для объединенного css чтобы сделать разработку еще чуть проще).

не собирать все в один файл это оффтоп, т.к. source maps в таком случае вообще не нужны )

[DEbuger]

Очень жаль что Compass не работает. Придется ждать новых релизов Sass и Compass (