Uso de preprocesadores de CSS en Dreamweaver

El CSS es un lenguaje que describe el estilo de los documentos HTML. Los preprocesadores de CSS compilan código escrito en un lenguaje preprocesado al código CSS, que resulta más familiar. El lenguaje preprocesado eleva CSS a un nivel más cercano al de un lenguaje de programación.

En concreto, los preprocesadores te permiten usar variables, mix-ins, funciones y muchas otras técnicas que
no son posibles en CSS.Con los preprocesadores de CSS, puedes definir todo una vez y reutilizarlo repetidamente, lo que da como resultado CSS mantenible y ampliable.

Por medio de los preprocesadores de CSS, también puede producirse un CSS más limpio y fácil de mantener. Si estás creando sitios web que hacen referencia a varios archivos CSS, usar preprocesadores de CSS como Sass o Compass puede reducir la codificación manual y las acciones de copiar/pegar.

Dreamweaver utiliza un compilador Ruby-Saas integrado para compilar los archivos SCSS y LESS. Dreamweaver también es compatible con los marcos de trabajo Compass y Bourbon para compilar archivos Sass. 

LESS está basado en JavaScript, mientras que Sass lo está en Ruby. Sin embargo, no es necesario saber nada de ninguno de estos lenguajes. Tampoco es necesario utilizar la línea de comandos para compilar los archivos en CSS. Dreamweaver compila automáticamente estos archivos en CSS usando la biblioteca JavaScript less.js cuando carga, edita o guarda estos archivos.

Versiones compatibles:

• Sass: 3.4.25
• LESS: 2.7.2
• Compass: 1.0.3
• Bourbon: 4.2.6
• Bourbon Neat: 1.7.3
• Bourbon Bitters: 1.2.0

¿Cómo trata Dreamweaver los preprocesadores de CSS?

El modo en que Dreamweaver trata los preprocesadores de CSS varía en función de si se ha definido un sitio. Si defines un sitio, puedes configurar las preferencias del preprocesador de CSS y también usar los marcos de trabajo Compass y Bourbon desde Dreamweaver.

Al definir un sitio, se puede personalizar la forma en que funcionan los preprocesadores de CSS en Dreamweaver, ajustando las preferencias de preprocesadores de CSS específicas del sitio. Las preferencias de preprocesadores de CSS específicas del sitio permiten especificar las opciones de compilación para cada sitio. También puedes personalizar la ubicación de los archivos Sass y CSS, y las opciones del preprocesador específicas para cada sitio.

Continúa leyendo para saber cómo usar Dreamweaver con preprocesadores de CSS:

Dreamweaver 2017 y los preprocesadores de CSS

En Dreamweaver 2017, la compatibilidad con los preprocesadores de CSS está integrada en Dreamweaver. Es decir, se puede trabajar con archivos de Sass/LESS/SCSS dentro de Dreamweaver. Un simple toque Ctrl + S o Cmd + S le permitirá compilar automáticamente en Dreamweaver. También puede compilar manualmente archivos CSS individuales utilizando Herramientas > Compilar (o F9). Los cambios también se reflejan en todos los archivos HTML abiertos donde este CSS compilado está vinculado o adjunto.

A continuación se presenta un flujo de trabajo de alto nivel de las tareas involucradas al usar preprocesadores de CSS:

• Instale el compilador adecuado si desea utilizar Compass o Bourbon desde Dreamweaver. Esta instalación es un proceso de solo un clic. Configure los ajustes del preprocesador de CSS.

Instale el compilador solo si quiere una copia de los archivos del framework (Bourbon) o si desea generar archivos scss predeterminados y archivos de configuración basados en Ruby (Compass). Se recomienda guardar una copia de los archivos del framework. Si ciertos mixins o funciones del marco de creación se eliminan en revisiones posteriores, aún puedes acceder a los archivos del preprocesador dentro de tu sitio.

• Asegúrese de que esté habilitada la compilación automática. Luego presione Guardar para actualizar los archivos CSS.
• (Opcional) Vea cómo se reflejan los cambios en la vista en vivo o en la vista previa en tiempo real en todas las páginas HTML donde se usa el CSS generado.

Dreamweaver 2015 y los preprocesadores de CSS

En Dreamweaver 2015 y versiones anteriores de CC, podría utilizar archivos Sass, LESS y SCSS con Dreamweaver. Sin embargo, tenías que compilar estos archivos tú mismo fuera de la aplicación Dreamweaver.
Tu flujo de trabajo se parecería a los siguientes pasos:

1. Descargar e instalar un compilador.
2. Configurar una tarea de grunt (Gruntfile.js) para que el compilador lea su archivo Sass/LESS/SCSS.
3. Configurar otra tarea de grunt para compilar el archivo en CSS, que luego incluiría en Dreamweaver.

Debes realizar estos pasos cada vez que hagas un cambio en tu archivo Sass/LESS/SCSS.

