Sass Color Functions — Parte 2
Um mergulho colorido no mundo do Sass
Nesta continuação do último post, trarei a segunda parte do nosso overview sobre as color functions do Sass.
O som de hoje fica por conta de Hard Times, musica do disco mais novo da banda Paramore!
As funções de hoje tem como principio fazer modificações nas cores passadas como parâmetro.
Sass Manipulate Color Functions
Neste grupo, temos 11 funções, mas não se assuste, a maioria delas tem um funcionamento similar, então se você dominar uma, praticamente dominará a maioria.
mix(color1, color2, weight)
De todas, esta é a mais peculiar. Esta função, como o nome já diz, faz um mix entre 2 cores e retora o resultado. O terceiro parâmetro não é obrigatório e funciona como uma especie de divisor que define para qual lado a mistura deverá tender. A medida é de 0 a 100, sendo 50 o meio termo e o valor default.
lighten(color, amount)
Uma funcionalidade excelente para fazer escala de cores, com ela é possível “aumentar o brilho” da cor, gerando assim uma outra cor dentro do mesmo espectro porem com um tom mais claro. O segundo parâmetro aponta o quanto em porcentagem você deseja “clarear” a cor e vai de 0% a 100%, sendo 0% a cor original.
darken(color, amount)
Sua lógica é idêntica à da função anterior, porem invertida, também é muito útil em escala de cores e para encontrar tons da mesma cor.
saturate(color, amount)
Esta função, atua modificando saturação das cores, que é a proporção de quantidade de cor em relação à cor cinza média, quanto maior o amount, segundo parâmetro da função, maior será a saturação da cor.
No exemplo abaixo eu utilizei também a função saturation para medir a saturação da cor.
desaturate(color, amount)
Esta função funciona da maneira inversa à anterior mas se aplicam os mesmos conceitos, neste caso, quando maior o valor do amount, menor a saturação.
adjust-hue(color, degrees)
Atua modificando o hue da cor, ou em português, a Matiz que é a porcentagem de cor pura, sem adição de preto ou branco. Seu segundo parâmetro tem como unidade medida graus que vão de 0deg a 360deg.
adjust-color, change-color e scale-color
Essas 3 funções são muito similares e possuem os mesmos parâmetros:
(color, red, green, blue, hue, saturation, lightness, alpha)
As 3 permitem que você modifique totalmente a estrutura de uma cor ou mexa em uma propriedade específica dela. A diferença entre as elas é percebida melhor de forma prática:
opacify & transparentize(color, amount)
Elas atuam unica e exclusivamente na camada alpha da cor, a opacify (fade-in) incrementa a quantidade de alpha, diminuindo a opacidade da cor, já a transparentize(fade-out) decrementa-a, fazendo assim, o processo inverso.
No Próximo episódio…
No nosso próximo encontro, falaremos sobre as Color Functions de debugs, elas são bem mais simples e podem ser usadas em conjunto com outras funções a fim de verificar os níveis de cor ou de suas propriedades. Será a ultima parte da saga das color functions. :D
Gostou do artigo? Deixe seu Clap e uma sugestão de tema para o futuro ❤
