Sass - Guia Rápido

O que é SASS?

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 de um documento de forma clara e estrutural.

Foi inicialmente projetado por Hampton Catlin e desenvolvido por Natalie Weizenbaum em 2006. Mais tarde, Weizenbaum e Chris Eppstein usou sua versão inicial para estender o Sass com SassScript.

Por que usar o SASS?

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

  • Ele fornece alguns recursos, que são usados ​​para criar folhas de estilo que permitem escrever código com mais eficiência e são fáceis de manter.

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

  • Ele fornece o estilo do documento em um formato bom e estruturado do que o CSS simples. Ele usa métodos reutilizáveis, instruções lógicas e algumas das funções integradas, como manipulação de cores, matemática e listas de parâmetros.

Características do SASS

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

  • É um superconjunto de CSS e é baseado em 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 de forma mais clara.

  • 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.

Vantagens do SASS

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

  • Ajuda a escrever CSS rapidamente.

  • É um superconjunto de CSS, que ajuda designers e desenvolvedores a trabalhar com mais eficiência e rapidez.

  • 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.

Desvantagens do SASS

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

  • Se muitas pessoas estiverem trabalhando no mesmo site, deve-se usar o mesmo pré-processador. Algumas pessoas usam Sass e outras usam CSS para editar os arquivos diretamente. Portanto, fica difícil trabalhar no local.

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

Neste capítulo, aprenderemos o procedimento passo a passo para instalar o Ruby, que é usado para executar os arquivos SASS.

Requisitos do sistema para SASS

  • Operating System - Plataforma cruzada

  • Browser Support - IE (Internet Explorer 8+), Firefox, Google Chrome, Safari, Opera

  • Programming Language - rubi

Instalação de Ruby

Step 1 - Abra o link https://www.ruby-lang.org/en/downloads/, você verá uma tela conforme mostrado abaixo -

Baixe a versão estável atual do arquivo zip.

Step 2 - Em seguida, execute a configuração para instalar Ruby no sistema.

Step 3- Em seguida, adicione a pasta Ruby bin à sua variável de usuário PATH e variável de sistema para trabalhar com o comando gem.

Path User Variable -

  • Clique com o botão direito no My Computer ícone.

  • Selecione Properties.

  • Em seguida, clique no Advanced guia e clique Environment Variables.

Na janela Variáveis ​​de ambiente , clique duas vezes no PATH conforme mostrado na imagem fornecida abaixo -

Você obterá uma caixa Editar variável do usuário conforme mostrado. Adicione o caminho da pasta ruby ​​bin no campo Variable value comoC:\Ruby\bin. Se o caminho já estiver definido para outros arquivos, coloque ponto-e-vírgula depois disso e adicione o caminho da pasta Ruby conforme mostrado abaixo.

Clique no OK botão.

System Variable -

  • Clique no New botão.

A seguir, o New System Variable bloco é exibido conforme mostrado abaixo.

  • Entrar RubyOptno campo Nome da variável erubygemsno campo Valor da variável . Depois de escrever o nome e o valor da variável , clique noOK botão.

Step 4 - Abra o prompt de comando em seu sistema e digite a seguinte linha -

gem install sass

Step 5 - A seguir, você verá a seguinte tela após instalar o SASS com sucesso.

Exemplo

A seguir está um exemplo simples de SASS.

<html>
   <head>
      <title> Import example of sass</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css"/>
   </head>

   <body>
      <h1>Simple Example</h1>
      <h3>Welcome to TutorialsPoint</h3>
   </body>
</html>

Agora, vamos criar o arquivo style.scss , que é bastante semelhante ao CSS e a única diferença é que ele será salvo com a extensão .scss. Os arquivos .htm e .scss devem ser criados dentro da pastaruby. Você pode salvar seu arquivo .scss na pastaruby\lib\sass\ (antes deste processo, crie uma pasta como sass no diretório lib).

h1{
   color: #AF80ED;
}

