Hoy voy a retomar la inserción de contenidos en el blog. En casa del herrero... y llevamos un tiempo con bastante lío por aquí. En fin, hoy vamos a comentar la posibilidad de abrir hojas de estilo SCSS con Dreamweaver y que respete los estilos de código de CSS.

Al crear hojas de estilo mediante SASS, necesitamos añadir nuestros estilos y código SASS en archivos de extensión SCSS. Ocurre que, por defecto, el editor Dreamweaver de Adobe abra los ficheros SCSS como texto plano; perdiendo el coloreado típico de CSS en Dreamweaver: selectores, propiedades y valores.

Esto dificulta la edición de dichos ficheros SCSS, sobre todo si estáis acostumbrados a los colores del código CSS.

Para añadir la extensión SCSS en Dreamweaver y que la detecte como hoja de estilos (CSS) hay que hacer lo siguiente:

(Ver leyenda al final del post)

WinXP

Debemos editar tres ficheros e indicar allí el cambio para que DW identifique los ficheros SCSS como CSS:

1º En "Documents and Settings":

El primer fichero a editar se encuentra en la típica carpeta de WinXP: "Documents and Settings". Rutas de ejemplo donde puede estar ubicado son:

C:/Documents and Settings/TU_USUARIO/Adobe/Dreamweaver CSx/%lang%/Configuration/Extensions.txt

ó la siguiente, según versión de Dreamweaver:

C:/Documents and Settings/TU_USUARIO/Datos de Programa/Adobe/Dreamweaver X/Configuration/Extensions.txt

En última instancia, si no lo encuentras en estas rutas, puedes intentar una búsqueda   en la carpeta  "Documents and Settings" del fichero "Extensions.txt"  mediante WinXP.

Localizado el fichero, abrirlo y sustituir "CSS:Style Sheets" por "CSS,SCSS:Style Sheets".

2º En la carpeta de instalación de Dreamweaver:

El siguiente fichero a editar está en la carpeta de instalación de Dreamweaver, por lo tanto la ubicación puede variar de un equipo a otro, según dónde lo hayáis instalado.

C:/Archivos de Programa/Adobe/Adobe Dreamweaver X/configuration/Extensions.txt

De nuevo, abrimos Extensions.txt una vez localizado y hacemos el mismo cambio que en el fichero anterior: abrir y sustituir "CSS:Style Sheets" por "CSS,SCSS:Style Sheets".

3º En la carpeta de instalación de Dreamweaver, fichero xml de tipos:

Por último, editamos el fichero MMDocumentTypes.xml donde se definen los tipos de Dreamweaver, el cual se encuentra en la carpeta de instalación del punto anterior, en:

...\configuration\DocumentTypes\MMDocumentTypes.xml

Abrir el fichero y sustituir winfileextension="css" por "winfileextension="css,scss".

4º Reiniciar Dreamweaver y listo

El último paso es fundamental, cierra el Dreamweaver (si no lo habías cerrado aún) y ábrelo de nuevo para que reconozca, por fin, los ficheros SCSS como CSS.

Win Vista / 7

El proceso para Windows Vista y 7 ha de ser idéntico, si bien aquí "Documents and Settings" no existe. Por lo tanto debéis usar la ruta típica de WinVista/7:

1º C:\Users\TU_USUARIO\AppData\Roaming\Adobe\Dreamweaver CSX\%lang%\Configuration\Extensions.txt abrirlo y sustituir "CSS:Style Sheets" por "CSS,SCSS:Style Sheets".

2º C:\Program Files\Adobe\Adobe Dreamweaver X\configuration\Extensions.txt abrirlo y sustituir "CSS:Style Sheets" por "CSS,SCSS:Style Sheets".

3º ...\configuration\DocumentTypes\MMDocumentTypes.xml Abrir el fichero y sustituir winfileextension="css" por "winfileextension="css,scss".

4º Reiniciar Dreamweaver

Leyenda

TU_USUARIO => Debes sustituirlo por tu usuario activo de WinXP.
\Datos de Programa\ => Ésta es una carpeta oculta. Debes tener configurado WinXP para que muestre los ficheros y carpetas ocultos.
Dreamweaver CSx o Dreamweaver X => x se refiere a la versión que tengas instalada, en mi caso "Dreamweaver 9".
%lang% => se refiere a un idioma. Si existe esta carpeta en vuestro sistema será del tipo es_ES.

Despedida y cierre

Y nada más, con esto ya deberías poder hacer que el Dreamweaver os detecte las SCSS como CSS.

Lógicamente, SASS permite cierta sintaxis no existente en CSS por lo que el coloreado de SCSS no es perfecto en Dreamweaver. Sin embargo, puede ayudar visualmente a la hora de desarrollar.

Espero que os haya sido de ayuda.

Hasta la próxima!