SASS (Syntactically Awesome Stylesheet) é um pré-processador CSS que ajuda a reduzir a repetição com CSS e economiza tempo. É uma linguagem de extensão CSS mais estável e poderosa que descreve o estilo do documento de forma limpa e estrutural.

• É uma linguagem de pré-processamento que fornece sintaxe indentada (sua própria sintaxe) para CSS.

• Ele permite escrever código de forma mais eficiente e fácil de manter.

• É um superconjunto de CSS que contém todos os recursos do CSS e é um pré-processador de código aberto, codificado em Ruby.

• Ele fornece estilo de documento em um bom formato de estrutura do que CSS simples.

• Ele usa métodos reutilizáveis, declarações lógicas e algumas das funções integradas, como manipulação de cores, matemática e listas de parâmetros.

• É mais estável, poderoso e compatível com versões de CSS.

• É um superconjunto de CSS e é baseado no JavaScript.

• É conhecido como açúcar sintático para CSS, o que significa que torna mais fácil para o usuário ler ou expressar as coisas com mais clareza.

• Ele usa sua própria sintaxe e compila em CSS legível.

• Você pode escrever CSS facilmente em menos código em menos tempo.

• É um pré-processador de código aberto que é interpretado em CSS.

• Ele permite escrever CSS limpo em uma construção de programação.

• Ajuda a escrever CSS mais rápido.

• É um superconjunto de CSS que ajuda designers e desenvolvedores a trabalhar de forma mais eficiente e rápida.

• Como o Sass é compatível com todas as versões de CSS, podemos usar qualquer biblioteca CSS disponível.

• É possível usar sintaxe aninhada e funções úteis, como manipulação de cores, matemática e outros valores.

• Leva tempo para o desenvolvedor aprender os novos recursos presentes neste pré-processador.

• Se houver mais pessoas trabalhando no mesmo site, então usará o mesmo pré-processador. Algumas pessoas usam o Sass e outras usam o CSS para editar os arquivos diretamente. Portanto, será difícil trabalhar com o site.

• Há chances de perder os benefícios do inspetor de elemento embutido do navegador.

SASS suporta duas sintaxes, a saber SCSS e Indented sintaxe.

• o SCSS (Sassy CSS)é uma extensão da sintaxe CSS que torna muito mais fácil manter grandes folhas de estilo e pode reconhecer a sintaxe específica do fornecedor e muitos CSS. Arquivos SCSS usam a extensão.scss.

• o Indented é uma sintaxe mais antiga e às vezes chamada apenas de Sass. Usando essa forma de sintaxe, CSS pode ser escrito de forma concisa. Arquivos SASS usam a extensão.sass.

Você pode usar o SASS de três maneiras diferentes -

• Como uma ferramenta de linha de comando

• Como um módulo Ruby

• Como um plugin para framework habilitado para Rack

Aninhamento é a combinação de diferentes estruturas lógicas. Usando o SASS, podemos combinar várias regras CSS entre si. Se você estiver usando vários seletores, poderá usar um seletor dentro de outro para criar seletores compostos.

Você pode selecionar o seletor pai usando o &personagem. Diz onde o seletor pai deve ser inserido.

SASS oferece suporte ao seletor de espaço reservado usando o seletor de classe ou id . Em CSS normal, eles são especificados com "#"ou".", mas no SASS são substituídos por"%"

Existem 5 tipos de operações -

• Operações numéricas

• Operações de Cor

• Operações de String

• Operações Booleanas

• Operações de lista

Ele permite operações matemáticas como adição, subtração, multiplicação e divisão.

Ele permite usar componentes de cores junto com operações aritméticas.

As listas representam séries de valores separados por vírgulas ou espaço.

Você pode realizar operações booleanas no script Sass usando os operadores and, or and not.

Parênteses são pares de sinais que geralmente são marcados por colchetes () ou colchetes [] que fornecem uma lógica simbólica que afeta a ordem das operações.

Ele fornece variáveis ​​SassScript em seletores e nomes de propriedade usando #{ }sintaxe. Você pode especificar variáveis ​​ou nomes de propriedade entre as chaves.

Você pode definir os valores padrão para as variáveis ​​adicionando ! Default flag ao final do valor da variável. Não vai reatribuir o valor, se já estiver atribuído à variável.

Leva diretamente o nome do arquivo para importar e todos os arquivos importados serão combinados em um único arquivo CSS.

Ele define regras de estilo para diferentes tipos de mídia.

