Introdução ao Sass
Sass é um pré-compilador para CSS. Sass pode simplificar muito código CSS e torná-lo conciso e bonito.
1. Declaração e uso de variáveis
A declaração de variáveis Sass começa com $, que é semelhante à declaração de variáveis CSS.
Por exemplo:
O valor da variável bg-Color é vermelho.
Ao usar variáveis, basta chamá-las diretamente.
Desta forma, os valores de cor e cor de fundo são ambos vermelhos.
2. Os nomes das variáveis devem ser separados por sublinhados ou sublinhados?
A explicação no site oficial é: você decide.
Como posso dizer, mesmo que você escreva $bg-color para definir a variável e depois escreva $bg_color ao referenciá-la, ela ainda poderá ser usada normalmente.
3. Regras CSS aninhadas.
O exemplo acima converterá o css no mesmo efeito que você viu antes ao produzi-lo. Neste processo, Sass usa duas etapas. Cada etapa consiste em abrir os blocos de regras aninhados, um por um, como abrir uma boneca matryoshka russa.
3.1. O identificador do seletor pai &
Há uma situação comum, como adicionar um seletor de pseudoclasse :hover à tag a. Quando você escreve assim:
Quando todos os elementos filhos da tag a em nav são pairados, a cor da fonte ficará vermelha.
Neste momento, um identificador pode resolver este problema, como:
Quando a regra aninhada que contém o identificador do seletor pai é aberta, ela não será emendada como seletores descendentes, mas & será diretamente substituído pelo seletor pai. Após a compilação, ele se tornará:
3.2. Aninhamento de seletores de grupo
Em No processo de desenvolvimento modular, os estilos CSS encontrarão muitas dessas situações. O estilo de cada módulo deve ser agrupado com o nome da classe mais externa do módulo, para evitar conflitos de estilo.
Neste momento, uma grande lista de nomes de estilos aparecerá no arquivo css:
Neste momento, as vantagens do aninhamento sass são refletidas: Então você pode usá-lo em sua folha de estilo através de @include Coloque este mixer onde quiser. A chamada @include extrairá todos os estilos do mixer e os colocará onde @include é chamado. Mixer Definido usando o identificador @mixin. Parece muito com outros identificadores CSS @, como @media ou @font-face. Este identificador dá um nome a um bloco de estilos para que você possa reutilizar facilmente o estilo referenciando o nome. O código sass a seguir define um mixer muito simples, o objetivo é adicionar bordas arredondadas entre navegadores: 6. Mixer A maneira mais direta de codificar5. Comentários silenciosos O Sass também possui uma regra @import, mas a diferença é que a regra @import do sass importa arquivos relacionados ao gerar arquivos css. Isso significa que todos os estilos relacionados são combinados no mesmo arquivo css sem a necessidade de iniciar solicitações de download adicionais. Além disso, todas as variáveis e misturadores definidos no arquivo importado (ver Seção 2.5) estão disponíveis no arquivo importado. CSS tem um recurso particularmente incomum, que é a regra @import, que permite que outros arquivos CSS sejam importados para um arquivo CSS. Porém, a consequência é que o navegador irá baixar outros arquivos css somente quando o @import for executado, o que faz com que a página carregue muito lentamente. Acho esta função particularmente útil. As palavras originais do site oficial são as seguintes: 4. Importar arquivos SASS As regras para atributos aninhados são as seguintes: desconecte o nome do atributo do travessão - e adicione dois pontos após o atributo raiz: , seguido por um bloco { }, escreva a parte do subatributo neste bloco { }. Após a compilação: Atributos aninhados são atributos que também suportam aninhamento. Por exemplo: 3.4 Atributos aninhados Após a compilação, ele se torna Into: Na verdade, segue as regras do css:
3.3. Seletores de subcombinação e seletores de combinação de mesmo nível: >, + e ~
