Sass - sintaxe

Neste capítulo, estudaremos sobre SASS Syntax. SASS suporta duas sintaxes, a saberSCSS e Indented syntax.

o SCSS (Sassy CSS)é uma extensão da sintaxe CSS. Isso significa que todo CSS válido também é um SCSS válido. O SCSS torna muito mais fácil manter grandes folhas de estilo e pode reconhecer a sintaxe específica do fornecedor. Muitos arquivos CSS e SCSS usam a extensão.scss.
Indented - Esta é 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.

SASS Indentada Sintaxe

SASS Sintaxe recuada ou apenas SASS é uma alternativa à sintaxe SCSS baseada em CSS.

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 .

Por exemplo, considere o seguinte código SCSS -

.myclass {
   color = red;
   font-size = 0.2em;
}

o indentedA sintaxe é uma sintaxe mais antiga, que não é recomendada para uso em novos arquivos Sass. Se você usar este arquivo, ele exibirá um erro no arquivo CSS como usamos= em vez de definir propriedades e variáveis.

Compile o código fornecido acima usando o seguinte comando -

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

Em seguida, execute o comando acima; ele exibirá um erro no arquivo style.css conforme mostrado abaixo -

Error: Invalid CSS after "  color = red": expected "{", was ";"
      on line 2 of C:\ruby\lib\sass\style17.scss

1:.myclass {
2:   color = red;
3:   font-size = 0.2em;
4:}

Diferenças de sintaxe de SASS

A maioria das sintaxes CSS e SCSS funcionam perfeitamente no SASS. No entanto, existem algumas diferenças, que são explicadas nas seções a seguir -

Sintaxe de propriedade

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.

Por exemplo, você pode escrever como -

.myclass
   :color red
   :font-size 0.2em

Ambas as formas acima (declaração de propriedades sem ponto-e-vírgula e dois pontos prefixados ao nome da propriedade) podem ser usadas, por padrão. No entanto, apenas uma sintaxe de propriedade pode ser especificada quando você usa a opção : property_syntax .

Seletores multilinha

Na sintaxe recuada, os seletores podem ser colocados em uma nova linha sempre que aparecerem após commas.

Exemplo

O exemplo a seguir descreve o uso de seletores multilinhas no arquivo SCSS -

<html>
   <head>
      <title>Multiline Selectors</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
      <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
      <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
   </head>
   
   <body>
      <h2>Example using Multiline Selectors</h2 >
      <p class = "class1">Welcome to Tutorialspoint!!!</p>
      <p class = "class2">SASS stands for Syntactically Awesome Stylesheet...</p>
   </body>
</html>

Em seguida, crie o arquivo style.scss . Observe a extensão .scss .

style.scss

.class1,
.class2{
   color:red;
}

Você pode dizer ao SASS para observar o arquivo e atualizar o CSS sempre que o arquivo SASS for alterado, usando o seguinte comando -

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

Em seguida, execute o comando fornecido acima, ele criará o arquivo style.css automaticamente com o seguinte código -

O style.css gerado é mostrado abaixo -

style.css

.class1,
.class2 {
   color: red;
}

Resultado

Vamos realizar as seguintes etapas para ver como funciona o código fornecido acima -

Salve o código html fornecido acima no arquivo multiline_selectors .html.
Abra este arquivo HTML em um navegador, uma saída é exibida conforme mostrado abaixo.

Comentários

Os comentários ocupam uma linha inteira e incluem todo o texto aninhado abaixo deles. Eles são baseados em linha em sintaxe indentada. Para mais informações sobre comentários, consulte este link .

@importar

No SASS o @importdiretiva pode ser escrita com / sem aspas. Ao contrário do SCSS, eles devem ser usados com aspas.

Por exemplo, em SCSS o @import diretiva pode ser usada como -

@import "themes/blackforest";
@import "style.sass";

Isso pode ser escrito no SASS como -

@import themes/blackforest
@import fontstyle.sass

Diretivas Mixin

SASS suporta atalhos para diretivas como @mixin e @include. Ao invés de@mixin e @include você pode usar = e + caracteres, que exigem menos digitação e tornam seu código mais simples e fácil de ler.

Por exemplo, você pode escrever as diretivas do mixin como -

=myclass
   font-size: 12px;
p
   +myclass

O código fornecido acima é o mesmo que -

@mixin myclass
   font-size: 12px;
p
   @include myclass

Sintaxe obsoleta

O SASS oferece suporte ao uso de algumas sintaxes antigas. No entanto, usar esta sintaxe no SASS énot recommended. Um aviso será exibido se você usar esta sintaxe e ela for removida em versões posteriores. Algumas das sintaxes antigas são mostradas na tabela a seguir.

S. No.	Operador e descrição
1	= Foi usado em vez de: ao definir variáveis e propriedades para valores de SassScript.
2	\|\|= Foi usado em vez de: sempre que você atribuiu o valor padrão de uma variável.
3	! Em vez de $,! foi usado como prefixo variável. A funcionalidade não será alterada quando for usado em vez de $.