Guía del usuario Cancelar

Uso de preprocesadores de CSS en Dreamweaver

  1. Guía del usuario de Dreamweaver
  2. Introducción
    1. Conceptos básicos sobre diseño web adaptable
    2. Novedades de Dreamweaver
    3. Desarrollo web con Dreamweaver: información general
    4. Dreamweaver / Preguntas frecuentes
    5. Métodos abreviados de teclado
    6. Requisitos del sistema para Dreamweaver
    7. Resumen de funciones
  3. Dreamweaver y Creative Cloud
    1. Sincronizar la configuración de Dreamweaver con Creative Cloud
    2. Bibliotecas Creative Cloud en Dreamweaver
    3. Uso de archivos de Photoshop en Dreamweaver
    4. Trabajar con Adobe Animate y Dreamweaver
    5. Extraer archivos SVG optimizados para la Web desde bibliotecas
  4. Espacios de trabajo y vistas de Dreamweaver
    1. El espacio de trabajo de Dreamweaver
    2. Optimización del espacio de trabajo de Dreamweaver para la implementación visual
    3. Buscar archivos por nombre de archivo o contenido | Mac OS
  5. Configuración de sitios
    1. Acerca de los sitios de Dreamweaver
    2. Configuración de una versión local del sitio
    3. Conectar con servidores de publicación
    4. Configuración de un servidor de prueba
    5. Importación y exportación de la configuración de un sitio de Dreamweaver
    6. Traer sitios web existentes desde un servidor remoto a la raíz del sitio local
    7. Funciones de accesibilidad en Dreamweaver
    8. Ajustes avanzados
    9. Configuración de las preferencias de sitio para transferir archivos
    10. Especificación de la configuración del servidor proxy en Dreamweaver
    11. Sincronizar la configuración de Dreamweaver con Creative Cloud
    12. Uso de Git en Dreamweaver
  6. Administrar archivos
    1. Creación y apertura de documentos
    2. Administración de archivos y carpetas
    3. Carga de archivos al servidor y descarga desde el mismo
    4. Desprotección y protección de archivos
    5. Sincronizar archivos
    6. Comparación de archivos para detectar diferencias
    7. Ocultación de archivos y carpetas en el sitio de Dreamweaver
    8. Activación de Design Notes para sitios de Dreamweaver
    9. Prevención de la posible actuación repentina de Gatekeeper
  7. Maquetación y diseño
    1. Usar ayudas visuales al diseñar
    2. Información sobre el uso de CSS para diseñar la página
    3. Diseño de sitios web interactivos con Bootstrap
    4. Creación y uso de consultas de medios en Dreamweaver
    5. Presentación de contenido en tablas
    6. Colores
    7. Diseño interactivo mediante diseños de cuadrícula fluida
    8. Extract en Dreamweaver
  8. CSS
    1. Aspectos básicos de las hojas de estilos en cascada
    2. Diseño de páginas con el Diseñador de CSS
    3. Uso de preprocesadores de CSS en Dreamweaver
    4. Configuración de las preferencias de estilos CSS en Dreamweaver
    5. Mover reglas CSS en Dreamweaver
    6. Conversión de CSS en línea en una regla CSS en Dreamweaver
    7. Uso de etiquetas div
    8. Aplicación de degradados al fondo
    9. Creación y edición de efectos de transición de CSS3 en Dreamweaver
    10. Formatear código
  9. Contenido de página y activos
    1. Definición de las propiedades de la página
    2. Configuración de propiedades de encabezado CSS y propiedades de vínculo CSS
    3. Uso de texto
    4. Buscar y reemplazar texto, etiquetas y atributos
    5. Panel DOM
    6. Editar en la Vista en vivo
    7. Codificación de documentos en Dreamweaver
    8. Selección y visualización de elementos de la ventana de documento
    9. Configuración de las propiedades de texto en el inspector de propiedades
    10. Revisión ortográfica de una página web
    11. Uso de las reglas horizontales en Dreamweaver
    12. Añadir y modificar combinaciones de fuentes en Dreamweaver.
    13. Trabajo con activos
    14. Inserción y actualización de fechas en Dreamweaver
    15. Creación y gestión de activos favoritos en Dreamweaver
    16. Insertar y editar imágenes en Dreamweaver
    17. Adición de objetos multimedia
    18. Adición de vídeos en Dreamweaver
    19. Insertar vídeo HTML5
    20. Insertar archivos SWF
    21. Adición de efectos de sonido
    22. Insertar audio HTML5 en Dreamweaver
    23. Trabajar con elementos de bibliotecas
    24. Uso de texto árabe y hebreo en Dreamweaver
  10. Establecimiento de vínculos y navegación
    1. Acerca del establecimiento de vínculos y la navegación
    2. Vinculación
    3. Mapas de imágenes
    4. Vínculos de solución de problemas
  11. Widgets y efectos de jQuery
    1. Uso de interfaz de usuario y widgets móviles de jQuery en Dreamweaver
    2. Uso de efectos jQuery en Dreamweaver
  12. Programación de sitios web
    1. Acerca de la programación en Dreamweaver
    2. Entorno de programación en Dreamweaver
    3. Configuración de las preferencias de programación
    4. Personalización de los colores del código
    5. Escritura y edición de código
    6. Sugerencias de código y completado de código
    7. Contraer y expandir código
    8. Reutilizar código con fragmentos
    9. Depuración de código mediante linting
    10. Optimización del código
    11. Edición de código en Vista de diseño
    12. Trabajo con el contenido de Head para páginas
    13. Inserción del lado del servidor incluida en Dreamweaver
    14. Uso de bibliotecas de etiquetas en Dreamweaver
    15. Importación de etiquetas personalizadas a Dreamweaver
    16. Uso de comportamientos de JavaScript (instrucciones generales)
    17. Aplicación de comportamientos JavaScript incorporados
    18. Acerca de XML y XSLT
    19. Realización de transformaciones XSL del lado del servidor en Dreamweaver
    20. Realización de transformaciones XSL en el lado del cliente en Dreamweaver
    21. Adición de entidades de caracteres para XSLT en Dreamweaver
    22. Formatear código
  13. Flujos de trabajo de varios productos
    1. Instalación y uso de extensiones para Dreamweaver
    2. Actualizaciones integradas en Dreamweaver
    3. Insertar documentos de Microsoft Office en Dreamweaver (solo Windows)
    4. Trabajo con Fireworks y Dreamweaver
    5. Edición de contenido en sitios de Dreamweaver con Contribute
    6. Integración de Dreamweaver Business Catalyst
    7. Crear campañas de correo electrónico personalizado
  14. Plantillas
    1. Acerca de las plantillas de Dreamweaver
    2. Reconocimiento de plantillas y documentos basados en plantillas
    3. Crear una plantilla de Dreamweaver
    4. Crear regiones editables en plantillas
    5. Creación de tablas y regiones repetidas en Dreamweaver
    6. Usar regiones opcionales en plantillas
    7. Definición de atributos de etiqueta editables en Dreamweaver
    8. Creación de plantillas anidadas en Dreamweaver
    9. Edición, actualización y eliminación de plantillas
    10. Exportar e importar contenido xml en Dreamweaver
    11. Aplicación o eliminación de una plantilla de un documento existente
    12. Edición de contenido en plantillas de Dreamweaver
    13. Reglas de sintaxis de etiquetas de plantilla en Dreamweaver
    14. Configuración de preferencias de resaltado en regiones de plantillas
    15. Ventajas de usar plantillas en Dreamweaver
  15. Móvil y multipantalla
    1. Creación de consultas de medios
    2. Cambio de la orientación de página para dispositivos móviles
    3. Creación de aplicaciones web para dispositivos móviles con Dreamweaver
  16. Sitios, páginas y formularios web dinámicos
    1. Aspectos básicos de las aplicaciones web
    2. Configuración del ordenador para desarrollo de aplicaciones
    3. Solución de problemas de conexiones a bases de datos
    4. Eliminación de secuencias de comandos de conexión en Dreamweaver
    5. Diseñar páginas dinámicas
    6. Introducción a las fuentes de contenido dinámico
    7. Definir fuentes de contenido dinámico
    8. Añadir contenido dinámico a las páginas
    9. Cambio de contenido dinámico en Dreamweaver
    10. Visualización de registros de bases de datos
    11. Proporcionar datos en vivo y solucionar sus problemas en Dreamweaver
    12. Añadir comportamientos de servidor personalizados en Dreamweaver
    13. Crear formularios con Dreamweaver
    14. Uso de formularios para recopilar información de los usuarios
    15. Crear y activar formularios de ColdFusion en Dreamweaver
    16. Crear formularios web
    17. Compatibilidad mejorada con HTML5 para elementos de formulario
    18. Desarrollar un formulario con Dreamweaver
  17. Creación visual de aplicaciones
    1. Creación de las páginas maestra y de detalles en Dreamweaver
    2. Crear páginas de búsqueda y resultados
    3. Crear una página de inserción de registros
    4. Crear una página de actualización de registros en Dreamweaver
    5. Creación de páginas de eliminación de registros en Dreamweaver
    6. Usar comandos ASP para modificar una base de datos en Dreamweaver
    7. Crear una página de registro
    8. Crear una página de inicio de sesión
    9. Creación de una página para acceso exclusivo de usuarios autorizados
    10. Protección de carpetas en ColdFusion con Dreamweaver
    11. Uso de componentes de ColdFusion en Dreamweaver
  18. Prueba, vista previa y publicación de sitios web
    1. Vista previa de páginas
    2. Vista previa de páginas web de Dreamweaver en varios dispositivos
    3. Comprobación del sitio de Dreamweaver

 

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:

  1. Descargar e instalar un compilador.
  2. Configurar un incómodo trabajo (Gruntfile.js) para que el compilador leyera el archivo Sass/LESS/SCSS.
  3. 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:

  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 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. Para obtener más información, consulte 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. 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
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
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
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.

  1. 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
    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
    Archivos de Compass instalados

  2. 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
    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 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.

  4. 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.
  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. 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:

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

    Archivos de Bourbon instalados
    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.

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.

  1. 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
    Activación de la compilación automática

  2. Haga clic en Preprocesadores de CSS > Origen y salida de CSS.

  3. 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.

  4. 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
    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
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.

Logotipo de Adobe

Inicia sesión en tu cuenta