Si no tiene definido un sitio, puede elegir compilar manualmente los archivos Sass y LESS. Sin embargo, no está disponible la compatibilidad con los frameworks Compass y Bourbon.

¿Cómo se utilizan los preprocesadores de CSS en Dreamweaver?

Este es un flujo de trabajo de alto nivel de las tareas involucradas al usar preprocesadores CSS:

1. Definir un sitio en Dreamweaver. Asegúrese de que el archivo Sass o LESS que intenta compilar esté incluido en la carpeta raíz del sitio. Si ya ha definido un sitio y el archivo Sass/LESS está incluido en la raíz del sitio, continúe con el paso siguiente. Para obtener más información sobre la configuración de un sitio de Dreamweaver, consulte Acerca de los sitios de Dreamweaver.
2. Configuración de preferencias para los preprocesadores de CSS (por ejemplo, definir la ubicación de los archivos CSS generados). Esas preferencias son específicas del sitio. Para obtener más información, consulte Configuración de preferencias específicas del sitio para preprocesadores CSS.
3. Si se desea utilizar frameworks específicos, como Compass o Bourbon, se pueden especificar las preferencias para estos frameworks. Para obtener más información, consulte: Uso del marco Compass o Uso del marco Bourbon.
4. Configure la compilación automática o compile manualmente los archivos Sass y LESS. Para obtener más información, consulte Compilar archivos de preprocesador CSS.

Configuración de preferencias de los preprocesadores de CSS

Puedes establecer preferencias específicas del sitio para preprocesadores CSS usando el cuadro de diálogo Sites > Administrar sitios.

Mantener las preferencias específicas del sitio para los preprocesadores de CSS le permitirá administrar los preprocesadores de CSS para el sitio. Esta acción también le da control sobre el preprocesador CSS para cada sitio, sin tener que actualizar las preferencias cada vez que cambie de sitio.

Configurar las preferencias generales de preprocesadores de CSS

Puede establecerse la siguiente configuración general del preprocesador de CSS en el cuadro de diálogo Sitios > Administrar sitios > Preprocesadores de CSS. De forma predeterminada, esta configuración es aplicable para el marco SaaS.

Seleccione esta casilla de verificación para activar la compilación automática de los preprocesadores de CSS. Si selecciona esta opción, Dreamweaver generará automáticamente un archivo CSS al guardar su archivo Sass, LESS o SCSS. Si esta opción se deja sin seleccionar, tienes que compilar manualmente los archivos cada vez que hagas un cambio.

Opciones LESS

procesa solo las expresiones matemáticas que están entre paréntesis. Por ejemplo, (100 px/25 px) se procesa correctamente, mientras que 20 % + 10 % (sin paréntesis) no se procesa. Cuando esta opción está deshabilitada, se procesan todas las operaciones matemáticas del archivo.

Sin esta opción, LESS intentará estimar en la unidad de salida al aplicar matemáticas. Por ejemplo:

.class {

property: 1px * 2px;

}

En este caso, la longitud multiplicada por una longitud da por resultado un área, pero css no admite especificar áreas. Dreamweaver asume que el usuario pretendía que uno de los valores fuera un valor y no una unidad de longitud.

Con unidades estrictas activadas, Dreamweaver asume que es un error de cálculo y genera un error.

Esta opción te permite reescribir URLs en el archivo CSS que se genera para que las URLs sean siempre relativas al archivo generado. 

Crea un mapa de origen. El mapa fuente es un archivo que conecta los lenguajes de alto nivel como Sass y LESS, y el lenguaje de bajo nivel al que compilan, como CSS.

Opciones Sass/SCSS

Especifica el estilo del archivo de salida CSS:

• Anidado - Formatea el CSS compilado en la estructura modular bien conocida.
• Compacto: formatea el CSS compilado en una estructura compacta que ocupa menos espacio que Anidado o Expandido.
• Comprimido: genera el CSS en una estructura plana.
• Expandido: procesa el CSS en modo ampliado y cada propiedad y regla ocupan una línea. Las propiedades tienen sangría dentro de las reglas, pero las reglas no tienen sangría de ninguna manera. 

Crea comentarios en el archivo CSS de salida que asigna el código CSS a la línea desde la cual fue generado.

Crea un mapa de fuente (archivo que conecta lenguajes de alto nivel como Sass y LESS, y el lenguaje de bajo nivel al que compilan, como CSS). 

Configuración de las preferencias de origen y salida de CSS

Puedes definir dónde deben colocarse los archivos CSS generados y la ruta que Dreamweaver debe supervisar y que active la compilación automática cuando se modifica un archivo Sass/LESS en dicha ruta usando un editor externo.

Puedes establecer la configuración siguiente de fuente y salida del preprocesador CSS en el cuadro de diálogo Sitios > Administrar sitios.

