Sass Color Functions — Parte 1

Um mergulho colorido no mundo do Sass

Neste segundo post sobre o Sass, como prometido no anterior, farei um overview sobre estas que quase sempre são esquecidas mas que podem ter grande utilidade no seu projeto.

Para acompanhar a leitura, o som nostálgico de Sex on Fire do Kings of Leon é uma boa pedida!

Existem 3 tipos de color functions no Sass: Sass Get Color Functions, Sass Set Color Functions, Sass Manipulate Color Functions. Por serem 25, dividerei em 3 artigos para poder ter uma abordagem melhor sobre cada uma sem tornar o texto cansativo.

Sass Set Color Functions

Neste grupo temos 3 funções: complement, invert e grayscale.

Complement(cor)

Esta função monoparamétrica retorna a cor complementar à que foi requisitada, é muito útil para evitar a ilegibilidade e também para achar cores que se completem em um layout.

Invert(cor, porcentagem)

Muito similar à Complement já que o conceito de cores complementares diz que a mesma é o inverso da cor original, porem nesta é possível dizer em porcentagem o grau de inversão desejado, como no exemplo abaixo:

Grayscale(cor)

Esta retorna escala de cinza da cor desejada, pode ser muito útil em efeitos de hover e pode ser combinada com outras funções para ter um efeito mais legal ainda, olhem como é simples o uso:

To be continued…

No próximo artigo iremos falar sobre as Sass Manipulate Color Functions, o maior grupo de funções do Sass. Por serem um pouco mais complexas, trarei mais de 1 exemplo de cada uma e explicarei maneiras interessantes de aplicá-las em sua rotina de programação.

Observem que desta vez ao invés de prints, preferi trazer embeds interativos do codepen para ficar mais clara a aplicação no código. É uma maneira também de disponibilizar os exemplos para uso ❤.

Nos vemos em breve ❤