1 files changed, 101 insertions, 0 deletions
diff --git a/files/es/tools/style_editor/index.html b/files/es/tools/style_editor/index.html
new file mode 100644
index 0000000000..cdfc54bebf
--- /dev/null
+++ b/files/es/tools/style_editor/index.html
@@ -0,0 +1,101 @@
+---
+title: Editor de Estilo
+slug: Tools/Editor_Estilo
+tags:
+  - CSS
+  - Desarrollo web
+  - Herramientas
+  - Herramientas de desarrollo web
+  - Hojas de estilo
+translation_of: Tools/Style_Editor
+---
+<p>El editor de estilo te permite:</p>
+
+<ul>
+ <li>ver y editar todas las hojas de estilo asociadas con una página</li>
+ <li>crear nuevas hojas de estilo desde bosquejos y aplicarlas a una página</li>
+ <li>importar hojas de estilo existentes y aplicarlas en la página</li>
+</ul>
+
+<p>{{EmbedYouTube("7839qc55r7o")}}</p>
+
+<p>Para abrir el Editor de Estilo selecciona la opción "Editor de Estilo" desde el menú "Web Developer" (este es un submenu del menú "Tools" o "Herramientas" en una Mac). El Toolbox o caja de herramientas aparecerá en la parte inferior de la ventana del navegador, con el Editor de Estilo activado:</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>El Editor de Estilo está divivido en  dos secciones principales: el panel de estilos en la izquierda y el editor en la derecha.</p>
+
+<div class="geckoVersionNote">
+<p>From Firefox 33 onwards, there's a third component to the Style Editor: <a href="/en-US/docs/Tools/Style_Editor#The_media_sidebar">the media sidebar</a>.</p>
+</div>
+
+<h2 id="El_panel_de_hojas_de_estilo">El panel de hojas de estilo</h2>
+
+<p>El panel de hojas de estilo, en la izquierda, muestra todas las hojas de estilos que están siendo utilizadas por el documento actual.  You can quickly toggle the use of a given sheet on and off by clicking the eyeball icon to the left of the sheet's name. Puede guardar los cambios hechos en la hoja de estilos a su computador, haciendo clic en el botón Guardar en la esquina inferior derecha de cada hoja de estilos de la lista.</p>
+
+<h2 id="El_panel_de_edición">El panel de edición</h2>
+
+<p>A la derecha está el panel de edición. Aquí está disponible el código fuente de la hoja de estilo seleccionada, lista para ver y editar. Cualquier cambio que realice será aplicada inmediatamente. This makes it easy to experiment with, revise, and test changes. Una vez esté satisfecho con sus cambios, puede guardar una copia localmente, haciendo clic en el botón Guardar.</p>
+
+<p><span style="line-height: 1.5;">El editor contiene numeración de líneas y resaltamiento de código, haciendo más fácil la lectura de su CSS. También soporta </span><a href="/en-US/docs/Tools/Style_Editor#Source_editor_shortcuts" style="line-height: 1.5;">keyboard shortcuts</a><span style="line-height: 1.5;">.</span></p>
+
+<p>El Editor de Estilos automáticamente des-minimiza las hojas de estilo que detecta, sin afectar el original. Esto facilita mucho el trabajo en páginas que ya han sido optimizadas.</p>
+
+<p>El Editor de Estilos soporta autocompletado. Empiece escribiendo y el sistema le ofrecerá una lista de sugerencias.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6943/style-editor-autocomplete.png" style="display: block; margin-left: auto; margin-right: auto;">Puede deshabilitar el autocompletado en <a href="/en-US/docs/Tools_Toolbox#Style_Editor">Style Editor settings</a>.</p>
+
+<h2 id="La_barra_lateral_media">La barra lateral "media"</h2>
+
+<p>A partir de Firefox 33 en adelante, el Editor de Estilos muestra una barra lateral a la derecha cuando se encuentra alguna regla @media (<a href="/en-US/docs/Web/Guide/CSS/Media_queries"><code>@media</code> rules</a>). La barra lateral muestra las reglas y provee un link a la línea donde se define dicha regla. Haga clic en un ítem para ir hacia la definición de esa regla en la hoja de estilo. El texto condicional de la regla estará en gris si el media query no aplica.</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;">La barra lateral de medios funciona especialmente bien con <a href="https://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_View">Responsive Design View</a> para crear y depurar diseños móviles :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8363/style-editor-media-sidebar.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h2 id="Creación_e_importación_de_hojas_de_estilo">Creación e importación de hojas de estilo</h2>
+
+<p>Se puede crear una nueva hoja de estilos haciendo click en el nuevo botón de la barra de herrramientas. A continuación puedes comenzar a introducir  CSS en el nuevo editor y ver como los nuevos estilos se aplican de forma inmediata ,al igual que los cambios en otras hojas.</p>
+
+<p>Se puede cargar una hoja de estilos desde el disco y aplicarlo a la página haciendo click en el boton de importar.</p>
+
+<h2 id="Soporte_de_mapa_fuente">Soporte de mapa fuente</h2>
+
+<p>{{EmbedYouTube("zu2eZbYtEUQ")}}</p>
+
+<p>Los desarrolladores web, con frecuencia crean archivos CSS  utilizando un preprocesador como  <a href="http://sass-lang.com/">Sass</a>, <a href="http://lesscss.org/">Less</a>, o <a href="http://learnboost.github.io/stylus/">Stylus</a>. Estas herramientas generan archivos CSS  procedentes de un sintasix mas rico y expresivo. Si haces esto, seras capaz de editar y  ver que el  CSS  generado no es tan util, porque el código que mantienes es el <span class="short_text" id="result_box" lang="es"><span>sintaxis</span> <span>preprocesado</span></span>, no el  CSS generado. Por lo que necesitarás editar el CSS generado, y después manualmente trabajar sobre como reaplicarlo a la fuente original.</p>
+
+<p>Mapas Fuente habilita para regresar desde el CSS generado a la síntasix original, entonces  se puede ver, y te permite editar archivos en la síntasix original. A partir de Firefox 29 en adelante, el editor de estilos puede interpretar mapas fuente de CSS .</p>
+
+<p>Esto significa que si utilizas, por ejemplo, Sass, el Editor de Estilos  mostrará,y permitirá editar,archivos Sass , en lugar del CSS que se ha generado desde ellos:</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;">Para que esto funcione ,es necesario:</p>
+
+<ul>
+ <li>utilizar un preprocesador CSS que interprete  <a href="https://docs.google.com/document/d/1U1RGAehQwRypUTovF1KRlpiOFze0b-_2gc6fAH0KY0k/edit">Source Map Revision 3 proposal</a>. Actualmente esto significa <a href="http://sass-lang.com/">Sass 3.3.0 </a> o superior , o la <a href="http://roots.io/using-less-source-maps/">versión 1.5.0 de Less</a>. Otros preprocesadores están trabajando activamente en añadir soporte, o lo están considerando.</li>
+ <li>actualmente el preprocesador da instrucciones para generar un mapa fuente, por ejemplo pasando el argumento <code>--sourcemap</code> a la herramienta de comando en linea de  Sass.</li>
+</ul>
+
+<h3 id="Visualización_de_las_fuentes_originales">Visualización de las fuentes originales</h3>
+
+<p>Ahora, si compruebas "mostrar fuentes originales" en los <a href="/en-US/docs/Tools_Toolbox#Style_Editor">ajustes del Editor de estilos</a>, el vínculo junto a las reglas  CSS en la <a href="/en-US/docs/Tools/Page_Inspector#Rules_view">Vista de Reglas</a> ,vincula con las fuentes originales en el Editor de Estilos.</p>
+
+<h3 id="Edición_de_las_fuentes_originales">Edición de las fuentes originales</h3>
+
+<p>Se pueden editar tambien las fuentes originales en el  Editor de estilos y ver el resultado aplicado a la página de inmediato. Para conseguir que esto funcione hay dos pasos adicionales.</p>
+
+<p>Primero, configura el preprocesador para que muestre la fuente original y automaticamente regenere el CSS cuando cambien las fuentes. Con Sass puedes hacer esto simplemente pasando la opción <code>--watch</code> :</p>
+
+<pre>sass index.scss:index.css --sourcemap --watch</pre>
+
+<p>A continuación, guarda la fuente original en el editor de estilos haciendo click en el botón   "Guardar" junto al archivo, y este se guardará sobre el archivo original.</p>
+
+<p>Ahora cuando hagas cambios en el archivo original en el  Editor de Estilos , el CSS se regenerará y podrás ver los cambios de forma inmediata.</p>
+
+<h2 id="Atajos_de_Teclado">Atajos de Teclado</h2>
+
+<h3 id="Atajos_del_editor_de_código_fuente">Atajos del editor de código fuente</h3>
+
+<p>{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "source-editor") }}</p>
+
+<p>{{ languages( { "ja": "ja/Tools/Style_Editor"} ) }}</p>