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
|
---
title: 樣式編輯器
slug: Tools/Style_Editor
translation_of: Tools/Style_Editor
---
<p><span class="tlid-translation translation" lang="zh-TW"><span title="">樣式編輯器使您能夠</span></span>:</p>
<ul>
<li>查看和編輯與頁面關聯的所有樣式表</li>
<li>從頭開始創建新樣式表並將其應用於該頁面</li>
<li>導入現成的樣式表並將其應用於該頁面</li>
</ul>
<p>{{EmbedYouTube("7839qc55r7o")}}</p>
<p>要打開樣式編輯器，請從“ 網頁開發者”選單中選擇“樣式編輯器”選項。（這是Mac上“工具”選單中的子選單）。 <a href="https://developer.mozilla.org/en-US/docs/Tools/DevTools_Window" title="/en-US/docs/Tools/DevTools_Window">工具箱</a>將會顯示在瀏覽器的視窗底部，並顯示樣式編輯器:</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>
<ul>
<li><a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Style_Editor#The_style_sheet_pane">視窗左側的樣式列表</a></li>
<li><a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Style_Editor#The_editor_pane">視窗中間的樣式編輯器</a></li>
<li><a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Style_Editor#The_media_sidebar">視窗右邊媒體側欄</a></li>
</ul>
<div class="geckoVersionNote">
<p>從Firefox 33開始，樣式編輯器還有第三個組件: <a href="/en-US/docs/Tools/Style_Editor#The_media_sidebar">媒體測攔</a>。</p>
</div>
<h2 id="樣式列表">樣式列表</h2>
<p><span class="tlid-translation translation" lang="zh-TW"><span title="">左側的樣式列表格列出了當前頁面正在使用的所有樣式表。</span> <span title="">通過單擊工作表名稱左側的眼球圖標，可以快速打開和關閉樣式表的使用。</span> <span title="">通過單擊列表中每個樣式表選項右下角的“儲存”按鈕，可以將對樣式表所做的任何更改保存到電腦硬碟裡。</span></span></p>
<h2 id="樣式編輯器">樣式編輯器</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>
<p>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 autocomplete off in the <a href="/en-US/docs/Tools_Toolbox#Style_Editor">Style Editor settings</a>.</p>
<h2 id="The_media_sidebar">The media sidebar</h2>
<p>From Firefox 33 onwards, the Style Editor displays a sidebar on the right-hand side whenever the current sheet contains any <a href="/en-US/docs/Web/Guide/CSS/Media_queries"><code>@media</code> rules</a>. The sidebar lists the rules and provides a link to the line of the sheet where the rule is defined. Click an item to jump to that rule in the sheet. The condition text of the rule is greyed-out if the media query doesn’t currently apply.</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/8365/style-editor-media-sidebar-detail.png" style="display: block; margin-left: auto; margin-right: auto;">The media sidebar works especially well with <a href="/en-US/docs/Tools/Responsive_Design_View">Responsive Design View</a> for creating and debugging responsive layouts:</p>
<p>{{EmbedYouTube("aVUXmvLSwoM")}}</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>
<p>{{EmbedYouTube("zu2eZbYtEUQ")}}</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 <a href="http://sass-lang.com/">Sass</a> 3.3.0 or above 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>
</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>
<p>From Firefox 35 onwards original sources are displayed by default.</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>
|
