mozilla

Revision 621693 of Style Editor

  • Revision slug: Tools/Style_Editor
  • Revision title: Style Editor
  • Revision id: 621693
  • Created:
  • Creator: molang
  • Is current revision?
  • Comment

Revision Content

这个样式编辑器可以使你:

  • 查看和编辑所有页面相关的样式表
  • 从 scratch创建新的样式表并添加到页面中
  • 引入已经存在的样式表并把它们添加到页面中

打开样式编辑器可以在 在 "Web Developer" 菜单中 选择“Style Editor” 选项。(“Web Develope”在Mac 系统上是“Tool”菜单的子菜单). Toolbox 就会出现在浏览器窗口的底部, 此时样式编辑器已经被激活:

样式表编辑器器被分为两大半: 样式表面板在左侧,编辑器在右侧

样式表面板

左侧的样式表面板列出了目前页面用到的所有样式. 你可以点击样式名称左侧的眼球图标来快速切换样式是否生效. 你可以点击样式名称右下角的保存(Save)按钮来保存你在本地的电脑上作出的任何改动.

编辑面板

右边的就是编辑面板. 这里你可以阅读和编辑你选中的样式表. 你作出的任何改动都会在页面中立即生效. 这使得试验、修改、验证改动都变的非常容易。.一旦得到了满意的改动, 你可以点击样式面板样式表名称上的保存按钮在本地保存一份副本.

The editor provides line numbers and syntax highlighting to help make it easier to read your CSS. It also supports a number of keyboard shortcuts.

The Style Editor automatically de-minimizes style sheets that it detects, without affecting the original. This makes it much easier to work on pages that have been optimized.

Autocomplete

Autocomplete is new in Firefox 29.

From Firefox 29 onwards, the Style Editor supports autocomplete. Just start typing, and it will offer you a list of suggestions.

You can switch this off in the Style Editor settings.

Creating and importing style sheets

You can create a new style sheet by clicking the New button in the toolbar. Then you can just start entering CSS into the new editor and watch as the new styles apply in real time just like changes to the other sheets.

You can load a style sheet from disk and apply it to the page by clicking the Import button.

Source map support

CSS source map support is a new feature in Firefox 29.

Web developers often create CSS files using a preprocessor like Sass, Less, or Stylus. These tools generate CSS files from a richer and more expressive syntax. If you do this, being able to see and edit the generated CSS is not so useful, because the code you maintain is the preprocessor syntax, not the generated CSS. So you'd need to edit the generated CSS, then manually work out how to reapply that to the original source.

Source maps enable the tools to map back from the generated CSS to the original syntax, so they can display, and allow you to edit, files in the original syntax. From Firefox 29 onwards, the Style Editor can understand CSS source maps.

This means that if you use, for example, Sass, then the Style Editor will show you, and allow you to edit, Sass files, rather than the CSS that is generated from them:

For this to work, you must:

Viewing original sources

Now, if you check "Show original sources" in the Style Editor settings, the links next to CSS rules in the Rules view will link to the original sources in the Style Editor.

Editing original sources

You can also edit the original sources in the Style Editor and see the results applied to the page immediately. To get this to work there are two extra steps.

First, set up your preprocessor so it watches the original source and automatically regenerates the CSS when the source changes. With Sass you can do this simply by passing the --watch option:

sass index.scss:index.css --sourcemap --watch

Next, save the original source in the Style Editor by clicking the "Save" button next to the file, and saving it over the original file.

Now when you make changes to the source file in the Style Editor the CSS is regenerated and you can see the changes right away.

Keyboard shortcuts

Source editor shortcuts

{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "source-editor") }}

{{ languages( { "ja": "ja/Tools/Style_Editor"} ) }}

Revision Source

<p>这个样式编辑器可以使你:</p>
<ul>
 <li>查看和编辑所有页面相关的样式表</li>
 <li>从 scratch创建新的样式表并添加到页面中</li>
 <li>引入已经存在的样式表并把它们添加到页面中</li>
</ul>
<p><iframe align="middle" allowfullscreen="" frameborder="0" height="360" scrolling="no" src="https://www.youtube.com/embed/7839qc55r7o/?feature=player_detailpage" width="640"></iframe></p>
<p>打开样式编辑器可以在 在 "Web Developer" 菜单中 选择“Style Editor” 选项。(“Web Develope”在Mac 系统上是“Tool”菜单的子菜单). <a href="https://developer.mozilla.org/en-US/docs/Tools/DevTools_Window" title="/en-US/docs/Tools/DevTools_Window">Toolbox</a>&nbsp;就会出现在浏览器窗口的底部, 此时样式编辑器已经被激活:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/6941/style-editor.png" style="display: block; margin-left: auto; margin-right: auto;" /></p>
<p>样式表编辑器器被分为两大半: 样式表面板在左侧,编辑器在右侧</p>
<h2 id="The_style_sheet_pane">样式表面板</h2>
<p>左侧的样式表面板列出了目前页面用到的所有样式. 你可以点击样式名称左侧的眼球图标来快速切换样式是否生效. 你可以点击样式名称右下角的保存(Save)按钮来保存你在本地的电脑上作出的任何改动.</p>
<h2 id="The_editor_pane">编辑面板</h2>
<p>右边的就是编辑面板. 这里你可以阅读和编辑你选中的样式表. 你作出的任何改动都会在页面中立即生效. 这使得试验、修改、验证改动都变的非常容易。.一旦得到了满意的改动, 你可以点击样式面板样式表名称上的保存按钮在本地保存一份副本.</p>
<p>The editor provides line numbers and syntax highlighting to help make it easier to read your CSS. It also supports a number of <a href="/en-US/docs/Tools/Style_Editor#Source_editor_shortcuts">keyboard shortcuts</a>.</p>
<p>The Style Editor automatically de-minimizes style sheets that it detects, without affecting the original. This makes it much easier to work on pages that have been optimized.</p>
<h3 id="Autocomplete">Autocomplete</h3>
<div class="geckoVersionNote">
 <p>Autocomplete is new in Firefox 29.</p>
