CSS e SCSS

Nós já vimos alguma coisa de CSS (Cascade Style Sheets), mas assim como exite HAML, também existem pré-processadores mais modernos para elas.

As mais usadas são SASS e SCSS, sendo que a segunda é mais moderna. Entretado a diferença entre elas é bem pequena, ambas são um superset de CSS. Eventualmente algumas das características serão incorporadas ao CSS no futuro. Por enquanto precisamos de um pré-processador.

Os documentos estruturados em formatos XML podem ser descritos como uma hierarquia ou uma árvore. O HTML é um caso particular e portanto também se inclui nesta situação.

A hierarquia é natural. Cada elemento ou tag engloba um conteúdo que por sua vez pode conter outras tags. Aprender a navegar por esta hierarquia é importante para selecionar e operar sobre elementos específicos. Isto é útil tanto para adaptar a formatação como para interagir com o documento com javascript por exemplo.

A figura abaixo mostra um exemplo da árvore.

CSS descreve a forma como elementos da página são apresentados. Cada elemento é descrito por uma tag do HTML, por uma classe, por um identificador (que deve ser único), ou por uma combinação dos três.

Em sua aplicação mais simples, uma especificação CSS define atributos para cada elemento selecionado. Por exemplo, para fazer com que todos os itens h1 apareçam em azul, basta colocar

h1 {
    color: blue;
}

Classes e identificadores são definidas pelos atributos class e id, respectivamente. Pode-se especificar a classe colocando um "." antes de seu nome, os identificadores são precedidos por #. Lembre-se sempre que deve haver um único elemento para cada identificador na página.

Com este código CSS

.code-highlighted{
    background-color:#ff0
}

E com este código HTML

<div class="code-highlighted">
<p>
Exemplo de código destacado.
O ideal seria para código mesmo, mas também funciona para exemplos.
</p>
</div>

O resultado é este:

Veja esta referência para conhecer os diversos atributos que podem ser usados em CSS. Procure exemplos interessantes em páginas que acha legais e se inspire neles.

Como já dito, a diferença entre SASS e SCSS é puramente sintática, ambas possuem a mesma estrutura interna. SASS possui uma sintaxe mais parecida com Python e HAML, SCSS é mais parecida com Ruby e CSS. SCSS é a forma "nova" e mais utilizada atualmente.

CSS

usa extensão .css e significa Cascading Style Sheets.

SASS

usa extensão .sass e significa Sintatically Awesome Style Sheets.

SCSS

usa extensão .scss e significa Sassy Cascadig Style Sheets.

SCSS estende CSS com algumas características interessantes:

1. Regras aninhadas. É possível incluir especificações dentro de outras. Por exemplo, para fazer com que parágrafos dentro de div's da classe destaque apareçam em azul:

   .destaque {
       background-color: #222;
       p {
           color: blue;
       }
   }
   

   Em CSS precisaríamos escrever

   .destaque {
       background-color: #222;
   }
   .destaque p {
       color: blue;
   }
   

2. Variáveis mais flexíveis. Em CCS podemos usar variáveis com a função var() e elas devem começar com --. Em SCSS elas começam com $ e são usadas e interpoladas normalmente, como em Ruby.
3. Algo similar acontece com operadores. Em CSS é preciso usar calc, mas em SCSS o uso é direto e mais simples.
4. Pode-se definir funções.
5. Possui controle de fluxo para a geração de código: for, while, if e else.
6. Permite o uso Mixins, neste caso um conjunto de propriedades que podem ser incluídas em qualquer regra.

Os arquivos SCSS podem ser colocados na pasta app/assets/stylesheets, todos os arquivos são lidos e os estilos incorporados às páginas geradas.

Use classes especiais para cada parte da página e identificadores apenas para elementos muito específicos. Rails usa a extensão dos arquivos para saber como processá-los (css, scss ou sass).

Por exemplo, uma barra de navegação (nav), pode ser estilizada a partir de uma lista de links com estes registros CSS:

navbar{
    background-color: #eee;
    height: 50px;
    display: flex;
}

navbar ul {
  list-style: none;
  text-align: center;
  margin: auto;
}

navbar li {
    float: left;
    font-size: 24pt;
    text-decoration: none;
    width: 200pt;
}

navbar a {
    text-decoration: none;
}