Style Editor

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

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

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

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

样式表面板

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

编辑面板

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

编辑器会标出行数，提供语法高亮，以方便你阅读CSS代码. 同时，编辑器也支持一些键盘快捷键.

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.

自动补全

自 Firefox 29 以后, 样式编辑器支持自动补全. 保持输入，编辑器会给出建议列表.

你可以在 Style Editor settings(样式编辑器设置) 中关闭自动补全功能.

The media sidebar 媒体查询侧边栏

从Firefox 33 开始，当当前样式包含@media rules媒体查询规则的时候，样式编辑器在右侧会显示一个媒体查询侧边栏。侧边栏列出了所有的媒体查询和一个可以连接到源文件的源码处的链接。点击一个媒体查询会跳到对应的定义样式处。当前没有应用到的媒体查询样式是灰色的。

媒体侧边栏适合与响应式设计视图一起使用，创建和调试响应式布局。

创建和导入样式表

通过点击工具条上的新建按钮可以新建一个样式文表。然后就可以在编辑器中编辑样式，实时查看新样式的效果，这和编辑其他已经加载进来的样式表一样。

可以通过点击导入按钮从本地磁盘导入一个样式文件应用到当前的网页中。

Source map support

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:

• use a CSS preprocessor that understands the Source Map Revision 3 proposal. Currently this means the 3.3.0 prerelease version of Sass, or the 1.5.0 version of Less. Other preprocessors are actively working on adding support, or considering it.
• actually instruct the preprocessor to generate a source map, for example by passing the --sourcemap argument to the Sass command-line tool
• use Firefox 29 or later

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.

如果在样式编辑器设置中勾上"Show original sources" ，

Editing original sources 编辑源码

可以在样式编辑器编辑样式源码，并且可以立即看到修改样式应用的效果。需要两个步骤达到这样的目的：

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.

修改样式源码文件的CSS样式之后，样式会被重新生成，可以立即看到修改后的效果。

Keyboard shortcuts 键盘快捷键

Source editor shortcuts 源码编辑快捷键

This table lists the default shortcuts for the source editor.

In the Editor Preferences section of the developer tools settings, you can choose to use Vim, Emacs, or Sublime Text key bindings instead.

To select these, visit about:config, select the setting devtools.editor.keymap, and assign "vim" or "emacs", or "sublime" to that setting. If you do this, the selected bindings will be used for all the developer tools that use the source editor. You need to reopen the editor for the change to take effect.

From Firefox 33 onwards, the key binding preference is exposed in the Editor Preferences section of the developer tools settings, and you can set it there instead of about:config.