Gabriel Medina
Sou front-end developer. Formado em Tecnologia em Análise e Desenvolvimento de Sistemas, pelo Instituto Federal de Mato Grosso do Sul.
github.com/gabrielmedina
Tecnologia em Análise e Desenvolvimento de Sistemas no Instituto Federal de Mato Grosso do Sul (IFMS)
Front-end Developer na Agência W3Case
sass-lang.com
Thaiana Poplade
http://tableless.com.br/sass-um-outro-metodo-de-escrever-css/
Syntactically Awesome StyleSheets
Folhas de estilo sintaticamente impressionantes
Sass é uma gem do Ruby. Funciona como uma extensão das CSS que adiciona potência e elegância para a linguagem básica.
Permite que você use variáveis, regras aninhadas, mixins, heranças, e muito mais, tudo com uma sintaxe totalmente compatível com CSS.
Caso possua o Ruby instalado
gem install sass
Sass para Windows, Linux ou Mac.
Existem duas formas de codificar utilizando o Sass, são elas:
SCSS - Sassy CSS
h1 {
color: #fff;
background: #999;
}
Indented Sass
h1
color: #fff
background: #999
style.scss
style.sass
Compilando o arquivo
sass estilos.scss:estilos.css
Comando de observação
sass --watch estilos.scss:estilos.css
Embora o estilo de saída gerado pelo Sass seja muito bom, gostos e necessidades variam, sendo assim, Sass permite que você escolha entre quatro estilos de saída.
Para definir o estilo de saída desejado, basta utilizar a flag --style.
sass estilos.scss:estilos.css --style opção
Estilo de saída
É o estilo de saída padrão gerado pelo Sass. Reflete a arquitetura de um documento Web, o famoso DOM (Document Object Model), fazendo com que cada propriedade e valor ocupem uma linha e as regras recuem de acordo com o DOM.
Estilo de saída
sass estilos.scss:estilos.css
sass estilos.scss:estilos.css --style nested
Estilo de saída
É o estilo de saída que mais se assemelha ao feito pelo homem. Cada propriedade e valor ocupam uma linha, e as regras não sofrem recuos, como no estilo aninhado.
sass estilos.scss:estilos.css --style expanded
Estilo de saída
É um estilo de saída que se preocupa com a compactação. Faz com que cada regra ocupe uma linha.
sass estilos.scss:estilos.css --style compact
Estilo de saída
É o estilo de saída recomendado para produção. Faz com que a saída ocupe o mínimo de espaço possível, retirando todos os espaços em branco permitidos.
sass estilos.scss:estilos.css --style compressed
Sass aceita comentário de várias linhas /**/, bem como os de única //
// Comentário
/*
* Comentário
*/
Sass permite que as regras sejam aninhadas.
nav {
background: blue;
ul {
list-style: none;
li {
display: inline-block;
a {
display: block;
}
}
}
}
Saída gerada pelo Sass
nav {
background: blue;
}
nav ul {
list-style: none;
}
nav ul li {
display: inline-block;
}
nav ul li a {
display: block;
}
nav {
background: blue;
ul {
list-style: none;
}
li {
display: inline-block;
}
a {
display: block;
}
}
Use o aninhamento com consciência!
Saída gerada pelo Sass
nav {
background: blue;
}
nav ul {
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
}
Utilizar pseudo-elementos ficou mais simples, basta utilizar o &: de forma aninhada.
nav {
background: blue;
ul {
list-style: none;
}
li {
display: inline-block;
}
a {
display: block;
&:hover {
color: red;
}
}
}
Saída gerada pelo Sass
nav {
background: blue;
}
nav ul {
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
}
nav a:hover {
color: red;
}
São definidas de forma simples e podem ser reutilizadas.
$width: 100%;
$height: 40px;
header {
width: $width;
height: $height;
}
$background: #FFF;
$text: #444;
section {
color: $text;
background: $background;
}
Sass permite realizarmos algumas operações.
$x: 100px;
$y: 200px;
article {
width: $x + $y; // 300px
heigth: $y - 150px; // 50px
margin: $x / 20px; // 20px
padding: ($x / 50px) * 5px; // 10px
}
Permitir a importação de vários arquivos Sass. Seu diferencial, quanto ao import das CSS é a unificação, compactando todas folhas em apenas um arquivo de saída.
@import "variables";
section {
width: $width;
height: $height;
color: $color;
font-size: $size;
}
Que tal um arquivo mestre, contendo todos os imports.
@import "reset";
@import "variables";
@import "default";
@import "header";
@import "buttons";
@import "forms";
@import "lists";
@import "tables";
@import "messages";
@import "footer";
Permite que uma classe estenda um conjunto de propriedades definidas em outra classe, ou seja, herança de propriedades.
@import "variables";
.btn {
display: inline-block;
color: $text-default;
font-size: 1.4em;
padding: 10px 20px;
background: $background-default;
}
.btn-success {
@extend .btn;
color: $text-success;
background: $background-success;
}
.btn-danger {
@extend .btn;
color: $text-danger;
background: $background-danger;
}
Caso precise somente estender algumas propriedades, sem que a class ou id permaneça no arquivo de saída, basta utilizar o placeholder selector (seletores de espaço reservado).
@import "variables";
%btn {
display: inline-block;
color: $text-default;
font-size: 1.4em;
padding: 10px 20px;
background: $background-default;
}
.btn-success {
@extend %btn;
color: $text-success;
background: $background-success;
}
.btn-danger {
@extend %btn;
color: $text-danger;
background: $background-danger;
}
Permitem definir estilos que podem ser reutilizados em toda a folha de estilo, sem a necessidade de declararmos todas as propriedades novamente.
@mixin clearfix {
display: inline-block;
&:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
* html & { height: 1px }
}
Utilizando o mixin declarado em uma regra
header {
@include clearfix;
background: red;
}
Declarando um mixin com parâmetros
@mixin transition($property, $duration, $timing, $delay){
transition: $property $duration $timing $delay;
-webkit-transition: $property $duration $timing $delay;
-moz-transition: $property $duration $timing $delay;
-ms-transition: $property $duration $timing $delay;
-o-transition: $property $duration $timing $delay;
}
Utilizando o mixin declarado
nav {
a {
@include transition(background, .2s, ease, 1s);
}
}
Declarando um mixin com parâmetros, de uma forma mais eficiente.
@mixin transition($properties){
transition: $properties;
-webkit-transition: $properties;
-moz-transition: $properties;
-ms-transition: $properties;
-o-transition: $properties;
}
Utilizando o mixin declarado
nav {
a {
@include transition(.2s ease);
}
}
.pagination {
a {
@include transition(background .2s ease);
}
}
github.com/gabrielmedina
Documentação oficial do Sass (última consulta em 2014)
http://sass-lang.com/documentation
Sass - Um outro método de escrever CSS (última consulta em 2014)
http://tableless.com.br/sass-um-outro-metodo-de-escrever-css
By Gabriel Medina
Uma nova forma de escrever CSS
Sou front-end developer. Formado em Tecnologia em Análise e Desenvolvimento de Sistemas, pelo Instituto Federal de Mato Grosso do Sul.