Skip to content

Latest commit

 

History

History
111 lines (72 loc) · 2.99 KB

functions.md

File metadata and controls

111 lines (72 loc) · 2.99 KB

#Funções

O Sass possui algumas funções nativas e também possibilita que sejam criadas novas funções.

##Criando uma função

A declaração de uma função começa com @function, em seguida vem o nome da função, que pode conter qualquer combinação de caracteres alfabéticos e numéricos sem espaços, os argumentos entre parênteses e a definição da função entre chaves.

As funções podem acessar quaisquer variáveis definidas globalmente. Uma função pode ter várias declarações contidas dentro dela, é necessário utilizar o @return para definir o valor de retorno da função.

@function calc-fluid($target, $container) {
  @return ($target / $container) * 100%;
}

##Utilizando uma função

Para utilizar uma função basta colocar o nome e passar os argumentos:

div {
  width: calc-fluid(650px, 1000px);
}

Será compilado para:

div {
  width: 65%;
}

##Funções Nativas

Nesta apostila serão mostradas algumas das principais funções nativas do Sass. É possível consultar uma lista com todas as funções nativas no site do Sass.

###Funções de cor

  • rgb($red, $green, $blue) Retorna uma cor de acordo com os valores passados para o vermelho, verde e azul.

  • rgba($red, $green, $blue, $alpha) Retorna uma cor de acordo com os valores passados para o vermelho, verde, azul e alpha.

  • lighten($color, $amount) Retorna a cor mais clara de acordo com a cor e porcentagem de claridade passada como argumento.

  • darken($color, $amount) Escurece a cor de acordo porcentagem passada como argumento.

###Funções com strings

  • unquote($string) Remove as aspas de uma string

  • quote($string) Adiciona aspas em uma string

  • str-length($string) Retorna a quantidade de caracteres de uma string

  • to-upper-case($string) Retorna a string em letras maiúsculas

  • to-lower-case($string) Retorna a string em letras minúsculas

###Funções com números

  • percentage($number) Converte um número sem unidade a uma percentagem

  • round($number) Arredonda um número para o número inteiro mais próximo

  • ceil($number) Arredonda um número até o próximo número inteiro

  • floor($number) Arredonda um número para baixo para o número inteiro anterior

###Funções com listas

  • length($list) Retorna a quantidade de itens de uma lista

  • nth($list, $n) Retorna um item específico em uma lista

  • join($list1, $list2, [$separator]) Junta duas listas em uma

  • append($list1, $val, [$separator]) Acrescenta um valor único no fim da lista

###Funções com maps

  • map-merge($map1, $map2) Une dois maps em um só map

  • map-keys($map) Retorna uma lista de todas as chaves de um map

  • map-values($map) Retorna uma lista de todos os valores de map


<< Mixins | Placeholders >>