h3{
   color: #DE5E85;
}

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

Quando você executa o comando acima, o arquivo style.css é criado automaticamente. Sempre que você alterar o arquivo SCSS, o arquivo style.css será atualizado automaticamente.

O arquivo style.css terá o seguinte código quando você executar o comando fornecido acima -

style.css

h1 {
   color: #AF80ED;
}
h3 {
   color: #DE5E85;
}

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

  • Salve o código fornecido acima em hello.html Arquivo.

  • Abra este arquivo HTML em um navegador.

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 $.

SASS é mais poderoso e estável que fornece poder para a linguagem básica usando extensão de CSS. 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

Se você estiver usando SASS no Windows, você precisa instalar Rubyprimeiro. Para obter mais informações sobre a instalação do Ruby, consulte o capítulo Instalação do SASS .

A tabela a seguir mostra os comandos usados ​​para executar o código SASS -

S. No. Comando e Descrição
1

sass input.scss output.css

É usado para executar o código SASS a partir da linha de comando.
2

sass --watch input.scss:output.css

Informa o SASS para observar o arquivo e atualizar o CSS sempre que o arquivo do SASS for alterado.
3

sass --watch app/sass:public/stylesheets

É usado para monitorar todo o diretório, se o SASS contiver muitos arquivos em um diretório.

Rack / Rails / Plugin Merb

Racké uma interface de servidor da web, que é usada para desenvolver aplicativos da web em Ruby. Para obter informações sobre o Rack, visite este link .

Você pode habilitar o SASS no Rails 3 versão usando o environment.rb arquivo presente sob o configpasta. Habilite o SASS para o Rails 3 usando o seguinte código -

config.gem "sass"

Você pode usar a seguinte linha para o Gemfile para o Rails 3 (e versão superior), como -

gem "sass"

Railsé uma estrutura da web de código aberto que usa padrões da web como JSON, HTML, CSS e JavaScript para exibir a interface do usuário. Para trabalhar com Rails, você precisa ter um conhecimento básico de Ruby e programação orientada a objetos. Aprenda mais sobre o framework on Rails aqui .

Se você deseja habilitar o SASS em Rack aplicativo, adicione as seguintes linhas ao config.ru arquivo, que está presente no diretório raiz do aplicativo -

require 'sass/plugin/rack'
use Sass::Plugin::Rack

Merbé uma estrutura de aplicação web, que fornece velocidade e modularidade para Rails. Para saber mais sobre o Merb, basta abrir este link .

Você pode habilitar o SASS em Merb adicionando a seguinte linha ao config/dependencies.rb arquivo -

dependency "merb-haml"

Cache

O SASS armazena em cache documentos como modelos e parciais, que podem ser reutilizados sem analisá-los, a menos que tenham sido alterados. Ele torna a compilação de arquivos SASS mais rápida e funciona ainda melhor quando os modelos são divididos em arquivos separados, que são todos importados em um arquivo grande. Se você excluir os arquivos em cache, eles serão gerados novamente na próxima compilação.

Opções

Você pode definir as opções no arquivo environment.rb do Rails ou no arquivo config.ru do aplicativo Rack usando a seguinte linha -

Sass::Plugin.options[:style] = :compact

Você também pode definir opções no arquivo init.rb do Merb usando a seguinte linha -

Merb::Plugin.config[:sass][:style] = :compact

Existem algumas opções disponíveis com SASS e SCSS conforme descrito na tabela abaixo -

S. No. Opção e descrição
1

:style

Ele exibe o estilo da saída.
2

:syntax

Você pode usar sintaxe recuada para sass e sintaxe de extensão CSS para scss .
3

:property_syntax

Ele usa sintaxe indentada para fazer uso de propriedades. Se não estiver correto, ele gerará um erro. Por exemplo, considere "background: # F5F5F5" em que background é um nome de propriedade e # F5F5F5 é seu valor de propriedade. Você deve usar dois pontos após o nome da propriedade.
4