</div>
<p>From Firefox 29 onwards, the Style Editor supports autocomplete. Just start typing, and it will offer you a list of suggestions.</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/6943/style-editor-autocomplete.png" style="display: block; margin-left: auto; margin-right: auto;" />You can switch this off in the <a href="/en-US/docs/Tools_Toolbox#Style_Editor">Style Editor settings</a>.</p>
<h2 id="Creating_and_importing_style_sheets">Creating and importing style sheets</h2>
<p>You can create a new style sheet by clicking the New button in the toolbar. Then you can just start entering CSS into the new editor and watch as the new styles apply in real time just like changes to the other sheets.</p>
<p>You can load a style sheet from disk and apply it to the page by clicking the Import button.</p>
<h2 id="Source_map_support">Source map support</h2>
<div class="geckoVersionNote">
 <p>CSS source map support is a new feature in Firefox 29.</p>
</div>
<p><iframe align="middle" allowfullscreen="" frameborder="0" height="360" scrolling="no" src="https://www.youtube.com/embed/zu2eZbYtEUQ/?feature=player_detailpage" width="640"></iframe></p>
<p>Web developers often create CSS files using a preprocessor like <a href="http://sass-lang.com/">Sass</a>, <a href="http://lesscss.org/">Less</a>, or <a href="http://learnboost.github.io/stylus/">Stylus</a>. These tools generate CSS files from a richer and more expressive syntax. If you do this, being able to see and edit the generated CSS is not so useful, because the code you maintain is the preprocessor syntax, not the generated CSS. So you'd need to edit the generated CSS, then manually work out how to reapply that to the original source.</p>
<p>Source maps enable the tools to map back from the generated CSS to the original syntax, so they can display, and allow you to edit, files in the original syntax. From Firefox 29 onwards, the Style Editor can understand CSS source maps.</p>
<p>This means that if you use, for example, Sass, then the Style Editor will show you, and allow you to edit, Sass files, rather than the CSS that is generated from them:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/6939/style-editor-sourcemap-820.png" style="display: block; margin-left: auto; margin-right: auto;" />For this to work, you must:</p>
<ul>
 <li>use a CSS preprocessor that understands the <a href="https://docs.google.com/document/d/1U1RGAehQwRypUTovF1KRlpiOFze0b-_2gc6fAH0KY0k/edit">Source Map Revision 3 proposal</a>. Currently this means the <a href="http://davidwalsh.name/future-sass">3.3.0 prerelease version of Sass</a>, or the <a href="http://roots.io/using-less-source-maps/">1.5.0 version of Less</a>. Other preprocessors are actively working on adding support, or considering it.</li>
 <li>actually instruct the preprocessor to generate a source map, for example by passing the <code>--sourcemap</code> argument to the Sass command-line tool</li>
 <li>use Firefox 29 or later</li>
</ul>
<h3 id="Viewing_original_sources">Viewing original sources</h3>
<p>Now, if you check "Show original sources" in the <a href="/en-US/docs/Tools_Toolbox#Style_Editor">Style Editor settings</a>, the links next to CSS rules in the <a href="/en-US/docs/Tools/Page_Inspector#Rules_view">Rules view</a> will link to the original sources in the Style Editor.</p>
<h3 id="Editing_original_sources">Editing original sources</h3>
<p>You can also edit the original sources in the Style Editor and see the results applied to the page immediately. To get this to work there are two extra steps.</p>
<p>First, set up your preprocessor so it watches the original source and automatically regenerates the CSS when the source changes. With Sass you can do this simply by passing the <code>--watch</code> option:</p>
<pre>
sass index.scss:index.css --sourcemap --watch</pre>
<p>Next, save the original source in the Style Editor by clicking the "Save" button next to the file, and saving it over the original file.</p>
<p>Now when you make changes to the source file in the Style Editor the CSS is regenerated and you can see the changes right away.</p>
<h2 id="Keyboard_shortcuts">Keyboard shortcuts</h2>
<h3 id="Source_editor_shortcuts">Source editor shortcuts</h3>
<p>{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "source-editor") }}</p>
<p>{{ languages( { "ja": "ja/Tools/Style_Editor"} ) }}</p>
Revert to this revision