Guía del usuario Cancelar

Uso de preprocesadores de CSS en Dreamweaver

Buscar

Última actualización el 26 dic. 2022

Aprenda a trabajar con los archivos de preprocesadores de CSS y compilarlos 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 el CSS a un nivel más cercano a un lenguaje de programación.

En concreto, los preprocesadores permiten 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 reutilizarlo repetidamente, lo que da por resultado un CSS que se puede mantener y ampliar.

Por medio de los preprocesadores de CSS, también puede producirse un CSS más limpio y fácil de mantener. Si va a crear sitios web que hacen referencia a varios archivos CSS, el uso de preprocesadores de CSS, como Sass o Compass, puede reducir las acciones manuales de programación y copiar/pegar.

Dreamweaver utiliza un compilador Ruby-Saas integrado para compilar los archivos SCSS y LESS. Dreamweaver también admite frameworks 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 mediante la biblioteca de JavaScript less.js al cargarlos, editarlos o guardarlos.

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 se define un sitio, pueden configurarse las preferencias de los preprocesadores de CSS y también utilizarse los frameworks 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 se puede personalizar la ubicación de los archivos Sass y CSS y las opciones de preprocesador específicas para cada sitio.

Siga leyendo para saber cómo usar Dreamweaver con los 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 con los que este CSS compilado esté vinculado o adjunto.

Este es un flujo de trabajo de alto nivel de las tareas implicadas 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 de preprocesadores 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 determinados mixins o funciones del framework de creación se eliminan en revisiones posteriores, podrá seguir accediendo a todos los archivos de preprocesadores en su sitio.

Asegúrese de que esté habilitada la compilación automática. A continuación, presione Guardar para actualizar los archivos CSS.
(Opcional) Pueden verse los cambios reflejados en Vista en vivo o en Vista previa en tiempo real en todas las páginas HTML donde se utiliza 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, debía compilar estos archivos por sí mismo fuera de la aplicación Dreamweaver.
Su flujo de trabajo se parecería a los siguientes pasos:

Descargar e instalar un compilador.
Configurar un incómodo trabajo (Gruntfile.js) para que el compilador leyera el archivo Sass/LESS/SCSS.
Realizar otro incómodo trabajo para compilar el archivo en CSS, que luego traería a Dreamweaver.

Debe seguir estos pasos cada vez que realice un cambio en su archivo de Sass/LESS/SCSS.

Nota:

Consulte este tutorial en vídeo para aprender a mejorar su CSS usando preprocesadores.

Si no tiene definido un sitio, 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:

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 configurar un sitio de Dreamweaver, consulte Acerca de los sitios de Dreamweaver.
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 de preprocesadores de CSS específicas del sitio.
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.
Configure la compilación automática o compile manualmente los archivos Sass y LESS. Para obtener más información, consulte Compilar archivos de preprocesadores de CSS.

Configuración de preferencias de los preprocesadores de CSS

Puede establecer las preferencias de los preprocesadores de CSS usando el cuadro de diálogo Sitios > 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 permite controlar el preprocesador de CSS para cada sitio, sin tener que actualizar las preferencias cada vez que cambie de sitio.

Nota:

Los ajustes de las subsecciones General y Fuente y salida son aplicables de forma predeterminada al framework Ruby-Saas.

Para establecer las preferencias de Compass, debe seleccionar la casilla Usar Compass de la sección Compass.

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 al framework Saas.

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áticas 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

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. Por consiguiente, Dreamweaver dará por supuesto que el usuario pretendía que uno de los valores fuera simplemente un número y no unidades de longitud.

Con las unidades estrictas activadas, Dreamweaver considera que se trata de un error de cálculo y emite un error.

Reescribir las direcciones URL como relativas:

Esta opción le posibilita reescribir las direcciones URL en el archivo CSS que se genera, de modo que las direcciones URL son siempre relativas con respecto al archivo generado.

Generar mapa de origen:

