Seja bem-vindo Sass 3.3

E saiu a release 3.3 do Sass. Dentre muitas correções de bugs algumas melhorias importantes vieram nessa versão Maptastic Maple (codename da 3.3). No site você pode conferir o changelog completo.

Vão aí alguns updates que achei bem bacana.

Finalmente, Source Maps

Até então tínhamos que utilizar a versão 3.3.0alpha pra usar o source maps, como descreve esse artigo do Chrome Developer Tools. Como a versão alpha virou release, agora você pode usar com mais tranquilidade essa feature. Pra saber como utilizar confira esse artigo completo do Tim Lucas, https://medium.com/what-i-learned-building/b4daab987fb0

Maps, um novo tipo de variável

Quando lidamos com dados, quanto maior o número de tipos, melhor. Já tínhamos list, onde era possível passar uma lista de argumentos, como:

$colors: red pink blue;

@each $button-color in $colors {
    .button-#{$button-color} {
        color: $button-color;
    }
}

O que geraria:

.button-red { color: red }
.button-pink { color: pink }
.button-blue { color: blue }

O que maps faz é a função de uma hash ou um objeto no javascript: organizar os dados com uma key e um value.

E isso é muito útil pra algumas funcionalidades que você pode adicionar ao seu CSS, como veremos abaixo.

// um map profile_themes

$profile_themes: ( 
  basic: (
    title: (
      color: blue,
      font-family: Arial
    ),
    subtitle: (
      color: red,
      font-family: Tahoma
    )
  ),
  experimental: (
    title: (
      color: #000,
      font-family: Verdana
    ),
    subtitle: (
      color: #CCC,
      font-family: Tahoma
    )        
  )
);

Com esse map podemos brincar um pouco da seguinte forma:

// itera o map com os temas
@each $theme_name, $theme_items in $profile_themes {

  // printa o nome do tema como classe
  .theme-#{$theme_name} {

    // pra cada tema vamos iterar as propriedades
    @each $theme_properties_name, $theme_properties in $theme_items {

      // printa o nome da propiedade
      .#{$theme_properties_name} {

      // pra cada propriedade vamos inserir os atributos
      @each $item_attr, $item_value in $theme_properties {

          // printa o atributo e o valor dele
          #{$item_attr}: $item_value;

        }
      }
    }
  }
}

Com isso tudo, o seguinte CSS é gerado:

.theme-basic .title {
  color: blue;
  font-family: Arial;
}
.theme-basic .subtitle {
  color: red;
  font-family: Tahoma;
}

.theme-experimental .title {
  color: black;
  font-family: Verdana;
}
.theme-experimental .subtitle {
  color: #cccccc;
  font-family: Tahoma;
}

Veja aqui o exemplo no SassMeister

Viu como isso pode ser útil? Pense nesse map sendo alimentado por um banco de dados atrelado com as informações do usuário, como configurações de layout de um site qualquer. Dá até para o usuário brincar de construir seu próprio tema :)

@at-root

Essa é outra feature nova que me deixou animado com a evolução do Sass.

Imagina que você tenha o seguinte cenário:

.container-text {
    font-size: 18px;
}

.post {
    color: #333;
    .container-text {
        font-size: 14px;
    }
}

Dentro de .post temos um .container-textque tem font-size: 14px. Mas acima dele, temos outro .container-text com font-size: 18px. Ou seja, no root, @at-root, temos um .container-textque tem outra propriedade global, não específica pra .post.

Isso significa que eu posso, dentro de uma class nested definir propriedades específicas ao root, que seja livres de especificidades quaisquer. Veja o exemplo:

.post {
    color: #333;
    .link { 
        color: blue;
    }
    @at-root .link {
        color: red;
    }
}

Veja aqui o exemplo no SassMeister

Removemos a necessidade de declarar o .link fora da classe .post usando o @at-root.

DISCLAIMER

Essa funcionalidade é útil em alguns casos e pode ser perigosa em outros. Você precisa ficar atento nas declarações de futuras classes pra que não conflitem com as que foram definidas com @at-root.

Uma coisa que senti falta nessa feature é o uso do referencing parent, exemplo:

.post {
    color: #333;
    .link {
        color: #999;
        &@at-root {
            color: red
        }
    }
}

Parece feia essa forma de declarar um elemento, mas nesse caso removeríamos a necessidade de declarar o @at-root .link novamente. Quem sabe numa futura versão veremos algo do tipo?

Correção de bugs e outras implementações

Pra conferir mais mudanças e correções de bug, sugiro que você dê uma boa lida no Changelog da versão 3.3. Tem bastante coisa ali que precisamos prestar atenção, como por exemplo o uso do @extend, seja dentro de um contexto @media (que vai retornar um erro) ou seja ao tentar extender um seletor inexistente (que também vai retornar um erro).

2014-03-10 15h10 UPDATE

O Compass, um dos principais frameworks Sass, com um conjunto enorme de mixins pra CSS3 e outros helpers, ainda está quebrando com essa migração do Sass (pelo menos no teste que fiz numa aplicação em Rails). Acredito que logo corrijam, mas fique ligado nisso caso use algum outro framework.

comments powered by Disqus