:cache

Ele acelera a compilação de arquivos SASS. É definido como verdadeiro por padrão.
5

:read_cache

Ele lê apenas arquivos SASS se o cache não estiver definido e read_cache estiver definido.
6

:cache_store

Ele pode ser usado para armazenar e acessar o resultado em cache definindo-o como uma instância de Sass :: CacheStores :: Base .
7

:never_update

Ele nunca deve atualizar o arquivo CSS se os arquivos de modelo forem alterados. Por padrão, é definido como falso.
8

:always_update

Ele deve atualizar o arquivo CSS sempre que os arquivos de modelo forem alterados.
9

:always_check

Ele deve verificar as atualizações sempre que o servidor for iniciado. Ele irá recompilar e sobrescrever o arquivo CSS, se houver uma atualização no arquivo de modelo SASS.
10

:poll

Ele usa o backend de pesquisa para Sass :: Plugin :: Compiler # watch (que observa o modelo e a atualização dos arquivos CSS) definindo-o como true.
11

:full_exception

Ele exibe a descrição do erro sempre que ocorre uma exceção no código SASS dentro do arquivo CSS gerado. Ele exibe um número de linha onde ocorreu um erro junto com a fonte no arquivo CSS.
12

:template_location

Ele fornece o caminho para o diretório do modelo no aplicativo.
13

:css_location

Ele fornece o caminho para as folhas de estilo CSS no aplicativo.
14

:unix_newlines

Ele fornece novas linhas de estilo Unix ao gravar arquivos, definindo-o como verdadeiro.
15

:filename

É o nome do nome do arquivo que está sendo exibido e usado para relatar erros.
16

:line

Ele especifica a primeira linha do modelo SASS e exibe os números das linhas para erros.
17

:load_paths

É usado para carregar os caminhos para o modelo SASS que são incluídos usando a diretiva @import .
18

:filesystem_importer

É usado para importar arquivos do sistema de arquivos que usa a subclasse Sass :: Importers :: Base para lidar com caminhos de carregamento de strings.
19

:sourcemap

Ele gera mapas de origem que instruem o navegador a encontrar os estilos SASS. Ele usa três valores -

  • :auto- Contém URIs relativos. Se não houver um URI relativo, use o URI "arquivo:".

  • :file - Ele usa URIs "arquivo:", que funcionam localmente, não em um servidor remoto.

  • :inline - Contém texto de origem no mapa de origem que é usado para criar grandes arquivos de mapa de origem.
20

:line_numbers

Ele exibe o número da linha para erros relatados no arquivo CSS, definindo-o como verdadeiro.
21

:trace_selectors

Ajuda a rastrear os seletores de importações e mixins quando definido como verdadeiro.
22

:debug_info

Ele fornece informações de depuração do arquivo SASS usando o número da linha e o arquivo quando definido como verdadeiro.
23

:custom

Ele disponibiliza dados para funções SASS em aplicativos separados.
24

:quiet

Ele desativa os avisos definindo-o como verdadeiro.

Seleção de sintaxe

Você pode determinar qual sintaxe está usando no modelo SASS usando a ferramenta de linha de comando SASS. Por padrão, o SASS usa sintaxe recuada, que é uma alternativa à sintaxe SCSS baseada em CSS. Você pode usar o programa de linha de comando SCSS, que é semelhante ao programa SASS, mas, por padrão, ele considera a sintaxe como SCSS.

Codificações

O SASS usa a codificação de caracteres das folhas de estilo, especificando as seguintes especificações 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 .

Neste capítulo, estudaremos sobre CSS Extensions. As extensões CSS podem ser usadas para aprimorar a funcionalidade das páginas da web. A tabela a seguir lista algumas das extensões CSS usadas no SASS -

S. No. Extensão CSS e descrição
1 Regras aninhadas

É uma maneira de combinar várias regras CSS entre si.
2 Referenciando seletores pais: &

