{"componentChunkName":"component---src-templates-single-template-tsx","path":"/conhecendo-o-pre-processador-sass-parte-1","result":{"data":{"site":{"siteMetadata":{"siteUrl":"https://blog.nandomoreira.dev","author":{"name":"Fernando Moreira","site":"https://nandomoreira.dev","social":{"disqus":"fernandomoreira"}}}},"markdownRemark":{"html":"

Na minha opinião todo desenvolvedor web deveria conhecer algum pré-processador CSS, seja ele Less, SASS, Stylus ou qualquer outro.

\n

Hoje vou começar uma série de artigos com algumas dicas sobre o pré-processador SASS... sei que existem muitos tutoriais e artigos bacanas por ai, mas eu vou explicar o meu ponto de vista sobre essa forma de escrever CSS.

\n

O que é um pré-processador?

\n
\n

Um pré-processador é um programa que recebe texto e efectua conversões léxicas nele. As conversões podem incluir substituição de macros, inclusão condicional e inclusão de outros ficheiros.\nGoogle.com (https://goo.gl/OeWJWB)

\n
\n

Pense num pré-processador como uma nova linguagem para escrever CSS.

\n

Chame de tradutor de linguagem, ou de compilador.. não tem problema, tudo vira CSS no final.

\n

Mas o que é esse tal de SASS?

\n
\n

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.\nsass-lang.com

\n
\n

Resumidamente, SASS é um pré-processador de CSS. Com ele você tem vários recursos que não existem nativamente no CSS, como:

\n\n

Com ele você consegue organizar o seu CSS de forma modular, deixar cada componente em arquivos separados e usando @import importar todos em apenas um arquivo.

\n

Usando herança e variáveis você esquece o famoso Ctrl+C e Ctrl+V.

\n

Cara isso é magnífico, mesmo!

\n

Ok, entendi, agora como eu uso o SASS?

\n

Nosso amigo SASS é uma RubyGem então você precisa ter o Ruby instalado em seu computador.

\n

A instalação é bem simples, tendo o Ruby instalado e funcionando basta rodar o comando abaixo:

\n
sudo gem install sass
\n

Se nada falhar você já tem o SASS instalado em sua máquina, rode sass -v do seu terminal para certificar que tudo ocorreu bem.

\n

123 testando..

\n

Vamos criar um arquivo SASS para teste.

\n

Abra o seu editor favorito, crie um novo arquivo com o seguinte código:

\n
$cor: #006699;\n$bg: #f1f1f1;\n\nbody {\n  background-color: $bg;\n  font-size: 16px;\n}\n\na {\n  color: $cor;\n\n  &:hover,\n  &:focus {\n    text-decoration: none;\n    border-top: 1px dashed $cor;\n  }\n}
\n

Depois salve com a extensão .scss com o nome que preferir.. eu salvei como style.scss.

\n

No terminal rode:

\n
sass --watch style.scss:style.css
\n

No código acima nós executamos o SASS passando o parâmetro --watch para que ele fique assistindo nosso arquivo style.scss, assim a cada Ctrl+S que damos no arquivo ele executa e processa nosso CSS final.

\n

O código processado ficou assim:

\n
.box {\n  background-color: #f1f1f1;\n  font-size: 16px;\n}\n\n.box p {\n  margin: 0;\n}\n\na {\n  color: #006699;\n}\n\na:hover, a:focus {\n  text-decoration: none;\n  border-top: 1px dashed #006699;\n}
\n

Incrível não?!

\n

Esse é só o começo de uma longa jornada com o Pré-processador SASS, logo vou explicar detalhes do código acima e muito mais.

\n

Aguardem..

\n
\n
    \n
  1. Conhecendo o pré-processador SASS - Instalação
    2. \n
  2. Conhecendo o pré-processador SASS - Variáveis
    3. \n
  3. Conhecendo o pré processador SASS - Mixins
    4. \n
  4. Conhecendo o pré processador SASS - Funções
    5. \n
  5. Conhecendo o pré-processador SASS - Placeholder
    6. \n
","excerpt":"Na minha opinião todo desenvolvedor web deveria conhecer algum pré-processador CSS, seja ele , , ou qualquer outro. Hoje vou começar uma série de…","timeToRead":3,"frontmatter":{"category":["SASS"],"date":"há 11 anos","datePublished":"2015-09-01T00:00:00.000Z","description":"Todo desenvolvedor web deveria conhecer algum pré-processador CSS, seja ele Less, SASS, Stylus ou qualquer outro","path":"/conhecendo-o-pre-processador-sass-parte-1","tags":["sass","css","pre-processador"],"title":"#1 - Conhecendo o pré-processador SASS | Instalação","image":{"publicURL":"/static/conhecendo-o-pre-processador-sass-b6a1f24254111b01aa97dae9042b5345.jpg","name":"conhecendo-o-pre-processador-sass"}},"fields":{"readingTime":{"words":510}}}},"pageContext":{}}}