Fundação - Funções Sass

O Foundation fornece um conjunto de funções utilitárias SASS, que podem ser usadas com util , cor , seletor , unidade , valor e muito mais.

Você pode importar todos os arquivos de utilitário de uma vez usando a seguinte linha de código -

@import 'util/util';

Você também pode importar arquivos de utilitário individuais, conforme mostrado abaixo -

@import 'util/color';
@import 'util/selector';
@import 'util/unit';
@import 'util/value';

Referência Sass

Você pode alterar os estilos dos componentes usando as seguintes funções SASS.

primeiro plano

Ele fornece a cor de primeiro plano aos elementos com base na cor de fundo. Ele usa o seguinte formato para atribuir diferentes tipos de parâmetros -

foreground($color, $yes, $no, $threshold)

Os parâmetros acima são especificados na tabela a seguir -

Sr. Não.	Parâmetro e Descrição	Tipo	Valor padrão
1	$color Ele verifica a luminosidade da cor.	Cor	Nenhum
2	$yes Se a cor for clara, ele retornará $ yes color.	Cor	$ preto
3	$no Se a cor for escura, ele retornará $ sem cor.	Cor	$ branco
4	$threshold Ele representa o limiar da leveza.	Percentagem	60%

escala inteligente

Fornece cor adequada aos elementos de acordo com sua leveza. Ele usa o seguinte formato para especificar a cor apropriada -

smart-scale($color, $scale, $threshold)

Os parâmetros fornecidos acima são especificados na tabela a seguir -

Sr. Não.	Parâmetro e Descrição	Tipo	Valor padrão
1	$color É usado para dimensionar a cor.	Cor	Nenhum
2	$scale Ele especifica a porcentagem para aumentar ou diminuir.	Percentagem	5%
3	$threshold Ele representa o limiar da leveza.	Percentagem	40%

entradas de texto

Ele cria um seletor ao usar o tipo de entrada de texto. Ele usa o seguinte formato para especificar os tipos de entrada -

text-inputs($types)

Ele usa o parâmetro conforme especificado na tabela a seguir -

Sr. Não.	Parâmetro e Descrição	Tipo	Valor padrão
1	$types Ele fornece vários tipos de entrada de texto para gerar um seletor.	Cor	-

tira

Ele remove a unidade do valor e retorna apenas o número. Ele usa o seguinte formato para remover a unidade do valor -

strip-unit($num)

Ele usa o parâmetro conforme especificado na tabela a seguir -

Sr. Não.	Parâmetro e Descrição	Tipo	Valor padrão
1	$num Ele especifica o número quando você remove a unidade do valor.	Cor	Nenhum

rem-calc

Ele muda o valor do pixel para corresponder aos valores rem. Ele usa o seguinte formato para converter valores de pixel em valores rem -

rem-calc($values, $base)

Ele usa os seguintes parâmetros, conforme especificado na tabela -

Sr. Não.	Parâmetro e Descrição	Tipo	Valor padrão
1	$values Ele converte os valores de pixel em valores rem e os separa usando espaços. Se você estiver convertendo uma lista separada por vírgulas, coloque a lista entre parênteses.	Número ou lista	Nenhum
2	$base Ele fornece o valor base durante a conversão de pixel em valor rem. Se houver valor nulo para a base, a função usará a variável $ base-font-size como base.	Número	nulo

tem valor

Ele especifica o valor se não for falso. Os valores falsos incluem nulo, nenhum, 0 ou uma lista vazia. Ele usa o seguinte formato para especificar o valor -

has-value($val)

Ele usa o parâmetro conforme especificado na tabela a seguir -

Sr. Não.	Parâmetro e Descrição	Tipo	Valor padrão
1	$val Ele verifica o valor especificado.	Misturado	Nenhum

get-side

Ele especifica o lado de um valor e define os valores superior / direito / inferior / esquerdo no preenchimento, margem etc. Ele usa o seguinte formato para especificar o lado de um valor -

has-value($val)

Ele usa os seguintes parâmetros, conforme especificado na tabela -

Sr. Não.	Parâmetro e Descrição	Tipo	Valor padrão
1	$val Ele especifica o lado de um valor.	Lista ou número	Nenhum
2	$side Ele determina em qual lado o valor (superior / direito / inferior / esquerdo) deve retornar.	Palavra-chave	Nenhum

get-border-value

Ele determina o valor da borda de um elemento. Ele usa o seguinte formato para especificar o valor da borda -

get-border-value($val, $elem)

Ele usa os seguintes parâmetros, conforme especificado na tabela -

Sr. Não.	Parâmetro e Descrição	Tipo	Valor padrão
1	$val Ele encontra um valor específico da fronteira.	Lista	Nenhum
2	$elem Ele é usado para extrair o componente da borda.	Palavra-chave	Nenhum