É usado para compartilhar regras e relacionamentos entre seletores. Ele pode estender todos os estilos de outras classes em uma classe e também pode aplicar seus próprios estilos específicos.

É uma coleção de regras aninhadas que podem criar blocos de estilo na raiz do documento.

É usado para executar seletivamente as instruções de código com base no resultado da avaliação de uma expressão.

As instruções @else if são usadas com a diretiva @if, sempre que a instrução @if falha, as instruções @else if são tentadas e, se também falharem, @else é executado.

Ele permite que você gere estilos em um loop. A variável counter é usada para definir a saída de cada iteração.

Na diretiva @each, é definida uma variável que contém o valor de cada item em uma lista.

É usado para definir os mixins que incluem opcionalmente as variáveis ​​e o argumento após o nome do mixin.

É usado para incluir o mixin no documento e os estilos definidos pelo mixin podem ser incluídos na regra atual.

Os valores SassScript podem ser considerados como argumentos em mixins que são fornecidos quando o mixin é incluído e estão disponíveis como variáveis ​​dentro do mixin.

Existem dois tipos de argumentos mixin -

• Argumentos de Palavras-Chave

• Argumentos Variáveis

É usado para incluir argumentos nos mixins. Os argumentos nomeados podem ser passados ​​em qualquer ordem e os valores padrão do argumento podem ser omitidos.

Argumentos variáveis ​​são usados ​​para passar qualquer número de argumentos para o mixin. Ele contém argumentos de palavra-chave passados ​​para a função ou mixin.

Usando a diretiva de função, você pode criar sua própria função e usá-la em seu contexto de script ou pode ser usada com qualquer valor.

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.

O estilo aninhado é o estilo padrão do SASS. Essa forma de estilizar é muito útil quando você está lidando com arquivos CSS grandes.

No estilo de saída expandido, cada propriedade e regra tem sua própria linha. Leva mais espaço em comparação ao estilo CSS aninhado.

O estilo CSS compacto ocupa menos espaço de forma competitiva que o expandido e aninhado. Ele se concentra principalmente em seletores, e não em suas propriedades.

O estilo CSS compactado ocupa menos espaço em comparação com todos os outros estilos. Ele fornece espaços em branco apenas para separar seletores e nova linha no final do arquivo.

• Ele usa recuo em vez de{ e } para delimitar blocos.

• Para separar instruções, ele usa novas linhas em vez de ponto e vírgula (;) .

• A declaração de propriedade e os seletores devem ser colocados em sua própria linha e as instruções dentro{ e }deve ser colocado em uma nova linha e recuado .

• Ele usa recuo em vez de{ e } para delimitar blocos.

• Para separar instruções, ele usa novas linhas em vez de ponto e vírgula (;) .

• A declaração de propriedade e os seletores devem ser colocados em sua própria linha e as instruções dentro{ e }deve ser colocado em uma nova linha e recuado .

As propriedades CSS podem ser declaradas de duas maneiras -

• As propriedades podem ser declaradas semelhantes ao CSS, mas sem semicolon(;).

• colon(:) será prefixado em cada nome de propriedade.

Você pode usar = para a diretiva @mixin e + para a diretiva @include que requer menos digitação e torna seu código mais simples e fácil de ler.

sass --watch C: \ ruby ​​\ lib \ sass \ style.scss: style.css

Os comentários ocupam uma linha inteira e incluem todo o texto aninhado sob eles e são baseados em linha em sintaxe indentada.

sass input.scss output.css

• Primeiro, ele verifica o byte Unicode, depois a declaração @charset e a codificação da string Ruby.

• Em seguida, se nada for definido, ele considera a codificação do conjunto de caracteres como UTF-8 .

• Determine a codificação de caracteres explicitamente usando a declaração @charset . Apenas use "@charset encoding name" no início da folha de estilo e o SASS assumirá que esta é a codificação de caractere fornecida.

• Se o arquivo de saída do SASS contiver caracteres não ASCII, ele usará a declaração @charset .

Sass suporta dois tipos de comentários -

• Multiline comments- Eles são gravados usando / * e * /. Os comentários de várias linhas são preservados na saída CSS.

• Single line comments - Estes são escritos usando //seguido por comentários. comentários de uma única linha não são preservados na saída CSS.

Ele avalia a expressão SassScript usando a linha de comando. Você pode executar o shell com a linha de comando sass junto com a opção -i .

Ele detecta os erros e exibe os valores da expressão SassScript para o fluxo de saída de erro padrão.

Ele exibe o valor da expressão SassScript como erro fatal.