Заставляем Google Chrome показывать scss вместо css и учим матчасть Chrome DevTools

Как использовать вкладку resources браузера? Файлы можно не только просматривать, но и редактировать, и сохранять на диск... Здесь несколько мануалов и страницы документации. Еще один способ для работы со стилями?
Наверное это правильно - наскоро освоить несколько альтернатив. ...Что понравилось в документации Chrome developers... Так это то, как они между делом подключили сервер на Питоне python -m SimpleHTTPServer. И правильно, без сервера никуда, а Ruby (на котором они sass запускают) я и знать не хочу...

Managing application storage The Resources panel lets you inspect your application's local data sources, including IndexedDB, Web SQL databases, local and session storage, cookies, and Application Cache resources. You can also quickly inspect your application's visual resources, including images, fonts, and stylesheets.
Working with CSS Preprocessors Many developers generate CSS stylesheets using a CSS preprocessor, such as Sass, Less, or Stylus. Because the CSS files are generated, editing the CSS files directly is not as helpful.

Chrome DevTools Overview
You can also map remote assets to local assets using Workspaces, which is specially useful if you're working with a local HTTP server. Chrome Dev tools can be a powerful tool if you know how to use it. I recommend you go through some of these links:
Start Course Explore and Master Chrome DevTools
My Workflow: Never having to leave DevTools

Sass Source Maps + Chrome = Magic Have you ever wanted your changes from Chrome’s DevTools to stick – or wanted to edit Sass files directly in the inspector?
Getting started with CSS sourcemaps and in-browser Sass editing CSS sourcemaps allow the browser to map CSS generated by a pre-processor, such as Sass, back to the original source file, including exactly which Sass mixin, placeholder or variable is responsible for a given line of CSS
Faster Sass debugging and style iteration with source maps, Chrome Web Developer Tools and Grunt... 401 days since this post was last revised. Specific details are likely out of date.
Inspect and Manage Your Local Storage APIs
Evaluating network performance The Network panel records information about each network operation in your application, including detailed timing data
HAR viewer that mimics (or at least tries really hard to) Chromes network tab
Using the Timeline

Как же это работает?¶

Маппинг - это когда хром показывает вместо одного файл другой. Частный случай scss вместо css, но автоматическое преобразование (препроцессинг) scss --> css выполняется не в Хроме, а штатными средствами (например sass). Однако, когда мы открываем файл в Хроме (Devtools), то нам нужно разрешить записывать отредактированные файлы на диск. Для этого задаем папку в (подпапки) которой все и записывается. Таким образом, Хром (tools) при редактировании автоматически перезаписывает example.sass файл, sass после каждого изменения перезапивсывает example.css файл, а Хром сразу же перегружает...
Но не так все просто, нужен еще сервер..., иначе маппинга не будет...

In [ ]:

####Enabling CSS source maps

In [ ]:

####Using Sass with CSS source maps

In [ ]:

gem install sass # Если еще не установлен

Вот она, наиполезнейшая команда слежения (ранее я использовал аналог из compass)

In [ ]:

sass --watch --sourcemap sass/styles.scss:styles.css

CSS preprocessor support¶

Компиляцию (sass -> css) можно запустить сразу (из настроек конфига) или опцией из командной строки

DevTools supports the Source Map Revision 3 proposal. This proposal is being implemented in several CSS preprocessors (Updated August 2014):
•Sass: As described above, this is supported in Sass 3.3.
•Compass: The --sourcemap flag was implemented in Compass 1.0. Alternatively you can add sourcemap: true to your config.rb file. Demo repo here. Development notes are in issue 1108.
•Less: Implemented in 1.5.0. See issue #1050 for details and usage patterns.
•Autoprefixer: Implemented in 1.0. Autoprefixer docs explain how to use it, along with absorbing an input sourcemap (from another preprocessor).
•Libsass: Implemented.
•Stylus: Implemented. See the latest in issue #1655.

Вот оно, слабое место мануала (им повезло, что у меня Питон - настольная игрушка)¶

In [ ]:

python -m SimpleHTTPServer

In [ ]:

# %load http://localhost:8000
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"><html>
<title>Directory listing for /</title>
<body>
<h2>Directory listing for /</h2>
<hr>
<ul>
<li><a href=".sass-cache/">.sass-cache/</a>
<li><a href="draft_pages/">draft_pages/</a>
<li><a href="found-test/">found-test/</a>
<li><a href="foundation-sites/">foundation-sites/</a>
</ul>
<hr>
</body>
</html>

Не забываем, что в SASS есть неплохая документация¶

In [ ]:

F:\stradorusite\foundation\foundation-sites>sass -h
Usage: sass [options] [INPUT] [OUTPUT]

Description:
  Converts SCSS or Sass files to CSS.

Common Options:
    -I, --load-path PATH             Specify a Sass import path.
    -r, --require LIB                Require a Ruby library before running Sass.
        --compass                    Make Compass imports available and load project configuration.
    -t, --style NAME                 Output style. Can be nested (default), compact, compressed, or expa
nded.
    -?, -h, --help                   Show this help message.
    -v, --version                    Print the Sass version.

Watching and Updating:
        --watch                      Watch files or directories for changes.
                                     The location of the generated CSS can be set using a colon:
                                       sass --watch input.sass:output.css
                                       sass --watch input-dir:output-dir
        --update                     Compile files or directories to CSS.
                                     Locations are set like --watch.
    -f, --force                      Recompile every Sass file, even if the CSS file is newer.
                                     Only meaningful for --update.
        --stop-on-error              If a file fails to compile, exit immediately.
                                     Only meaningful for --watch and --update.

Input and Output:
        --scss                       Use the CSS-superset SCSS syntax.
        --sourcemap=TYPE             How to link generated output to the source files.
                                       auto (default): relative paths where possible, file URIs elsewher
e
                                       file: always absolute file URIs
                                       inline: include the source text in the sourcemap
                                       none: no sourcemaps
    -s, --stdin                      Read input from standard input instead of an input file.
                                     This is the default if no input file is specified.
    -E, --default-encoding ENCODING  Specify the default encoding for input files.
        --unix-newlines              Use Unix-style newlines in written files.
    -g, --debug-info                 Emit output that can be used by the FireSass Firebug plugin.
    -l, --line-numbers               Emit comments in the generated CSS indicating the corresponding sou
rce line.
        --line-comments

Miscellaneous:
    -i, --interactive                Run an interactive SassScript shell.
    -c, --check                      Just check syntax, don't evaluate.
        --precision NUMBER_OF_DIGITS How many digits of precision to use when outputting decimal numbers
.
                                     Defaults to 5.
        --cache-location PATH        The path to save parsed Sass files. Defaults to .sass-cache.
    -C, --no-cache                   Don't cache parsed Sass files.
        --trace                      Show a full Ruby stack trace on error.
    -q, --quiet                      Silence warnings and status messages during compilation.

F:\stradorusite\foundation\foundation-sites>

Посты чуть ниже также могут вас заинтересовать