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

  • Tutorial
imageimage
Продолжаем познавать доступные инструменты в Chrome Dev Tools. Workspace и Сниппеты были вчера, сегодня на очереди поддержка Sass.


Подготовка
Как всегда ставим последнюю версию Chrome Canary, чтобы все работало как положено. После этого переходим на волшебную страничку chrome://flags/#enable-devtools-experiments и включаем поддержку "Developer Tools experiments", если этого еще не сделано. Перезапускаем браузер.

В настройках —> Experiments отмечаем галочкой пункт "Sass stylesheet debugging". Перезапускаем браузер еще раз.


Теперь заходим в настройки —> General —> Sources и убеждаемся, что есть галочка возле пункта "Enable source maps", иначе не заработает. Там же можно настроить время перезагрузки CSS после сохранения файла Sass.


Ненадолго покинем браузер и перейдем в любимую консоль. Нам понадобится установить Sass версии 3.3.0 alpha, потому что именно в этой версии была добавлена поддержка Source Maps (или на русском от bullgare). Делается это командой:
gem install sass --pre

Если начнет ругаться, что нужен listen версии 0.7.0, то поможет следующая команда:
gem install listen -v 0.7.0



Запускаем Sass
Переходим в рабочую директорию проекта и запускаем Sass с постоянным просмотром файлов на наличие изменений. Обязательно нужно передать параметр --sourcemap. И там же указываем нужные файлы Sass и CSS. Например:
sass --watch --sourcemap main.scss:main.css



Возвращаемся в браузер. Скорее всего, его нужно будет перезапустить, уже в последний раз. Теперь открываем наш проект и смотрим полученный результат. Селекторы теперь должны отображаться с указанием той строки, на которой они расположены в файле Sass.


А что насчет Less?
А в Less нет нормальной поддержки Source Maps, когда все «маппинги» лежат в отдельном файле, поэтому в последних версиях Chrome оно работать не будет. Если кто-то нашел способ генерировать map-файл для Less — поделитесь в комментариях, пожалуйста.

Полезная подсказка: Ctrl + Click по названию любого CSS-свойства откроет файл Sass именно на той строке, на которой это свойство объявлено.

Заключение
Делайте ваш CSS более Sassy. Всем приятного кодинга!

Only registered users can participate in poll. Log in, please.

Знали ли вы о данном инструменте?

  • 10.5%Да, узнал вчера50
  • 14.3%Да, знал давно68
  • 75.2%Нет, не знал357
Ads
AdBlock has stolen the banner, but banners are not teeth — they will be back

More

Comments 28

    0
    Как бы это еще в четвертых рельсах включить.
      0
      Всмысле, для CoffeeScript? Или там другая версия listen, мешающая установке Sass 3.3.0?
      0
      Зачем мучиться с source maps, если есть FireSass?

      image

      Чтобы им воспользоваться, достаточно прописать sass_options = {debug_info: true} в конфиге Compass.
        0
        Насколько я вижу, оно работает ровно по тому же принципу, что было реализовано в старых версиях Chrome. Флаг --debug-info просто валит в CSS кучу информации. А в новых версиях генерируется отдельный файл .map со всеми маппингами.

        В чем там меньше мучений — я не вижу. Да и вообще мучений не вижу, собственно.
          0
          Я использую этот флаг так:

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

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

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

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

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

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

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

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

          Для Chrome есть аналог FireSass — SASS Inspector. Правда штука немного глючная.
          • UFO just landed and posted this here
          0
          Подключение Source Maps в SASS описано в habrahabr.ru/post/178743/ (ближе к концу, раздел «Карты кодов для SASS») и работало как минимум с января 2013 в текущих версиях Хрома и Firefox + Firebug.
            0
            1) Там описан старый способ, который не заработает в новых версиях Chrome.
            2) Меня вчера попросили рассказать — я рассказал.
            3) В жизни бы не отыскал это :D
              0
              1) а откуда это сокровенное знание про новые версии?: ) Интересно, где искать.
              3) habrahabr.ru/search/?q=SASS+chrome — на 1-й странице всё вообще по этой теме (все 2 статьи и текущая);
                0
                1) Я сам тестировал + в разных статьях пишут. В той же про Less.
                2) 155+ человек из опроса с вами не согласны.
                  0
                  2) они не знали 2 магических слов.
            0
            Пользуясь случаем, задам вопрос:

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

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

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

              Или нажать на inspector-stylesheet и перенести все свойства оттуда куда-нибудь еще.
                0
                Спасибо за ответ, но пока эти способы какие то неюзабельные. =(

                То, что правила добавляются через клик на пустом месте — я знаю, спасибо.
                Речь именно о создании selector со списком CSS правил.
              0
              Через source maps пока не поддерживается, но можно так, — robdodson.me/blog/2012/12/28/debug-less-with-chrome-developer-tools/

              Ну а через source maps позже, думаю, по мере реализации github.com/cloudhead/less.js/issues/1050
                0
                Видел эту статью. Не работает в новых версиях Chrome. Уже писал про это :)
                0
                любопытно, можно-ли эту штуку адаптировать для более простого (и думаю распространенного) случая, когда результирующий CSS собирается по кусочкам из отдельных CSS-файлов? вроде как SASS это надмножество CSS.

                может есть какая-то генерилка sourcemap для такого случая и если есть получится-ли воспользоваться функциональностью хрома?
                  0
                  А что вам мешает использовать Sass? Любой CSS — это валидный SCSS. Раскидали по файлам, подключили где какие надо и точно также пользуетесь.
                  • UFO just landed and posted this here
                      0
                      вот и хочу узнать ответ на этот вопрос. :) навскидку, утилита sass не применяет к css файлам всяческие полезности scss, скажем не инлайнит import. а менять css на scss не вариант, т.к. это куча, в том числе стороннего кода.
                        0
                        Насколько я знаю, подключить простой CSS нельзя. Но достаточно переименовать файл из example.css в _example.scss и добавить его в all.scss так:
                        import «example»

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

                          не собирать все в один файл это оффтоп, т.к. source maps в таком случае вообще не нужны )
                          • UFO just landed and posted this here
                    0
                    Очень жаль что Compass не работает. Придется ждать новых релизов Sass и Compass (

                    Only users with full accounts can post comments. Log in, please.