12

Hoje em dia o dinamismo na produção de estilos para uma página ou um conjunto de páginas é essencial para o desenvolvedor.
E o CSS as vezes torna-se um tanto complexo com seletores complicados, repetitivos e com muita matemática.

Uma tecnologia capaz de contornar essa dificuldade seria na construção do estilo de paginas HTML seria uma ferramenta vital. Gostaria de uma explicação sobre o SASS pois, outro dia um amigo meu disse o professor havia programado o CSS?
E eu me perguntei se tal feito seria possível?

  • O que faz o SASS exatamente?
  • Ele é um pré-processador?
  • Em que linguagem o SASS é compilado?
  • O que é necessário para usá-lo na produção de estilos?
  • Como chamo ele em uma pagina HTML?
  • Seria possível algum exemplo?
3
  • 6
    Possível duplicata de Qual é a diferença entre SASS e SCSS
    – gustavox
    Commented 10/10/2015 às 0:19
  • 1
    @gustavox, obrigado pela atenção cara! Não seria uma duplicata porque eu não conheço nem o SASS e muito menos SCSS!! Commented 10/10/2015 às 0:23
  • 2
    Então, é que pensei que pensei que já resolveria, depois que vi as subperguntas... foi mal. No fundo tbm gostaria de uma resposta sobre isso padrão SOpt :) mas profetizo o seguinte (torcendo pra que não kkk): Pendente: ampla. :-) Em tempo: +1
    – gustavox
    Commented 10/10/2015 às 0:28

1 Resposta 1

12

O SASS, como você mesmo disse, é um pré-processador. A ideia de usar o SASS é justamente estender o CSS com algumas funcionalidades que tornem a tarefa de escrever folhas de estilo mais fácil. Algumas dessas funcionalidades são nesting, mixins e variáveis.

A parte mais importante do SASS é que ele não existe como um substituto do CSS. Dessa forma, você nunca vai incluir um arquivo de código SASS em suas páginas. A ideia do SASS é outra: ele te fornece uma sintaxe na qual você escreve suas folhas de estilo com as funcionalidades adicionais. Após isso, um pré-processador faz o trabalho de "traduzir" tudo isso para CSS convencional que finalmente pode ser incluído nas suas páginas HTML.

Com isso, você pode pensar no SASS como um facilitador. As suas funcionalidades são, na verdade, meios mais enxutos e organizados de fazer coisas usuais do CSS. Dessa maneira, quando você pergunta em que linguagem ele é compilado, acredito que o mais correto seria dizer que ele é processado e se torna CSS usual.

Para usá-lo na produção de estilos, tudo que é necessário é aprender as funcionalidades do SASS, codificar suas folhas de estilo utilizando essas funcionalidades e então utilizar o pré-processador para traduzir isso para CSS comum. Perceba que nessa tarefa existem diversos facilitadores. Por exemplo, se você conhece o Grunt ou o Gulp, existem meios de automatizar a tarefa de passar suas folhas de estilo SASS pelo pré-processador.

Para deixar mais claro, acredito que de uma forma simplificada o workflow ao utilizar o SASS possa ser resumido da seguinte maneira:

  1. Escreve-se a folha de estilo usando todas as funcionalidades do SASS que achar necessárias. Essas folhas de estilo serão em formato .sass ou .scss, dependendo da sintaxe (o SASS possui duas sintaxes, para mais informações sobre isso veja essa pergunta).

  2. Utiliza-se o pré-processador do SASS para converter as folhas de estilo .sass ou .scss em folhas de estilo .css usuais. Um exemplo de como fazer isso seria instalando a ferramenta de linha de comando do sass e utilizando o comando sass input.scss output.css que converte input.scss para output.css.

  3. Inclui-se as folhas de estilo convertidas, isto é, em formato .css na sua página HTML.

Isso é só uma visão geral do assunto. O mais recomendável é acessar o site do SASS e ler em mais detalhes. Na página "Learn SASS" tem bastante funcionalidades explicadas e na página "Install" tem as instruções necessárias para instalar o SASS e começar a utilizá-lo.

1
  • Deixo meu +1, sanou minhas dúvidas sobre o que é SaSS.
    – Marconi
    Commented 20/06/2017 às 19:00

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .