Sass - Estilo de Saída

Neste capítulo, estudaremos sobre SASS Output Style. O arquivo CSS que o SASS gera consiste em um estilo CSS padrão, que reflete a estrutura do documento. O estilo CSS padrão é bom, mas pode não ser adequado para todas as situações; por outro lado, o SASS suporta muitos outros estilos.

Ele suporta os seguintes estilos de saída diferentes -

: aninhado

O estilo aninhado é o estilo padrão do SASS. Essa forma de estilização é muito útil quando você está lidando com arquivos CSS grandes. Isso torna a estrutura do arquivo mais legível e pode ser facilmente compreendida. Cada propriedade tem sua própria linha e o recuo de cada regra é baseado na profundidade de seu aninhamento.

Por exemplo, podemos aninhar o código no arquivo SASS conforme mostrado abaixo -

#first {
   background-color: #00FFFF;
   color: #C0C0C0; 
}

#first p {
   width: 10em; 
}

.highlight {
   text-decoration: underline;
   font-size: 5em;
   background-color: #FFFF00; 
}

: expandido

No tipo expandido de estilo CSS, cada propriedade e regra tem sua própria linha. É preciso mais espaço em comparação com o estilo CSS aninhado. A seção Regras consiste em propriedades, todas pretendidas dentro das regras, enquanto as regras não seguem qualquer recuo.

Por exemplo, podemos expandir o código no arquivo SASS conforme mostrado abaixo -

#first {
   background-color: #00FFFF;
   color: #C0C0C0;
}

#first p {
   width: 10em;
}

.highlight {
   text-decoration: underline;
   font-size: 5em;
   background-color: #FFFF00;
}

:compactar

O estilo CSS compacto ocupa menos espaço de forma competitiva do que o expandido e aninhado. Ele se concentra principalmente em seletores, e não em suas propriedades. Cada seletor ocupa uma linha e suas propriedades também são colocadas na mesma linha. As regras aninhadas são posicionadas lado a lado sem uma nova linha e os grupos separados de regras terão novas linhas entre eles.

Por exemplo, podemos compactar o código no arquivo SASS conforme mostrado abaixo -

#first { 
   background-color: #00FFFF; color: #C0C0C0; 
}

#first p { 
   width: 10em; 
}

.highlight { 
   text-decoration: underline; font-size: 5em; background-color: #FFFF00; 
}

:comprimido

O estilo CSS compactado ocupa o mínimo de espaço em comparação com todos os outros estilos discutidos acima. Ele fornece espaços em branco apenas para separar seletores e nova linha no final do arquivo. Esse estilo é confuso e não é facilmente legível.

Por exemplo, podemos compactar o código no arquivo SASS conforme mostrado abaixo -

#first { 
   background-color:#00FFFF;color:#C0C0C0
} 

#first p { 
   width:10em 
} 

.highlight { 
   text-decoration:underline;font-size:5em;background-color:#FFFF00 
}