Sass+Compass: Front-end Profissional

Fala Galera!

Hoje vamos falar um pouco sobre desenvolvimento web, mais precisamente ao que tange aos estilos de folha, mais conhecidos como CSS. Se você é um desenvolvedor web front-end provavelmente já teve que lidar com ele e suas regras para que o layout do site fique “bonitinho”. Um grande problema enfrentado ao criar os estilos para CSS é a repetição de seletores e estilos a serem criados para que o layout desejado seja atendido. Quantas vezes você queria tornar um estilo em um componente podendo reutilizar ele em vários momentos? Quantas linhas de código você já teve que reescrever para criar estilos aninhados? Pois é, seus problemas acabaram com os pré processadores de CSS. Abaixo segue uma talk minha que realizamos aqui na uMov.me

O Sass é escrito em Ruby e roda de maneira server-side que pode ser instalado através da gem do Ruby. Atualmente ele possui duas versões, uma mais atual e utilizada chamada de SCSS que suporta CSS3 e que possui uma familiaridade com o CSS na sua identação e estrutura. Também possui uma versão mais antiga chamada SASS que exclui os colchetes e ponto-virgula da sua estrutura. Sua documentação é bem vasta, intuitiva e possui um excelente tutorial.

O Compass é um framework open-source para CSS que se utiliza do próprio Sass para criar folhas de estilos de forma poderosa e fácil. Ela também dispõe da possibilidade de minificar seus CSS, tornando eles menores em seu tamanho e consequentemente obtendo uma renderização mais rápida. Para maiores informações existe este ótimo tutorial demonstrando boas práticas e seu poder.

Deixo para vocês o link do projeto no GitHub ao qual foi feito no vídeo.

Valeu Pessoal!

Até a próxima!

Anúncios

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s