This repository has been archived by the owner on Nov 8, 2023. It is now read-only.
/
css-preprocessors.html
168 lines (124 loc) · 8.52 KB
/
css-preprocessors.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
{{+bindTo:partials.standard_devtools_article canonical:strings.canonicalDevToolsPreprocessors}}
<p class="caution">
<strong style="font-weight: normal; font-size: 110%; display:block;">The DevTools docs have moved!</strong>
<a href="https://developers.google.com/web/tools/iterate/inspect-styles/edit-styles#edit-sass-less-or-stylus">Read the latest version</a> of this article and <a href="https://developers.google.com/web/tools/chrome-devtools">head over to the new home of Chrome DevTools</a> for the latest tutorials, docs and updates.
</p>
<h1>Working with CSS Preprocessors</h1>
<p>Many developers generate CSS stylesheets using a CSS preprocessor, such as <a href="http://sass-lang.com/" target="_blank">Sass</a>, <a href="http://lesscss.org/" target="_blank">Less</a>, or <a href="https://learnboost.github.io/stylus/" target="_blank">Stylus</a>. Because the
CSS files are generated, editing the CSS files directly is not as helpful.</p>
<p>For preprocessors that support CSS source maps, DevTools lets you live-edit
your preprocessor source files in the Sources panel, and view the results without having to leave DevTools or refresh the page. When you inspect an element whose styles are provided by a generated CSS file, the Elements panel displays a link to the original source file, not the generated .css file.</p>
<figure class="screenshot"> <img src="css-preprocessors-files/sass-debugging.png" alt="Elements panel showing .scss stylesheet" /></figure>
<p>To jump to the source file: </p>
<ul>
<li>Click the link to open the (editable) source file in the Sources panel.</li>
<li><b>Control+click</b> (or <b>Command+click</b>) on any CSS property name or value to open the source file and jump to the appropriate line.</li>
</ul>
<figure class="screenshot"><img src="css-preprocessors-files/sass-sources.png" alt="Sources panel showing .scss file" /></figure>
<p>When you save changes to a CSS preprocessor file in DevTools, the CSS preprocessor should re-generate the
CSS files. Then DevTools reloads the newly-generated CSS file. </p>
<aside class="note">Changes made in an <em>external</em> editor are not detected by DevTools until the Sources tab
containing the associated source file regains focus. Also, manual editing of a CSS file generated by the Sass/LESS/other compiler will break the source map association until the page is reloaded.</aside>
<aside class="note">If you're using Workspaces, you'll need to make sure the generated CSS file is also mapped into the workspace. You can verify this by looking in Sources panel right-side tree, and seeing the CSS is from your local folder.</aside>
<div class="collapsible">
<h2 id="toc-requirements">Requirements</h2>
<p>There are a few requirements to keep in mind when working with a CSS preprocessor:</p>
<ul>
<li><p>To use this workflow, your CSS preprocessor must support CSS source maps, specifically the Source Map v3 proposal. The CSS source maps must be built
along with the CSS files, so DevTools can map each CSS property to the correct location in the original source file
(for example, .scss file).</p></li>
<li><p>For the DevTools to automatically reload styles when you change the source file, your preprocessor must be set up to
regenerate CSS files whenever a source file changes. Otherwise, you must regenerate CSS files manually and reload the
page to see your changes.</p></li>
<li><p>
You must be accessing your site or app from a web server (not a <b>file://</b> URL), and
the server must serve the CSS files as well as the source maps (.css.map) and source files (.scss, etc.).
</p></li>
<li>
<p>
If you are <em>not</em> using the Workspaces feature, the web server must also supply the
<code>Last-Modified</code> header. The Python <code>SimpleHTTPServer</code> module provides this header by default.
You can start a web server to serve the contents of the current directory like this:</p>
<pre class="prettyprint">python -m SimpleHTTPServer</pre>
</li>
</ul>
</div>
<div class="collapsible">
<h2 id="toc-enabling-css-source-maps">Enabling CSS source maps</h2>
<p>CSS source maps are enabled by default. You can choose to
enable automatic reloading of generated CSS files. </p>
<p><strong>To enable CSS source maps and CSS reload:</strong></p>
<ol>
<li><p>Open DevTools Settings and click <b>General</b>.</p></li>
<li><p>Turn on <b>Enable CSS source maps</b> and <b>Auto-reload generated CSS</b>.</p></li>
</ol>
</div>
<div class="collapsible">
<h2 id="toc-using-css-source-maps">Using Sass with CSS source maps</h2>
<p>To live-edit Sass files in Chrome you need to have a version past 3.3, which added support for source map generation.</p>
<pre class="prettyprint">gem install sass</pre>
<p>Once Sass is installed, start the Sass compiler to watch for changes to your Sass source files and create source map files for each generated CSS file, for example: </p>
<pre class="prettyprint">sass --watch <b>--sourcemap</b> sass/styles.scss:styles.css</pre>
</div>
<div class="collapsible">
<h2 id="toc-css-preprocessor-support">CSS preprocessor support</h2>
<p>DevTools supports the <a href="https://docs.google.com/a/google.com/document/d/1U1RGAehQwRypUTovF1KRlpiOFze0b-_2gc6fAH0KY0k/edit#">Source Map Revision 3 proposal</a>. This proposal is being implemented in several CSS preprocessors (Updated August 2014):</p>
<ul>
<li><strong>Sass</strong>: As described above, this is supported in Sass 3.3.</li>
<li><strong>Compass</strong>: The <code>--sourcemap</code> flag was <a href="http://compass-style.org/blog/2014/08/15/omg-compass-1-0/">implemented in Compass 1.0</a>. Alternatively you can add <code>sourcemap: true</code> to your config.rb file. <a href="https://github.com/grayghostvisuals/sourcemaps">Demo repo here</a>. Development notes are in <a href="https://github.com/Compass/compass/issues/1108#issuecomment-52432075">issue 1108</a>.
<li><strong>Less</strong>: Implemented in 1.5.0. See <a href="https://github.com/less/less.js/issues/1050#issuecomment-25566463">issue #1050</a> for details and usage patterns.</li>
<li><strong>Autoprefixer</strong>: Implemented in 1.0. <a href="https://github.com/ai/autoprefixer#source-map">Autoprefixer docs</a> explain how to use it, along with absorbing an input sourcemap (from another preprocessor).</li>
<li><strong>Libsass</strong>: <a href="https://github.com/hcatlin/libsass/commit/366bc110c39c26c9267a1cc06e578beb94cd93ef">Implemented</a>.
<li><strong>Stylus</strong>: Implemented. See the latest in <a href="https://github.com/LearnBoost/stylus/pull/1655#issuecomment-52826158">issue #1655</a>.</li>
</ul>
</div>
<div class="collapsible">
<h2 id="toc-how-css-source-maps-work">How CSS source maps work</h2>
<p>For each CSS file it produces, the preprocessor generates a <a href="http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/">source map</a> file (.map file) in addition to the compiled CSS. The source map file is a JSON file that
defines a mapping between each generated CSS declaration and the corresponding line of the source file. Each CSS file contains an annotation that specifies the URL of its source map file, embedded in a special comment on the
last line of the file:</p>
<pre class="prettyprint">
/*# sourceMappingURL=<url> */
</pre>
<p>For instance, given an SCSS file named <b>styles.scss</b>:</p>
<pre class="prettyprint lang-css">
$textSize: 26px;
$fontColor: red;
$bgColor: whitesmoke;
h2 {
font-size: $textSize;
color: $fontColor;
background: $bgColor;
}
</pre>
<p>Sass generates a CSS file, <b>styles.css</b>, with the sourceMappingURL annotation:</p>
<pre class="prettyprint lang-css">
h2 {
font-size: 26px;
color: red;
background-color: whitesmoke;
}
/*# sourceMappingURL=styles.css.map */
</pre>
<p>Below is an example source map file:</p>
<pre class="prettyprint">
{
"version": "3",
"mappings":"AAKA,EAAG;EACC,SAAS,EANF,IAAI;EAOX,KAAK"
"sources": ["sass/styles.scss"],
"file": "styles.css"
}
</pre>
</div>
<div class="collapsible">
<h2 id="toc-resources">Resources</h2>
<p>Many users have developed their own workflows using CSS preprocessors.
See the following external articles for tutorials and alternate workflows.
</p>
<ul>
<li><a href="https://medium.com/what-i-learned-building/b4daab987fb0">Getting started with CSS sourcemaps and in-browser Sass editing</a></li>
<li><a href="http://benfrain.com/add-sass-compass-debug-info-for-chrome-web-developer-tools/">Faster Sass debugging and style iteration with source maps, Chrome Web Developer Tools and Grunt</a></li>
</ul>
<aside class="note"><strong>Note:</strong> External resources may not reflect the latest version of Chrome.</aside>
</div>
{{/partials.standard_devtools_article}}