O que é SASS?
Author: Sara Silva - Postado em: 02/07/2013
Relacionado as categorias: Design, Tecnologia | Leave a Comment
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.
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)
Comments
Leave a Reply