Salida de CSS

Especifica la ubicación del archivo CSS de salida que se genera.

Selecciona esta opción si quieres que los archivos CSS generados se guarden en la misma carpeta que los archivos Sass y LESS de fuente.

Seleccionar esta opción y especificar una carpeta donde guardar los archivos CSS generados.

Esta opción permite reemplazar una parte de la ruta con las cadenas From y To. Por ejemplo, al establecer Desde: scss y Hasta: css, el archivo de salida se coloca dentro de la misma estructura de árbol después de reemplazar SCSS en la ruta css.

Especifique la subcarpeta en la que deberá prestarse atención a la raíz del sitio. Normalmente, esta subcarpeta contiene todos tus archivos SCSS o LESS. 

Si ha activado la compilación en Configuración general, Dreamweaver activa automáticamente el preprocesador de CSS. Dreamweaver activa la compilación automática cuando cualquier archivo dentro de la carpeta se modifica externamente, o desde Dreamweaver.

Uso del framework Compass

Compass es un marco de creación CSS de código abierto que te permite crear hojas de estilo CSS3 usando Sass.

Dreamweaver ofrece compatibilidad con Compass. Si creas hojas de estilo usando Compass, puedes compilar estas hojas de estilo y generar archivos CSS desde Dreamweaver.

Uso del framework Bourbon

Dreamweaver es compatible con la familia de productos Bourbon. Si creas hojas de estilos usando Bourbon, puedes compilar estas hojas de estilos y generar archivos CSS desde Dreamweaver.

Los siguientes tipos de Bourbon son compatibles:

• Bourbon - Una biblioteca de mixins simple y ligera para Sass
• Bourbon Neat - Un marco de trabajo de cuadrícula semántico ligero para Sass y Bourbon
• Bourbon Bitters: estilos Scaffold, variables y estructura para proyectos Bourbon

Puedes importar el marco de trabajo Bourbon añadiendo uno de los siguientes en tu código:

• @import "bourbon" - para importar Bourbon
• @import "neat" – para importar Bourbon Neat
• @import "base" – para importar Bourbon Bitter

Dreamweaver utiliza entonces la versión preempaquetada de Bourbon al compilar los archivos del preprocesador.

Asimismo, se pueden instalar los archivos del framework Bourbon en el sitio para que otras actualizaciones a Dreamweaver no afecten a los flujos de trabajo de la compilación. Los archivos del framework Bourbon se copian en el sitio. Bourbon es el marco que se utiliza cuando se activa la compilación para cualquiera de los archivos que importan el marco.

Instalar archivos Bourbon, Bourbon Neat o Bourbon Bitters

Para instalar Bourbon o cualquiera de sus variantes:

Compilar los archivos de preprocesadores de CSS

Puedes compilar archivos de preprocesador CSS de una de las siguientes maneras:

• Configurar la compilación automática de los archivos de preprocesadores de CSS.
• Compilar manualmente un archivo de preprocesador CSS

Configurar la compilación automática de los archivos de preprocesadores de CSS.

Se pueden configurar opciones en Dreamweaver para compilar automáticamente los cambios realizados en un archivo Sass o LESS en su CSS equivalente. También puedes especificar las ubicaciones (dentro de la raíz del sitio) donde quieres guardar el CSS generado.

Después de una compilación exitosa, se muestra un mensaje en el panel Salida (Ventana > Resultados > Salida).El icono de estado en la barra de estado se muestra en verde.Para abrir el CSS compilado, hacer doble clic en el mensaje de éxito del panel.

Si se encontrara algún error, eso conllevaría que el CSS no se hubiera compilado correctamente. El icono de estado se mostrará en rojo, y el panel Salida enumerará todos los errores y advertencias. Puede hacer doble clic en los mensajes de error del panel para ir directamente a las líneas de código que contengan errores. El archivo CSS no se compila correctamente hasta que se resuelven todos los errores.

Tras obtener el archivo CSS compilado, puede vincular su página web con la hoja de estilos. Si realiza cambios en los preprocesadores de CSS, los archivos CSS compilados correspondientes se actualizarán de forma automática. La página web también se actualiza automáticamente en Vista en Vivo.

Para obtener más información sobre cómo vincular su página web a la hoja de estilos, consulte Vincular a una hoja de estilos CSS externa.

Compilar manualmente un archivo de preprocesadores de CSS

En algunas situaciones (como si no ha definido un sitio de Dreamweaver), es posible que desee compilar manualmente un archivo de preprocesador CSS.

En estos casos, desactive Activar compilación automática al guardar archivo en el panel Preprocesadores CSS > General del cuadro de diálogo Configuración del sitio.

Para compilar manualmente un preprocesador CSS, haga clic con el botón derecho en el archivo en el panel Archivos y haga clic en Compilar.

También puede hacer clic en Herramientas > Compilar para compilar el archivo actual.