Sass Aprendendo pré-processadores CSS
Natan SouzaPrefá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:
- 162
- ISBN:
- 978-85-5519-204-3
- Data publicação:
- 08/2016