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!

En las últimas versiones de los navegadores habrás podido comprobar que en las áreas de texto (etiqueta html: textarea) de los formularios aparece un control en su esquina inferior derecha que permite pulsar y arrastrar con el ratón para modifcar su tamaño.

Éste comportamiento, en general, es completamente indeseado pues normalmente existe un diseño al que ceñirse y redimensionar elementos internos puede llegar a romper la maquetación. Todo depende del diseño y cómo esté maquetado; pero personalmente nunca se me presento la necesidad de tener un textarea redimensionable.

Podemos utilizar la propiedad CSS3 resize y evitar o definir este comportamiento. La propiedad resize define si un elemento es redimensionable o no, y en caso de serlo en qué ejes.

CSS3

Evitar textarea redimensionable

Como hemos visto, para evitar la redimensión de un textarea (o de todos) simplemente debemos dar la propiedad resize:none; al selector CSS apropiado.

Dado un contenedor con un ancho determinado (ya sea en píxeles, porcentaje o relativo a fuente) y un alto también determinado podemos definir la propiedad CSS overflow para definir el comportamiento de dicho contenedor cuando su contenido supere esas dimensiones que tiene:

CSS2.1

CSS3

Para CSS3 tenemos estos mismos valores pero la propiedad podemos aplicarla indistintamente al ancho o al alto de la siguiente manera:

Funcionamiento y Crossbrowsing

La propiedad overflow determina el comportamiento frente al desbordamiento pero este comportamiento está directamente ligado a las propiedades width y height del contenedor. En general pienso que funcionan bastante bien y son muy útiles.

La propiedad CSS2.1 overflow funciona bien en los principales navegadores mientras que las propiedades CSS3 lo harán sólo en los navegadores compatibles con CSS3. En cualquier caso,  nunca está de más una revisión en los distintos navegadores objetivo, a fin de  detectar comportamientos distintos entre navegadores de estas propiedades y aprender a atajarlos; pues básicamente se basan en jugar con las propiedades CSS width, height y overflow del contenedor.

Como siempre, existen navegadores más preparados para el futuro, con soporte para nuevas versiones de CSS. Concretamente CSS3 está a puntito pero aún no es soportado por todos los navegadores y además, no siempre al 100%.

¿Esto quiere decir que puedo o que no puedo utilizar estas propiedades?

Bien. Esto queda a puro criterio del desarrollador. Personalmente, creo que deberían de poder usarse y que el validador w3c no debería de protestar por utilizar propiedades CSS3. Pero esto no es así y utilizando nuevas propiedades conseguirás un error de validación CSS en cada elemento que tenga una de ellas.

Ventajas de utilizar nuevas propiedades

- Puedes aportar novedosos efectos a tus sitios web, mediante más CSS.
- Aprendes bastante al moverte por nuevas especificaciones y más aún, si investigas el porqué de las nuevas propiedades.
- De la misma manera, vais practicando con nuevas propiedades y sus efectos, para cuando la versión 3 esté operativa 100%.

Desventajas de utlizar nuevas propiedades

- El documento, a dia de hoy, presentará un error de validación por cada elemento que tenga una de ellas.
- No todos los navegadores representarán dicha propiedad.
- Cualquiera puede validar y opinar sobre la pureza de tus estilos, de manera contraria a tu posición. (No es una desventaja muy clara).

Si tenéis alguna sugerencia... adelante!!

Saludos