css - outputstyle - Brújula output_style

sass({ outputstyle compressed

Question

¿Alguien ha encontrado alguna documentación de lo que significan los diferentes valores para output_style en Compass? Las opciones son: expandido,: anidado, compacto y comprimido. Puedo ver cuál es el último, pero ¿qué hacen los demás?

Parece un desperdicio que tengo que recompilar todo mi CSS para descubrir qué producen estas diferentes opciones.

Answer 1

Ah, lo entiendo ahora ..: expandido es el valor predeterminado:

:expandido

#date .day {
  display: block;
  padding-top: 5px;
  font-size: 30px;
  color: #AAA;
}

:anidado

#date .day {
  display: block;
  padding-top: 5px;
  font-size: 30px;
  color: #AAA; }

:compacto

#date .day { display: block; padding-top: 5px; font-size: 30px; color: #AAA; }

:comprimido

#date .day{display:block;padding-top:5px;font-size:30px;color:#AAA}

Answer 2

Los estilos de salida están cubiertos en la documentación de SASS .

Aunque el estilo CSS predeterminado que Sass genera es muy agradable y refleja la estructura del documento, los gustos y las necesidades varían, por lo que Sass admite varios otros estilos.

Sass le permite elegir entre cuatro estilos de salida diferentes configurando la opción de estilo: o usando el indicador de línea de comando --style.

:anidado

El estilo anidado es el estilo Sass predeterminado, porque refleja la estructura de los estilos CSS y el documento HTML que están diseñando. Cada propiedad tiene su propia línea, pero la sangría no es constante. Cada regla está sangrada en función de cuán profundamente está anidada. Por ejemplo:

#main {
  color: #fff;
  background-color: #000; }
  #main p {
    width: 10em; }

.huge {
  font-size: 10em;
  font-weight: bold;
  text-decoration: underline; }

El estilo anidado es muy útil cuando se buscan archivos CSS grandes: te permite captar fácilmente la estructura del archivo sin leer nada.

:expandido

Expandido es un estilo de CSS hecho por humanos más típico, con cada propiedad y regla ocupando una línea. Las propiedades están sangradas dentro de las reglas, pero las reglas no están sangradas de ninguna manera especial. Por ejemplo:

#main {
  color: #fff;
  background-color: #000;
}
#main p {
  width: 10em;
}

.huge {
  font-size: 10em;
  font-weight: bold;
  text-decoration: underline;
}

:compacto

El estilo compacto ocupa menos espacio que Anidado o Expandido. También atrae más la atención hacia los selectores que hacia sus propiedades. Cada regla de CSS ocupa solo una línea, con cada propiedad definida en esa línea. Las reglas anidadas se colocan una junto a la otra sin línea nueva, mientras que los grupos separados de reglas tienen nuevas líneas entre ellas. Por ejemplo:

#main { color: #fff; background-color: #000; }
#main p { width: 10em; }

.huge { font-size: 10em; font-weight: bold; text-decoration: underline; }

:comprimido

El estilo comprimido ocupa la mínima cantidad de espacio posible, sin espacio en blanco excepto el necesario para separar selectores y una nueva línea al final del archivo. También incluye algunas otras compresiones menores, como elegir la representación más pequeña para los colores. No es para ser legible por humanos. Por ejemplo:

#main{color:#fff;background-color:#000}#main p{width:10em}.huge{font-size:10em;font-weight:bold;text-decoration:underline}