Dreamweaver CC 2017 compatible con preprocesadores de CSS

En esta imagen usamos el archivo style000001.scss  estamos importando con el comando &import  los archivos  scss anteponiendo  el caracter "_"  , al anteponer el caracter "_" estamos diciendole que NO compile dichos archivos  que solo compile el archivo style000001.scss  generando un solo archivo  style000001.css que contendra todo el contenido de los archivos que hemos importado.

Nota: si no ponemos el caracter "_"   generara el css de dicho archivo importado ademas del archivo padre. ejemplo:

Desde el archivo style000001.scss   importamos los siguientes archivos:

• $import  "_variables.scss"   
• $import  "pieabajo.scss"   
• $import  "_garantia.scss"   

Al compilar el archivo style000001.scss  nos generara  2 archivos separados,  style000001.css  y  pieabajo.css   porque pieabajo.scss  no tiene el caracter "_"

¿Qué es un Preprocesador de CSS?

Un preprocesador no reemplaza a los clasicos CSS mas bien es un  complemento para darles mas dinamismo , Un preprocesador implementa a nuestros CSS clásicos de características que debería de tener por sí mismo: variables, mixins, bucles, includes… convertiendolo casi en un lenguaje de programación que genera CSS.

Un preprocesador procesa código que no es CSS válido y lo transforma en CSS que entienden los navegadores. 

El objetivo de estos preprocesadores es tener un código más sencillo de mantener y editar.

Actualmente existen muchos preprocesadores, aunque las características principales son comunes en casi todos. Los más populares son:

• Less    (extensión .less)
• Sass    (extensión  .sass y .scss  en su nueva versión)
• Stylus  (extensión .styl )

Dreamweaver CC 2017 compatible con Preprocesadores de CSS

Dreamweaver puede compilar  ahora preprocesadores de CSS habituales, como SASS,   SCSS y Less,  antes  se usaba programas externos para compilarlos, ahora dentro del mismo entorno de Dreamweaver CC 2017 se puede compilar dichos preprocesadores y generar codigo CSS clásicos.

Configurar las preferencias generales de Preprocesadores de CSS

Para configurarlo ir a Menu Sitio --> Administrar Sitios --> Editar el Sitio que deseamos configurar

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

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 SASS/SCSS

Estilo del archivo de salida  Especifica el estilo del archivo CSS de salida (procesadores de css output file style):

• Anidado (nested):   formatea el CSS compilado en una estructura modular conocida.
• Compacto (compact):   formatea el CSS compilado en una estructura compacta que ocupa menos espacio que el anidado o expandido.
  
  
  
  
• Comprimido (compressed):   procesa el CSS en una estructura plana, comprime  el css quitando los comentarios y espacios en blanco. 
  
  
  
  
• Expandido (expanded): 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 , No quita los comentarios y espacios en blanco.
  
  

Por ejemplo :  un archivo CSS   comprimido con los diferentes estilos de salida:

nested          =  tamaño en disco 107 KB 
compact       =  tamaño en disco   96 KB
compressed  =  tamaño en disco   68 KB
expanded     =  tamaño en disco 100 KB

Para el SEO CSS devemos escoger  la opción compressed que comprime  el css quitando los comentarios y espacios en blanco.

Fuente :

https://helpx.adobe.com/la/dreamweaver/using/css-preprocessors.html