Usando Sass

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 .