É o processo de seleção do seletor pai usando o & personagem.
3 Propriedades Aninhadas

Ele permite o aninhamento de propriedades em outras propriedades, o que leva ao agrupamento de outro código relacionado.
4 Seletores de espaço reservado

O Sass suporta o seletor de placeholder usando o seletor de classe ou id usando a diretiva @extend .

Neste capítulo, estudaremos sobre Sass Comments. Os comentários são instruções não executáveis, que são colocadas no código-fonte. Os comentários tornam o código-fonte mais fácil de entender. O 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 linha única não são preservados na saída CSS.

Exemplo

O exemplo a seguir demonstra o uso de comentários no arquivo SCSS -

<html>
   <head>
      <title>SASS comments</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css"/>
   </head>

   <body>
      <h1>Welcome to TutorialsPoint</h1>
      <a href = "http://www.tutorialspoint.com/">TutorialsPoint</a>
   </body>
</html>

Em seguida, crie o arquivo style.scss .

style.scss

/* This comment is
 * more than one line long
 * since it uses the CSS comment syntax,
 * it will appear in the CSS output. */
body { color: black; }

// These comments are in single line
// They will not appear in the CSS output,
// since they use the single-line comment syntax.
a { color: blue; }

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 acima, ele criará o arquivo style.css automaticamente com o seguinte código -

style.css

/* This comment is
 * more than one line long
 * since it uses the CSS comment syntax,
 * it will appear in the CSS output. */
body {
   color: black; }

a {
   color: blue; }

Resultado

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

  • Salve o código html fornecido acima em sass_comments.html Arquivo.

  • Abra este arquivo HTML em um navegador, uma saída é exibida conforme mostrado abaixo.

Para estudar sobre a interpolação em comentários de várias linhas, clique neste link .

Sass - Interpolação em comentários multilinha

Descrição

A interpolação nos comentários de várias linhas é resolvida no CSS resultante. Você pode especificar variáveis ​​ou nomes de propriedade entre as chaves.

Sintaxe

$var : "value";
/* multiline comments #{$var} */

Exemplo

O exemplo a seguir demonstra o uso de interpolação em comentários de várias linhas no arquivo SCSS -

<html>
   <head>
      <title>SASS comments</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css"/>
   </head>

   <body>
      <h1>Welcome to TutorialsPoint</h1>
      <p>This is an example for Interpolation in SASS.</p>
   </body>
</html>

Em seguida, crie o arquivo style.scss .

style.css

$version: "7.8";
/* Framework version for the generated CSS is #{$version}. */

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

A seguir, execute o comando acima; ele criará o arquivo style.css automaticamente com o seguinte código

style.css

/* Framework version for the generated CSS is 7.8. */

Resultado

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

  • Salve o código html fornecido acima em sass_comments_interpolation.htm Arquivo.

  • Abra este arquivo HTML em um navegador, uma saída é exibida conforme mostrado abaixo.

O SASS usa um pequeno conjunto de extensões conhecido como SassScript, que pode ser incluído nos documentos do SASS para calcular variáveis ​​de valores de propriedade e usa propriedades de variáveis, aritmética e outras funções. SassScript também pode ser usado com seletores e nomes de propriedade ao usar mixins (Mixins permite reutilizar estilos CSS em toda a folha de estilo).

A tabela a seguir lista algumas das extensões CSS usadas no SASS -

S. No. Extensão CSS e descrição
1 Shell Interativo

Ele avalia a expressão SassScript usando a linha de comando.
2 Variáveis

Ele representa os dados como valores numéricos, caracteres ou endereços de memória.
3 Tipos de dados

Ele declara o tipo de dados para cada objeto de dados.
4 Operações

Ele fornece operações como número, cor, string, booleano e operações de lista.
5 Parênteses

É um par de sinais que geralmente são marcados por colchetes () ou colchetes [].
6 Funções

Ele suporta o uso de funções, fornecendo alguns argumentos de palavra-chave.
7 Interpolação

