Aprenda a trabajar con los archivos de preprocesadores de CSS y compilarlos en Dreamweaver.

Los preprocesadores de CSS compilan el código escrito en un lenguaje preprocesado en el CSS más parecido. El lenguaje preprocesado eleva el CSS a un nivel superior y más cercano al lenguaje de programación.

En concreto, los preprocesadores permiten que se puedan utilizar variables, agregados, funciones y muchas otras técnicas
que no se pueden usar en CSS. Al usar preprocesadores de CSS, se puede definir todo una sola vez y reutilizar repetidamente esos mismos resultados en un CSS que se puede mantener, extender y tematizar fácilmente.

Dreamweaver es compatible con los preprocesadores de CSS más populares: Sass y Less, y Dreamweaver también admite los frameworks Compass y Bourbon para compilar archivos Sass.

Less se basa en JavaScript y Sass en Ruby, pero no es necesario que conozca estos lenguajes ni que use la línea de comandos para compilar los archivos en CSS. Dreamweaver compila automáticamente estos archivos en CSS mediante la biblioteca de JavaScript less.js al cargarlos, editarlos o guardarlos.

¿Cómo gestiona Dreamweaver los preprocesadores de CSS?

El modo en que Dreamweaver gestiona los preprocesadores de CSS varía en función de si se ha definido un sitio o no. Adobe recomienda definir un sitio porque esto le permite configurar las preferencias del preprocesador de CSS, así como utilizar los frameworks Compass y Bourbon dentro de Dreamweaver. 

Si se define un sitio, se puede personalizar la forma en que funcionan los preprocesadores de CSS dentro de 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 se puede personalizar la ubicación de los archivos Sass y CSS y las opciones de preprocesador específicas para cada sitio.

Al definir un sitio, Dreamweaver también permite utilizar los frameworks Sass (Compass, Bourbon, Bourbon Neat y Bourbon Bitter) en Dreamweaver.

Si no se define un sitio, se puede elegir compilar manualmente los archivos Sass y Less. Sin embargo, no se dispone de 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 implicadas al usar preprocesadores de CSS:

  1. Defina un sitio en Dreamweaver. Asegúrese que el archivo Sass o Less que intenta compilar esté incluido en la carpeta raíz del sitio. Si ya se ha definido un sitio y el archivo Sass/Less está presente en la raíz del sitio, continuar con el paso siguiente. Para obtener más información sobre configurar 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. For more information, see Configuración de preferencias de preprocesadores de CSS específicas del sitio.
  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 framework Compass o Uso del framework Bourbon.
  4. Configurar la compilación automática de los archivos Sass y Less o compilarlos manualmente. Para obtener más información, consulte Compilar archivos de preprocesadores de CSS.

Configuración de preferencias de los preprocesadores de CSS

Las preferencias para los preprocesadores de CSS específicas del sitio se pueden configurar con el cuadro de diálogo Sitios > Administrar sitios.

Conservar las preferencias de preprocesador de CSS específicas del sitio permite administrar los preprocesadores de CSS según el sitio, lo que proporciona el control sobre cada preprocesador de CSS del sitio sin tener que actualizar las preferencias cada vez que se cambia de sitio.

Configurar las preferencias generales de preprocesadores de CSS

Se puede establecer la configuración general del preprocesador de CSS en el cuadro de diálogo Sitios > Preprocesadores de CSS.

Configuración general de preprocesadores de CSS
Configuración general de preprocesadores de CSS

Activar la compilación automática al guardar archivos

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, tendrá que compilar manualmente los archivos cada vez que realice un cambio.

Opciones Less

Activar matem. estrictas

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 expresiones matemáticas del archivo.

Activar unidades estrictas

Produce una unidad estimada en el archivo CSS tras la expresión matemática. Por ejemplo, 5px * 2px se compila como 10px y no como 10px2. 

Cuando esta opción está desactivada, Less intenta suponer cuál es la unidad de salida cuando procesa las expresiones matemáticas.

En este ejemplo, el CSS se genera como se indica a continuación:

.class {
  property: 1px * 2px;
}

