1 - As funções do sass é basicamente um conjunto de instruções que a gente executa para que nós retorne determinado valor. Criar as funções é algo bem mais complexo que não é necessário que abordemos aqui, até por que é muito pouco comum se criar funções, tendo em vista que o sass já disponibiliza várias dessas funções de forma útil.
2 - Lista de funções onde você pode escolher a que se adeque ao que você precisa: https://www.w3schools.com/sass/sass_functions_string.php no lado direito tem as abas de onde você pode ver e explorar cada área das funções, nessa aula iremos ver das cores.
3 - Iremos abordar apenas uma, para você entender como funciona e como usar as outras.
Essa é uma função bem simples, que vai juntar duas cores em um elemento que você queira, com um "peso" de junção de elementos.
.title{ color: mix(red, blue, 50%)
}
4 - Você vai acessar o site, ir buscando e testando as funções, pode ver que cada seção de funções tem um título que explica para o que serve as funções seguinte.
5 - Para criar uma função é muito simples, vamos criar aqui uma função de background color detect
@function background-color($background) {
@if (lightness($background) > 50) {
@return black;
} @else {
@return white;
}
} ;
@mixin background-mixin($color-bg) {
background-color: $color-bg;
color: text-color($color-bg);
}
.title {
height: 100vh;
@include background-mixin(black);
}