Ele fornece variáveis ​​SassScript e nomes de propriedades usando #{ } sintaxe.
8 e em SassScript

Ele permite o aninhamento de propriedades em outras propriedades, o que leva ao grupo de outro código relacionado.
9 Padrões variáveis

Ele permite o aninhamento de propriedades em outras propriedades, o que leva ao grupo de outro código relacionado.

A tabela a seguir lista todas as regras e diretivas que você pode usar no SASS.

S. No. Diretivas e descrição
1 @importar

Ele importa os arquivos SASS ou SCSS, leva diretamente o nome do arquivo para importar.
2 @meios de comunicação

Ele define a regra de estilo para diferentes tipos de mídia.
3 @ampliar

A diretiva @extend é usada para compartilhar regras e relacionamentos entre os seletores.
4 @ at-root

A diretiva @ at-root é uma coleção de regras aninhadas, que é capaz de bloquear o estilo na raiz do documento.
5 @depurar

A diretiva @debug detecta os erros e exibe os valores da expressão SassScript para o fluxo de saída de erro padrão.
6 @advertir

A diretiva @warn é usada para dar conselhos preventivos sobre o problema; ele exibe os valores da expressão SassScript para o fluxo de saída de erro padrão.
7 @erro

A diretiva @error exibe o valor da expressão SassScript como um erro fatal.

Neste capítulo, estudaremos sobre Control Directives & Expressions. O estilo com base em algumas condições ou a aplicação do mesmo estilo muitas vezes com variações podem ser realizados usando diretivas de controle e expressões, que são suportadas pelo SassScript. Essas diretivas de controle são opções avançadas usadas principalmente em mixins. Eles exigem flexibilidade considerável, pois fazem parte das bibliotecas do Compass.

A tabela a seguir lista as diretivas de controle e expressões usadas no SASS -

S. No. Diretriz de controle e expressão com descrição
1 E se()

Com base na condição, a função if () retorna apenas um resultado de dois resultados possíveis.
2 @E se

A diretiva @if aceita expressões SassScript e usa os estilos aninhados sempre que o resultado da expressão for diferente de falso ou nulo .
3 @para

A diretiva @for permite gerar estilos em um loop.
4 @cada

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

Ele pega expressões SassScript e até que a instrução seja avaliada como falsa, ela produz estilos aninhados de forma iterativa.

Mixins permitem a criação de um grupo de estilos, que são reutilizáveis ​​em toda a sua folha de estilo, sem a necessidade de recriação de classes não semânticas. No CSS, os mixins podem armazenar vários valores ou parâmetros e chamar a função; isso ajuda a evitar a gravação de códigos repetitivos. Os nomes do Mixin podem usar sublinhados e hifens de forma intercambiável. A seguir estão as diretrizes presentes no Mixins -

S. No. Diretriz e descrição
1 Definindo um Mixin

A diretiva @mixin é usada para definir o mixin.
2 Incluindo um Mixin

A diretiva @include é usada para incluir os mixins no documento.
3 Argumentos

Os valores SassScript podem ser considerados como argumentos em mixins, que são fornecidos quando o mixin está incluído e disponível como variável dentro do mixin.
4 Passando Blocos de Conteúdo para um Mixin

Bloco de estilos é passado para o mixin.

Neste capítulo, estudaremos sobre Function Directives. No SASS, você pode criar sua própria função e usá-las em seu contexto de script ou pode ser usado com qualquer valor. As funções são chamadas usando o nome da função e com quaisquer parâmetros.

Exemplo

O exemplo a seguir demonstra o uso da diretiva de função no arquivo SCSS -

function_directive.htm

<html>
   <head>
      <title>Nested Rules</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>
      <div class = "container" id = "set_width">
         <h2>Example for Function directives</h2>
         <p>SASS stands for Syntactically Awesome Stylesheet. </p>
      </div>
   </body>
</html>

Em seguida, crie o arquivo style.scss .

