O que é SASS?

Author: Sara Silva - Postado em: 02/07/2013
Relacionado as categorias: Design, Tecnologia |  





Um pouco de história

A World Wide Web já foi um local onde o design ou a estética, não eram importantes ou eram menos importantes que hoje. Mas em 1994, Hakom Wium Lie propôs a criação de uma linguagem que permitisse separar a parte visual da estrutura de uma página web, nascia então o CSS (Cascade Style Sheet). Desde então, o CSS vem evoluindo conforme a evolução dos próprios browsers.

Atualmente estamos na versão 3.0 das especificações do CS, ou melhor, o CSS3.

Sintaxe básica

Existem 3 formas de declarar o css de um elemento, porém apenas 1 método é aprovado pelas validações da W3C (World Wide Web Consortium, responsável pelas especificações web):

1 - HTML inline style (não aprovado):
<div style=”font-size: 14px; color: #000”>Qualquer coisa</div>

2 - Style dentro do HEAD (não aprovado):
<style type=”text/css”>Configurações de CSS</style>

3 - Usando a tag link (aprovado):
<link rel=”stylesheet” type=”text/css” href=”arquivo.css”>

O CSS é dividido basicamente entre seletores e configurações.

Os seletores podem ser os próprio elementos em si (div, span, p, etc…), o atributo id de cada elemento (#id) ou a classe, ou atributo class do elemento (.classe).

As configurações são diversas e você pode saber mais no próprio site da W3C http://www.w3.org/Style/CSS/.

O SASS

SASS significa Syntatically Awesome StyleSheet, ou algo parecido com “Folhas de Estilo Sintaticamente Demais”. Por definição, o SASS é uma meta linguagem sobre o CSS que serve para definir o CSS de forma estruturada e de sintaxe mais limpa, permitindo um desenvolvimento mais fácil e rápido que o CSS puro proporciona.

Diferença de sintaxe CSS / SASS

O intuito desse artigo não é ensinar o SASS e sim introduzir um pouco mais sobre essa meta linguagem que pode trazer muitos benefícios a quem desenvolve para web. É possível que no futuro façamos alguns artigos mais detalhados sobre o assunto, portanto fiquem ligados!

Alguns recursos para estudo:

http://sass-lang.com/tutorial.html (site oficial)

http://www.alexweber.com.br/artigos/css-turbinado-com-sass













Comments

Leave a Reply






Últimos posts