UI2Code

Começando com SASS

Imagem para Começando com SASS

CssPostado em  5 min de leitura

Sass (Syntactically Awesome Stylesheets) é um pré-prcessador de CSS, onde podemos definir variáveis ​​e reutilizá-las para um projeto inteiro. Você também pode gerar classes e reutilizar trechos de código com "mixins" ou "estender" suas classes com propriedades usadas anteriormente. Todos estes são análogos às funções em linguagens de programação, pois podemos aplicar os conceitos de programação orientada a objetos.

Sass consiste em duas sintaxes. A sintaxe original (.sass), chamado de sintaxe de indentação, usa uma sintaxe semelhante ao Haml. Ele usa indentação para bloco de código separados e caracteres de nova linha para separar regras. A sintaxe (.scss), usa bloco de formatação CSS, usando chaves para denotar blocos de código e ponto e vírgula após os valores das propriedades.

// SASS
$font-stack:    Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color

// SCSS
$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

Particularmente eu prefiro a sintaxe (.scss), por ser mais próximo da sintaxe CSS.

Instalação

Para utilizar o SASS, você precisa ter o Ruby, instalado na máquina. O site do SASS, mostra 2 formas de instalação do mesmo.

Praticamente sempre uso a forma, utilizando o terminal:

gem install sass

Para verificarmos se o mesmo está instalando, podemos conferir com o comando:

sass -v

Utilização

Após a instalação, se tem várias formas para rodar o pré-processador. Você pode usar um software como o Koala, usar um automatizador de tarefas como Grunt (grunt-sass) ou Gulp (gulp-sass), ou o próprio terminal.

Como exemplo, podemos usar o terminal:

  • **watch ** - flag para que sempre quando tenha alteração dos arquivos .scss que estão sendo observados, seja gerado o css
  • style.scss - [caminho da pasta dos arquivos scss ou caminho + nome especifico do arquivo a ser observado]
  • style.css - [caminho da pasta de destino ou caminho + nome especifico do arquivo a ser gerado]
// sass --watch source/
// sass --watch source/style.scss
// sass --watch source/:dist/
sass --watch style.scss:style.css

Um ponto importante ao se observar uma pasta, é com relação aos arquivos que serão gerados. Digamos que na pasta source/, temos 3 arquivos e queremos que apenas 2 sejam gerados. Resolvemos isso com o prefixo _(undescore).

// _variables.scss
// styleguide.scss
// style.scss

Nos arquivos que estão sendo observados, importamos o arquivo de variáveis.

// styleguide.scss
// style.scss
@import '_variables';

Variáveis

Todas as variáveis devem ser definidas usando um prefixo $.

// SASS
$color-alpha: rgba(0,0,0,0.8)
$color-typography-primary: #ffffff
$font-size-large: 32px

.title
  background: $color-alpha
  color: $color-typography-primary
  font-size: $font-size-large

// SCSS
$color-alpha: rgba(0, 0, 0, 0.8);
$color-typography-primary: #ffffff;
$font-size-large: 32px;

.title {
  background: $color-alpha;
  color: $color-typography-primary;
  font-size: $font-size-large;
}

/* CSS */
.title {
  background: rgba(0, 0, 0, 0.8);
  color: #ffffff;
  font-size: 32px;
}

Seletores aninhados

Com o Sass, você pode aninhar os seus seletores CSS, evitando a repetição de escrita. Mas cuidado, não podemos exagerar nos níveis, senão a manutenção fica inviável.

// SCSS
// Não faça isso !!!!
ul {
  li {
    .link {
      .text {
        color: red;
      }
    }
  }
}

// CSS
ul li .link .text {
  color: red;
}

Vamos para a boa prática e também utilizar o caractere &, que representa o seletor pai.

// SCSS
.link {
  color: blue;

  &:hover {
    color: yellow;
  }

  &:before {
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #f00;
    content: '';
    display: inline-block;
    height: 0;
    width: 0;
  }
}

.widget {
  .link {
    background: #a1a1a1;
  }
}

// SASS
.link
  color: blue

  &:hover
    color: yellow

  &:before
    border-left: 10px solid transparent
    border-right: 10px solid transparent
    border-top: 10px solid #f00
    content: ""
    display: inline-block
    height: 0
    width: 0

.widget
  .link
    background: #a1a1a1

/* CSS */
.link {
  color: blue;
}
.link:hover {
  color: yellow;
}
.link:before {
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #f00;
  content: '';
  display: inline-block;
  height: 0;
  width: 0;
}

.widget .link {
  background: #a1a1a1;
}

Mixins

Os mixins permitem que você reutilize propriedades CSS e seletores. No SCSS, precisamos definir o @mixin e atribuir um nome. Depois, podemos acrescentar algumas propriedades, criar uma classe ou elemento e utilizar com @include. Na sintaxe original, é um pouco diferente e podemos comparar abaixo:

// SASS
=border-radius($radius)
  -webkit-border-radius: $radius
  -moz-border-radius:    $radius
  -ms-border-radius:     $radius
  border-radius:         $radius

.box
  +border-radius(10px)

// SCSS
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  -ms-border-radius: $radius;
  border-radius: $radius;
}

.box {
  @include border-radius(10px);
}

/* CSS */
.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

Funções

Semelhante a um mixin, as funções permitem parâmetros, mas não retornam trechos de código e sim um valor.

// SCSS
$total-width: 100%;
$total-columns: 12;

@function x-gridsystem-width($columns) {
  @return ($total-width / $total-columns) * $columns;
}

.box {
  width: x-gridsystem-width(6);
}

// SASS
$total-width: 100%
$total-columns: 12

@function x-gridsystem-width($columns)
  @return ($total-width / $total-columns) * $columns

.box
  width: x-gridsystem-width(6)

/* CSS */
.box {
  width: 50%;
}

Extend

Com SASS você pode fazer com que um selector herde os estilos de outro, sem duplicar as propriedades CSS. Tenha em mente que se você tem muitas propriedades duplicadas, você poderá enfrentar problemas de desempenho. Este recurso permite que você herde qualquer estilo já utilizado em qualquer classe anterior.

Vamos dizer que eu quero usar as propriedades de ".message" em ".success" e ".error". Para atingir este objetivo é necessário criar ".success" , ".error" e acrescentar "@extend .message".

// SASS
.message
  border: 1px solid #ccc
  padding: 10px
  color: #333

.success
  @extend .message
  border-color: green

.error
  @extend .message
  border-color: red

// SCSS
.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;
}

.error {
  @extend .message;
  border-color: red;
}

/* CSS */
.message,
.success,
.error {
  border: 1px solid #cccccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

Placeholders

O placeholder é semelhante ao @extend, com a diferença que ele funciona como uma variável (Se não for utilizado, não aparece no CSS final).

// SASS
%message
  border: 1px solid #ccc
  padding: 10px
  color: #333

.success
  @extend %message
  border-color: green

.error
  @extend %message
  border-color: red

// SCSS
%message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend %message;
  border-color: green;
}

.error {
  @extend %message;
  border-color: red;
}

/* CSS */
.success,
.error {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

Conclusão

O CSS é muito importante para um projeto web. E é muito importante ter um pré-processador para organizar, reutilizar código e facilitar muito na manutenção. O SASS oferece muitos recursos e não vejo desvantagens, sendo comparado ao se escrever com apenas em CSS puro. Temos outros pré-processadores no mercado, e veremos em outros artigos.

UI2Code

Autor

Hemerson Vianna

github: ui2code

twitter: ui2code