Output modes do Sass
O output mode é o modo de saída do Sass, ou seja, o modo que o Sass segue para escrever os arquivos CSS
resultantes do processo de transpilação. É possível definir o output mode usando a opção --style no
transpiler do Sass da linha de comando. Exemplo:
sass style.scss style.css --style=expandedEstilo nested
Esse estilo é o padrão e é o que deixa a hierarquia das regras mais clara, usando a indentação para deixar as regras aninhadas umas dentro das outras. É o estilo que está nos exemplos dos outros tutoriais, então se você já viu os tutoriais anteriores, deve estar cansado de ver esse estilo.
Estilo expanded
Esse estilo não usa a indentação para mostrar a hierarquia entre as regras. Ele coloca uma quebra de linha entre as regras que não tem relação hierárquica e não coloca a quebra quando há relação hierárquica. Exemplo:
header {
margin-top: 2em;
margin-bottom: 2em;
}
header nav {
padding-left: 1em;
padding-right: 1em;
}
.lead {
font-size: 1.2em;
}Estilo compact
Usa a quebra de linha entre as regras só quando não há relação hierárquica como no estilo expanded e coloca cada regra em apenas uma linha:
header { margin-top: 2em; margin-bottom: 2em; }
header nav { padding-left: 1em; padding-right: 1em; }
.lead { font-size: 1.2em; }Estilo compressed
Esse estilo é o mais recomendado para usar em produção, porque ocupa a quantidade mínima de espaço possível, então os arquivos criados são mais leves:
header{margin-top:2em;margin-bottom:2em}header nav{padding-left:1em;padding-right:1em}.lead{font-size:1.2em}