En este caso, la suposición no es correcta: una longitud multiplicada por una longitud ofrece un área, pero CSS no permite especificar áreas. Aquí, se supone que el usuario quería decir que uno de los valores era un valor, no una unidad de longitud y Dreamweaver produce 10px.

Si las unidades estrictas están activadas, el CSS generado se considera un error.

Reescribir direcciones URL como URL relativas

Reescribe las direcciones URL en los archivos importados de modo que la URL siempre sea relativa al archivo base importado. Esto implica que, si un archivo Less importa otro archivo Less, que a su vez hace referencia a una imagen, la dirección URL relativa se mostrará en el archivo CSS compilado.

Generar mapa de origen

Crea un mapa de origen (el archivo que rellena el espacio entre los lenguajes de alto nivel como Sass y Less y el lenguaje de bajo nivel al que compilan, por ejemplo CSS).

Opciones Sass/SCSS

Estilo del archivo de salida

Especifica el estilo del archivo CSS de salida:

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

Crear comentarios de origen

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

Generar mapa de origen

Crea un mapa de origen (el archivo que rellena el espacio entre los lenguajes de alto nivel como Sass y Less y el lenguaje de bajo nivel al que compilan, por ejemplo CSS). 

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

Se puede definir dónde se deben colocar los archivos CSS generados y la ruta en la que Dreamweaver debería ver y activar la compilación automática cuando se modifica un archivo de Sass/Less de la ruta con un editor externo.

Configuración de los preprocesadores de CSS de origen y salida
Configuración de los preprocesadores de CSS de origen y salida

Se pueden establecer las siguientes configuraciones de los preprocesadores de CSS de origen y salida en el cuadro de diálogo Sitios > Administrar sitios.

Salida de CSS

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

En la misma carpeta que el origen

Seleccione esta opción si desea que los archivos CSS generados se guarden en la misma carpeta que los archivos Sass y Less de origen.

Defina la carpeta de salida

Seleccione esta opción y especifique la carpeta donde quiere guardar los archivos CSS generados.

Reemplace el segmento de la ruta de entrada

Esta opción permite reemplazar una parte de la ruta con las cadenas From y To.

Por ejemplo, al establecer From:scss y To:css, el archivo de salida se coloca dentro de la misma estructura de árbol después de reemplazar SCSS en la ruta css.

Carpeta de origen

Especifique la subcarpeta en la raíz del sitio que es necesario vigilar. Normalmente, esta subcarpeta contiene todos los archivos SCSS o LESS.

Si ha activado la compilación en Configuración general, Dreamweaver activará automáticamente el preprocesador de CSS cuando se modifique un archivo de esta carpeta, ya sea de forma externa o dentro de Dreamweaver.

Uso del framework Compass

Compass es un framework de creación de CSS de código abierto que permite crear hojas de estilos de CSS3 con Sass.

Dreamweaver ofrece compatibilidad con Compass. Así, si se crean hojas de estilo con Compass, desde Dreamweaver se pueden compilar esas hojas de estilo y generar los archivos CSS.

  1. Instalar archivos de Compass.

    Si aun no tiene instalado Compass, puede instalarlo desde Dreamweaver.

    En el cuadro de diálogo Configuración del sitio, seleccione Preprocesadores de CSS > Compass. Seleccione Utilizar Compass y después haga clic en Instalar archivos.

    Instalación de archivos de Compass
    Instalación de archivos de Compass

    Todos los archivos de Compass y el archivo de configuración de *.rb se instalan en la carpeta del sitio y se pueden ver en el panel Archivos.

    Archivos de Compass instalados
    Archivos de Compass instalados

  2. Especificar un archivo de configuración existente basado en Ruby

    Si ya dispone de Compass en los equipos y tiene la configuración del archivo *.rb de Compass, en el cuadro de diálogo Configuración del sitio de Dreamweaver, especifique la ruta al archivo *.rb de Compass en la raíz del sitio actual.

    1. En el cuadro de diálogo Configuración del sitio, seleccione Preprocesadores de CSS > Compass.
    2. Seleccione la casilla de verificación Usar Compass.
    3. Haga clic en Especificar archivo de configuración basado en Ruby y examine hasta llegar a la ubicación del archivo. Haga clic en Guardar cuando haya terminado.
    Especificar un archivo de configuración existente basado en Ruby
    Especificar un archivo de configuración existente basado en Ruby

    Nota:

    Este archivo debe estar ubicado en la carpeta raíz del sitio.

  3. Especifique las opciones de configuración manualmente

    Si no dispone ya de una opción de configuración, puede especificarlas manualmente.

    1. En el cuadro de diálogo Configuración del sitio, seleccione Preprocesadores de CSS > Compass.
    2. Seleccione la casilla de verificación Usar Compass.
    3. Haga clic en Especificar las opciones de configuración manualmente. Especifique las siguientes opciones de configuración y haga clic en Guardar.

    Los siguientes campos se rellenan automáticamente, pero puede cambiarlos según sus necesidades:

    Nota:

    Todas las rutas seleccionadas en estas opciones deben estar en la raíz del sitio.

    Ruta HTTP

    La ruta al proyecto cuando se ejecuta en el servidor web. El valor predeterminado es "/".

    Directorio de imágenes

    El directorio en el que se conservan las imágenes. Es relativo al project_path.

    Directorio de imágenes generadas

    El directorio en el que se generan las imágenes. Es relativo al project_path. El valor predeterminado es el valor de images_dir.

    Directorio de fuentes

    El directorio en el que se conservan los archivos fuente.

    Activos relativos

    Indica si las funciones de ayuda de Compass deben generar URL relativas desde el CSS generado a los activos o URL absolutas que usan la ruta http para ese tipo de activos.

  4. Si ha seleccionado Permitir compilación automática al guardar el archivo, en el cuadro de diálogo Sitios > Administrar sitios > Preprocesadores de CSS, en ese caso Dreamweaver generará un archivo CSS cada vez que guarde los cambios de los archivos Sass. También puede ver previamente estos cambios en tiempo real en la ventana del navegador. Para obtener más información sobre cómo obtener una vista previa de los cambios en tiempo real en el navegador, consulte Vista previa en tiempo real.

    Si no desea la compilación automática, puede compilar manualmente un archivo CSS siguiendo uno de estos procedimientos:

    • Haga clic con el botón derecho del ratón en el archivo Sass, Less o SCSS en el panel de archivos y haga clic en compilar.
    • Haga clic en Herramientas > Compilar para compilar el archivo actual.
  5. A continuación, puede adjuntar el archivo CSS compilado a los archivos HTML del sitio. Para obtener más información, consulte Vincular a una hoja de estilos CSS externa.

Uso del framework Bourbon

Dreamweaver es compatible con la familia de productos Bourbon. Así, si se crean hojas de estilo con Bourbon, desde Dreamweaver se pueden compilar esas hojas de estilo y generar los archivos CSS.

Se admiten los siguientes tipos de Bourbon:

  • Bourbon: una biblioteca de mixins para Sass ligera y fácil de usar
  • Bourbon Neat: un framework de cuadrícula semántica ligero para Sass y Bourbon
  • Bourbon Bitters: variables, estructura y estilos Scaffold para proyectos Bourbon

Se puede importar el framework Bourbon añadiendo uno de los siguientes en el código:

  • @import “bourbon”: para importar Bourbon
  • @import “neat”: para importar Bourbon Neat
  • @import “base”: para importar Bourbon Bitter

Posteriormente, Dreamweaver utiliza la versión de paquetes creados previamente de Bourbon a la vez que compila los archivos de los preprocesadores.

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 y este es el framework que se utiliza cuando se activa la compilación para cualquiera de los archivos que importen el framework.

Instalar archivos Bourbon, Bourbon Neat o Bourbon Bitters