Crea un mapa de origen. El mapa de origen es un 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 (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 buscar y activar la compilación automática cuando se modifica un archivo de Sass/LESS de la ruta con un editor externo.

Nota:

De forma predeterminada, las opciones de la sección Origen y salida son aplicables para Saas. Para habilitar estas opciones para Compass, debe seleccionar la casilla Usar Compass de la sección Compass.

Después de modificar esta configuración e instalar Compass, toda la configuración se migra a config.rb. Posteriormente, si desea modificar algún ajuste, edite directamente la configuración en el archivo config.rb. Asimismo, los cambios realizados en el cuadro de diálogo Configuración del sitio no afectan a la compilación.

Establecer la configuración de Origen y salida para Compass

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

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

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.

Definir la carpeta de salida:

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

Reemplazar 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 que deberá prestarse atención a la raíz del sitio. normalmente, esta subcarpeta contiene todos los 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 de la carpeta se modifica externamente 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. Si se crean hojas de estilo con Compass, pueden compilarse esas hojas de estilo y generar los archivos CSS desde Dreamweaver.

Utilizar 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 Usar Compass y luego haga clic en Instalar archivos.

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 pueden verse en el panel Archivos.

Archivos de Compass instalados
Especificar un archivo de configuración existente basado en Ruby

Si ya dispone de Compass instalado en el ordenador 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 CSS Preprocesadores > Compass.
2. Seleccione la casilla Usar Compass.
3. Haga clic en Especificar archivo de configuración basado en Ruby y examine hasta llegar a la ubicación del archivo.
4. Haga clic en Guardar cuando haya terminado.
Especificar un archivo de configuración existente basado en Ruby

Nota:

este archivo debe estar ubicado en la carpeta raíz del sitio.
Especifique las opciones de configuración manualmente

Si no dispone de una opción de configuración existente, puede especificar manualmente las configuraciones.
1. En el cuadro de diálogo Configuración del sitio, seleccione CSS Preprocesadores > Compass.
2. Seleccione la casilla 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. El directorio es relativo a project_path.

Directorio de imágenes generadas:

El directorio en el que se generan las imágenes. Este directorio es relativo a project_path y su valor predeterminado es 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.
Si ha seleccionado Activar compilación automática al guardar los archivos, en el cuadro de diálogo Sitios > Administrar sitios > Preprocesadores de CSS, 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 los archivos 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 Archivos y haga clic en Compilar.
- Haga clic en Herramientas > Compilar para compilar el archivo actual.
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. 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. Bourbon es el framework que se utiliza cuando la compilación se activa para alguno de los archivos que se importan al framework.

Instalar archivos Bourbon, Bourbon Neat o Bourbon Bitters

Para instalar Bourbon o cualquiera de sus versiones:

En el cuadro de diálogo Configuración del sitio, seleccione Preprocesadores de CSS > Bourbon, Bourbon Neat o Bourbon Bitters.
Haga clic en Instalar archivos para instalar los archivos en la ubicación de la carpeta raíz del sitio especificada de dentro del sitio.

Instalación de archivos de Bourbon

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

Archivos de Bourbon instalados

Si se produce algún problema, los errores se muestran en el panel Salida (Ventana > Resultados > Salida) y el icono de la barra de estado cambiará a color 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.
Compilar manualmente un archivo de preprocesadores de 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 se pueden especificar las ubicaciones (dentro de la raíz del sitio) donde se quiera guardar el CSS generado.

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

Activación de la compilación automática
Haga clic en Preprocesadores de CSS > Origen y salida de CSS.
Especifique las ubicaciones en las 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.

Definir la carpeta de salida:

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

Reemplazar segmento de la ruta de entrada

Esta opción permite reemplazar una parte de la ruta con las cadenas From y To.
Especifique la carpeta que contenga los archivos Sass o LESS que Dreamweaver tiene bajo seguimiento.

Si se realizan cambios en alguno de los archivos de la carpeta bajo seguimiento, Dreamweaver los compilará automáticamente después de guardarlos.

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 Salida (Ventana > Resultados > Salida). El icono de estado se mostrará en color verde en la barra de estado. Para abrir el archivo CSS compilado, haga 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 compilará correctamente hasta que todos los errores se hayan resuelto.

Nota:

El panel Salida está acoplado en la parte inferior del espacio de trabajo. Si el panel estuviera cerrado, haga clic en el panel Ventana > Salida.

También puede elegir entre mostrar u ocultar el panel Salida usando el icono de estado, cuando el estado esté en color 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), podría desearse compilar manualmente un archivo de preprocesadores de CSS.

En tales casos, desactive Activar la compilación automática al guardar el archivo en el panel Preprocesadores de CSS > General del 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, en el panel Archivos y haga clic en Compilar.

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.

Obtén ayuda de forma más rápida y sencilla

¿Nuevo usuario?

Uso de preprocesadores de CSS en Dreamweaver

¿Cómo trata Dreamweaver los preprocesadores de CSS?

Dreamweaver 2017 y los preprocesadores de CSS

Dreamweaver 2015 y los preprocesadores de CSS

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

Configuración de preferencias de los preprocesadores de CSS

Configurar las preferencias generales de preprocesadores de CSS

Opciones LESS

Opciones Sass/SCSS

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

Salida de CSS

Uso del framework Compass

Uso del framework Bourbon

Instalar archivos Bourbon, Bourbon Neat o Bourbon Bitters

Compilar los archivos de preprocesadores de CSS

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

Compilar manualmente un archivo de preprocesadores de CSS

Obtén ayuda de forma más rápida y sencilla

Pregunte a la comunidad

Contacto