style.scss

$first-width: 5px;
$second-width: 5px;

@function adjust_width($n) {
   @return $n * $first-width + ($n - 1) * $second-width;
}

#set_width { padding-left: adjust_width(10); }

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

A seguir, execute o comando acima; ele criará o arquivo style.css automaticamente com o seguinte código -

style.css

#set_width {
   padding-left: 95px; 
}

Resultado

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

  • Salve o código html fornecido acima em function_directive.html Arquivo.

  • Abra este arquivo HTML em um navegador, uma saída é exibida conforme mostrado abaixo.

Na saída, você pode ver que o preenchimento esquerdo está sendo aplicado.

Assim como o mixin, a função também pode acessar variáveis ​​definidas globalmente e também pode aceitar parâmetros. Você deve chamar o valor de retorno para a função usando@return. Podemos chamar as funções definidas pelo SASS usando parâmetros de palavra-chave.

Chame a função acima conforme mostrado abaixo.

#set_width { padding-left: adjust_width($n: 10); }

Convenções de Nomenclatura

Para evitar conflitos de nomenclatura, os nomes das funções podem ser prefixados para que possam ser facilmente diferenciados. Como mixins, argumentos variáveis ​​também são suportados por funções definidas pelo usuário. Funções e outros identificadores SASS podem usar sublinhados (_) e hifens (-) de forma intercambiável.

Por exemplo, se uma função é definida como adjust_width, pode ser usado como adjust-width, e vice versa.

Neste capítulo, estudaremos sobre SASS Output Style. O arquivo CSS que o SASS gera consiste no 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 estilizar é 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. Ocupa 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 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 
}

Você pode estender a funcionalidade do SASS para fornecer diferentes tipos de recursos e personalizações para os usuários. Para fazer uso desses recursos, o usuário deve ter conhecimento de Ruby.

Definindo Funções SASS Customizadas

Você pode definir suas próprias funções SASS ao usar a API Ruby. Você pode adicionar suas funções personalizadas adicionando-as aos métodos Ruby, conforme mostrado no código a seguir -

module Sass::Script::Functions
   def reverse(string)
      assert_type string, :String
      Sass::Script::Value::String.new(string.value.reverse)
   end
   declare :reverse, [:string]
end

No código que você pode ver, a Função, declare, especifica os nomes dos argumentos da função. Se falhar, não aceitará nenhum argumento, mesmo que a função esteja funcionando e também aceita argumentos de palavra-chave arbitrários. Você pode obter valores Ruby usando o acessador de valor e acessar os objetos de cor usando rgb, vermelho, verde ou azul .

Armazenamentos de cache

O SASS armazena o cache de documentos analisados, que podem ser reutilizados sem análise novamente. SASS usa:cache_locationpara gravar arquivos de cache no sistema de arquivos. Isso torna a compilação de arquivos SASS mais rápida e, se você excluir os arquivos em cache, eles serão gerados novamente na próxima compilação. Você pode definir seu próprio armazenamento de cache configurando o:cache_storeopção. Isso gravará arquivos de cache no sistema de arquivos ou compartilhará arquivos de cache em processos ou máquinas Ruby. O SASS usa a instância da subclasse de Sass :: CacheStores :: Base para armazenar e recuperar os resultados do cache.

Importadores personalizados

SASS usa @import para importar arquivos SCSS e SASS e passa caminhos para a regra @import para encontrar um path code apropriado para caminhos especificados. Os importadores SASS usam o sistema de arquivos para carregar o código e são adicionados à carga usando o banco de dados ou outro esquema de nomenclatura de arquivo.

O importador único pode carregar um único arquivo e pode ser colocado na matriz : load_paths junto com os caminhos do sistema de arquivos. Ao usar @import , o SASS procura caminhos carregados, que importam o caminho para o importador. Quando o caminho é encontrado, o arquivo importado é usado. Um usuário pode herdar os importadores deSass::Importers::Base.