Use o código e tenha 10% de desconto!

Sass Aprendendo pré-processadores CSS

Natan Souza

Prefácio

 

Não importa se você já trabalha com front-end há dois, cinco, ou mesmo dez anos. Nossa área é um ser totalmente orgânico que muda constantemente, o tempo todo. Toda dia surge alguma técnica, framework ou linguagem nova. E caso um desses vire "moda" e caia no gosto dos desevolvedores por algum motivo, lá vamos nós mais uma vez estudar e adaptar nossa rotina para abraçar a novidade.

Sempre há outra opção. Você pode muito bem se fechar na sua zona de conforto e negar tudo de novidade que vem de fora — o que acredito ser uma atitude bem compreensível, visto que o medo do desconhecido está impregnado em nosso DNA. Apesar de compreensível, pessoalmente acredito que essa escolha seja bem perigosa, uma vez que existe muito risco envolvido, e você pode acabar parado no tempo.

Depois de um certo amadurecimento de nossa área, alguns desenvolvedores começaram a ficar chateados por algumas deficiências que o CSS comum tinha na época, como a impossibilidade de criar variáveis ou mesmo aninhar regras CSS. Isso foi um dos motivos de começarem a surgir tecnologias que suprissem essas necessidades, os chamados pré-processadores CSS. 

Isso aconteceu aproximadamente de 2006 para cá, e os que mais se destacaram foram o Sass e o LESS. Ambos começaram a ser assunto de posts e palestras poucos anos depois em toda a área de front-end. E até outros grandes nomes surgiram, como o Myth e o Stylus, tendo este último ganhado muitos holofotes de uns tempos para cá.

O problema de qualquer pré-processador, pegando o Sass e o LESS como exemplo, é que os browsers não os entendem nativamente, mesmo sendo linguagens de estilos. A única linguagem desse tipo que os browsers compreendem atualmente é o bom e velho CSS. E é justamente por esse motivo que é necessário pegar códigos feitos em Sass/LESS/SeuPreProcessadorFavoritoAqui e compilá-los em CSS comum, para que assim o browser consiga entendê-lo de fato.

Com isso em mente, um pré-processador é basicamente um programa que pega alguns dados como entrada, e devolve-os de uma forma diferente, tal que outro programa consiga entendê-los. No nosso caso, aqui neste livro, os dados de entrada serão arquivos .scss ou .sass , que são compilados em um arquivo .css , podendo assim ser lido pelos browsers. 

Algumas empresas que atualmente utilizam o Sass como préprocessador são o Dropbox, o Walmart e o Airbnb!

O objetivo deste livro é mostrar de forma totalmente prática o Sass, mostrando algumas de suas funcionalidades por um caminho mais "mão na massa", e menos documentação. E por qual razão escolher o Sass? Simplesmente é o pré-processador mais utilizado atualmente.

Como pré-requisitos, é fortemente aconselhável que você já conheça bem HTML5 e CSS3. Este livro é focado em apresentar o vasto mundo de pré-processadores para quem nunca teve contato com nenhum deles, seja Sass, LESS ou Stylus. Pronto? Então vamos!

Sumário

  • 1 Preparando o ambiente
    • 1.1 Instale o Ruby
    • 1.2 Instalando o Sass
    • 1.3 Usa Mac ou Linux?
    • 1.4 Resumo
  • 2 O projeto Apeperia
    • 2.1 Apresentando o projeto
    • 2.2 Dando uma olhada no código
    • 2.3 E lá vêm as alterações
    • 2.4 A primeira variável
    • 2.5 Compilando automaticamente
    • 2.6 Resumo
  • 3 Reutilizando seu código com mixins
    • 3.1 Mais um mixin
    • 3.2 Evitando criar mixins loucamente
    • 3.3 Isolando o image replacement
    • 3.4 Resumo
  • 4 Um perigoso atalho no código
    • 4.1 E no mobile?
    • 4.2 Mais um exemplo
    • 4.3 Resumo
  • 5 Organizando a bagunça
    • 5.1 Cada um no seu quadrado
    • 5.2 Unidos somos mais rápidos
    • 5.3 Resumo
  • 6 Cores de forma mais fácil
    • 6.1 Claro! E escuro?
    • 6.2 Comentando seu código
    • 6.3 Resumo
  • 7 Melhorando a performance com extends e placeholders
    • 7.1 Praticando mais
    • 7.2 Mixins e extends: quando usar um ou outro?
    • 7.3 Resumo
  • 8 Aproximando regras CSS e media queries
    • 8.1 Variável na media query
    • 8.2 Isolando regras inteiras
    • 8.3 Resumo
  • 9 Códigos prontos com Compass
    • 9.1 Instalando o Compass e deixando de vigia
    • 9.2 Limpando um pouco a sujeira
    • 9.3 Abrindo a caixa de ferramentas
    • 9.4 Terceirizando geração de sprites
    • 9.5 Configurando tudo para tirarmos férias mais cedo
    • 9.6 Resumo
  • 10 Calculando e retornando valores
    • 10.1 Fazendo o trabalho da calculadora
    • 10.2 Não consigo usar o que não tenho
    • 10.3 Retornando coisas
    • 10.4 Arredondando a galera
    • 10.5 Resumo
  • 11 Conselhos finais
    • 11.1 Qual o melhor pré-processador?
    • 11.2 Outras features
    • 11.3 Links da saideira

Dados do produto

Número de páginas:
152
ISBN:
978-85-5519-204-3
Data publicação:
08/2016

Compartilhe!

Compartilhe no Facebook Compartilhe no Twitter