Usar archivos de Compass.
Si aún no tienes Compass instalado, puedes instalarlo desde Dreamweaver.
Última actualización el
25 sept. 2023
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 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:
- Descargar e instalar un compilador.
- Configurar una tarea de grunt (Gruntfile.js) para que el compilador lea su archivo Sass/LESS/SCSS.
- 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.
Nota
Vea este tutorial en vídeo para aprender cómo puede mejorar su CSS usando preprocesadores.
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:
- 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.
- 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.
- 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.
- 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.
Nota
La Configuración en las subsecciones General y fuente y salida son aplicables para el marco Ruby-Saas por defecto.
Para establecer las preferencias para Compass, debe seleccionar la casilla de verificación Usar Compass en 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 para el marco SaaS.
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, tienes que compilar manualmente los archivos cada vez que hagas 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 operaciones 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. 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.
Reescribir las direcciones URL como relativas:
Esta opción te permite reescribir URLs en el archivo CSS que se genera para que las URLs sean siempre relativas al archivo generado.
Generar mapa de origen:
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
Estilo del archivo de salida
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.
Crear comentarios de origen:
Crea comentarios en el archivo CSS de salida que asigna el código CSS a la línea desde la cual fue generado.
Generar mapa de origen:
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.
Nota
De forma predeterminada, las opciones de la sección Origen y salida son aplicables para Saas. Para habilitar estas opciones para Compass, debes seleccionar la casilla Use Compass en 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. Además, los cambios realizados en el cuadro de diálogo Configuración del sitio no afectan la compilación.
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.
En la misma carpeta que el origen
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.
Definir la carpeta de salida:
Seleccionar esta opción y especificar una carpeta donde 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 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.
Carpeta de origen:
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.
En el cuadro de diálogo Configuración del sitio, seleccione Preprocesadores de CSS > Compass. Selecciona Use Compass y luego haz clic en Install Files.
Todos los archivos Compass y el archivo config *.rb se instalan dentro de tu carpeta del sitio, y puedes verlos en el panel Files.
Especificar un archivo de configuración existente basado en Ruby
Si ya tienes Compass instalado en tu ordenador, y tienes configurado el archivo Compass *.rb, en el cuadro de diálogo Configuración del sitio de Dreamweaver, especifica la ruta al archivo Compass *.rb dentro de la raíz del sitio actual.
- En el cuadro de diálogo Configuración del sitio, seleccione Preprocesadores CSS > Compass.
- Selecciona la casilla Usar Compass.
- Haz clic en Especificar archivo de configuración basado en Ruby y examina la ubicación del archivo.
- Haz clic en Guardar cuando hayas terminado.
Nota
Este archivo debe estar ubicado en la carpeta raíz de tu sitio.
Especifique las opciones de configuración manualmente
Si no tienes una opción de configuración existente, puedes especificar las configuraciones manualmente.
- En el cuadro de diálogo Configuración del sitio, selecciona Preprocesadores CSS > Compass.
- Selecciona la casilla Usar Compass.
- 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 puedes cambiarlos según tus requisitos:
Nota
Todas las rutas seleccionadas en estas opciones deben estar dentro de 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 al 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 donde se guardan los archivos de fuente.
Activos relativos:
Indica si las funciones auxiliares de compass deben generar URL relativas desde el CSS generado a los recursos, o URL absolutas usando la ruta http para ese tipo de recurso.
Si has seleccionado Habilitar compilación automática al guardar archivo, en el cuadro de diálogo Sitios > Administrar sitios > Preprocesadores CSS, Dreamweaver genera un archivo CSS cada vez que guardas cambios en tus archivos Sass.
También puede ver previamente estos cambios en tiempo real en la ventana del navegador. Para obtener más información sobre la vista previa de tus cambios en tiempo real en el explorador, consulta Vista previa en tiempo real.
Si prefieres desactivar la compilación automática, puedes compilar manualmente un archivo CSS mediante una de las siguientes opciones:
- Haz clic con el botón derecho en el archivo Sass, LESS o SCSS del panel Archivos y haz 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, consulta Vincular a una hoja de estilos CSS externa.
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:
En el cuadro de diálogo Configuración del sitio, seleccione Preprocesadores CSS > Bourbon, Bourbon Neat o Bourbon Bitters.
Haz clic en Instalar archivos para instalar los archivos en la ubicación especificada de la carpeta raíz del sitio dentro de tu sitio.
Todos los archivos de Bourbon se instalan dentro de la carpeta de tu sitio, y puedes verlos en el panel Archivos.
Si hay 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
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.
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.
En el cuadro de diálogo Configuración del sitio, selecciona Preprocesadores CSS > General > Habilitar compilación automática al guardar archivo.
Haz clic en Preprocesadores CSS > Fuente y salida.
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
Selecciona esta opción si quieres que los archivos CSS generados se guarden en la misma carpeta que los archivos fuente Sass y LESS.
Definir la carpeta de salida:
Selecciona esta opción y especifica la carpeta donde quieres 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.
Especifica la carpeta que contiene los archivos Sass o LESS que Dreamweaver rastrea.
Si realizas cambios en cualquiera de los archivos dentro de la carpeta que se rastrea, Dreamweaver compila automáticamente los archivos después de guardarlos.
Nota
Dreamweaver vigila y compila estos archivos incluso si realizas cambios fuera de Dreamweaver (usando un editor de texto, por ejemplo).
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.
Nota
El panel Salida está acoplado en la parte inferior del espacio de trabajo. Si el panel está cerrado, haga clic en Ventana > Output panel.
También puedes alternar el panel Output (mostrar/ocultar) usando el icono de estado, cuando el estado esté 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. 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.
Crear sitios web atractivos en Dreamweaver
Diseña, codifica y gestiona sitios web dinámicos en una potente herramienta todo en uno.