Para instalar Bourbon o cualquiera de sus versiones:

  1. En el cuadro de diálogo Configuración del sitio, seleccione Preprocesadores de CSS > Bourbon, Bourbon Neat o Bourbon Bitters.

  2. Haga clic en Instalar archivos para instalar los archivos en la ubicación de la carpeta raíz del sitio especificada dentro del sitio.

    Instalación de archivos de Bourbon
    Instalación de archivos de Bourbon

    Todos los archivos de Bourbon se instalan en la carpeta del sitio y se pueden ver en el panel Archivos.

    Archivos de Bourbon instalados
    Archivos de Bourbon instalados

    Si se produce un error, los errores se muestran en el panel Salida (Ventana > Resultados > Salida) y el icono de la barra de estado cambia a rojo.

Compilar los archivos de preprocesadores de CSS

Se pueden compilar los archivos de preprocesadores de CSS de una de las siguientes formas:

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

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

  1. En el cuadro de diálogo Configuración del sitio, seleccione Preprocesadores de CSS > General > Activar compilación automáticamente al guardar el archivo.

    Activación de la compilación automática
    Activación de la compilación automática

  2. En el cuadro de diálogo Configuración del sitio, seleccione Preprocesadores de CSS > Origen y salida.

  3. En el cuadro de diálogo Origen y salida, especifique la ubicación en la que desea guardar los archivos CSS generados. Se puede seleccionar una de las siguientes opciones:

    En la misma carpeta que el origen

    Seleccione esta opción si desea que los archivos CSS generados se guarden en la misma carpeta que los archivos Sass y Less de origen.

    Defina la carpeta de salida

    Seleccione esta opción y especifique la carpeta donde quiere guardar los archivos CSS generados.

    Reemplace el segmento de la ruta de entrada

    Esta opción permite reemplazar una parte de la ruta con las cadenas From y To.

  4. Especifique la carpeta que contiene los archivos Sass o Less que Dreamweaver tiene que "vigilar".

    Si se realizan cambios en alguno de los archivos de esta carpeta vigilada, Dreamweaver los compila automáticamente después de que se guarden.

    Configuración de los preprocesadores de CSS de origen y salida
    Configuración de los preprocesadores de CSS de origen y salida

    Nota:

    Dreamweaver vigila y compila estos archivos incluso si se realizan cambios fuera de Dreamweaver (con un editor de texto, por ejemplo).

Tras realizar una compilación correcta, se mostrará un mensaje en el panel de salida (Ventana > Resultados > Salida) y el icono de estado se mostrará en color verde en la barra de estado <icon>. Para abrir el archivo CSS compilado, se puede hacer doble clic en el mensaje de éxito del panel.

Si se encontrara algún error, el CSS no se compilaría correctamente. El icono de estado se mostrará en rojo <icon> y el Panel de salida presentará una lista con 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 compilará correctamente hasta que todos los errores se hayan resuelto.

Nota:

El panel de salida normalmente está acoplado en la parte inferior del espacio de trabajo. Si el panel estuviera cerrado, puede abrirlo en Ventana > Panel de salida.

También puede elegir entre mostrar u ocultar el panel de salida mediante el icono de estado, siempre y cuando esté en rojo.

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. Además, la página web también se actualizará automáticamente en la Vista en vivo.

Para obtener más información sobre cómo vincular su página web con la hoja de estilos, consulte Establecimiento de un vínculo a una hoja de estilos CSS externa.

Compilar manualmente un archivo de preprocesadores de CSS

En algunos casos (por ejemplo, si no se ha definido un sitio de Dreamweaver), es posible que se desee compilar manualmente un archivo de preprocesadores de CSS.

En tales casos, desactive Activar la compilación automática al guardar el archivo en Preprocesadores de CSS > Panel general en el cuadro de diálogo Configuración del sitio.

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

Compilación manual de archivos de preprocesadores de CSS a través del panel Archivos
Compilación manual de archivos de preprocesadores de CSS a través del panel Archivos

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

Esta obra está autorizada con arreglo a la licencia de Reconocimiento-NoComercial-CompartirIgual 3.0 Unported de Creative Commons.  Los términos de Creative Commons no cubren las publicaciones en Twitter™ y Facebook.

Avisos legales   |   Política de privacidad en línea