Fundación - Funciones Sass

Foundation proporciona un conjunto de funciones de utilidad SASS, que se pueden utilizar con util , color , selector , unit , value y muchos más.

Puede importar todos los archivos de utilidades a la vez utilizando la siguiente línea de código:

@import 'util/util';

También puede importar archivos de utilidades individuales como se muestra a continuación:

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

Referencia de Sass

Puede cambiar los estilos de los componentes utilizando las siguientes funciones de SASS.

primer plano

Proporciona el color de primer plano a los elementos según el color de fondo. Utiliza el siguiente formato para asignar diferentes tipos de parámetros:

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

Los parámetros anteriores se especifican en la siguiente tabla:

No Señor. Descripción de parámetros Tipo Valor por defecto
1

$color

Comprueba la claridad del color.

 Color Ninguna
2

$yes

Si el color es claro, devuelve $ yes color.

 Color $ negro
3

$no

Si el color es oscuro, devuelve $ sin color.

 Color $ blanco
4

$threshold

Representa el umbral de la ligereza.

 Porcentaje 60%

escala inteligente

Aporta el color adecuado a los elementos según su ligereza. Utiliza el siguiente formato para especificar el color apropiado:

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

Los parámetros dados anteriormente se especifican en la siguiente tabla:

No Señor. Descripción de parámetros Tipo Valor por defecto
1

$color

Se utiliza para escalar el color.

 Color Ninguna
2

$scale

Especifica el porcentaje para escalar hacia arriba o hacia abajo.

 Porcentaje 5%
3

$threshold

Representa el umbral de la ligereza.

 Porcentaje 40%

entradas de texto

Crea un selector mientras usa el tipo de entrada de texto. Utiliza el siguiente formato para especificar los tipos de entrada:

text-inputs($types)

Utiliza el parámetro como se especifica en la siguiente tabla:

No Señor. Descripción de parámetros Tipo Valor por defecto
1

$types

Proporciona varios tipos de entrada de texto para generar un selector.

 Color -

unidad de tira

Elimina la unidad del valor y devuelve solo el número. Utiliza el siguiente formato para eliminar la unidad del valor:

strip-unit($num)

Utiliza el parámetro como se especifica en la siguiente tabla:

No Señor. Descripción de parámetros Tipo Valor por defecto
1

$num

Especifica el número cuando elimina la unidad del valor.

 Color Ninguna

rem-calc

Cambia el valor de píxel para que coincida con los valores rem. Utiliza el siguiente formato para convertir valores de píxeles en valores rem:

rem-calc($values, $base)

Utiliza los siguientes parámetros como se especifica en la tabla:

No Señor. Descripción de parámetros Tipo Valor por defecto
1

$values

Convierte los valores de los píxeles en valores rem y los separa mediante espacios. Si está convirtiendo una lista separada por comas, ajuste la lista entre paréntesis.

 Número o lista Ninguna
2

$base

Proporciona el valor base mientras convierte el píxel en valor remoto. Si hay un valor nulo para la base, entonces la función usa la variable $ base-font-size como base.

 Número nulo

tiene valor

Especifica el valor si no es falso. Los valores falsos incluyen nulo, ninguno, 0 o una lista vacía. Utiliza el siguiente formato para especificar el valor:

has-value($val)

Utiliza el parámetro como se especifica en la siguiente tabla:

No Señor. Descripción de parámetros Tipo Valor por defecto
1

$val

Comprueba el valor especificado.

 Mezclado Ninguna

ponerse de lado

Especifica el lado de un valor y define los valores superior / derecho / inferior / izquierdo en el relleno, margen, etc. Utiliza el siguiente formato para especificar el lado de un valor:

has-value($val)

Utiliza los siguientes parámetros como se especifica en la tabla:

No Señor. Descripción de parámetros Tipo Valor por defecto
1

$val

Especifica el lado de un valor.

 Lista o número Ninguna
2

$side

Determina en qué lado debe regresar el valor (superior / derecho / inferior / izquierdo).

 Palabra clave Ninguna

get-border-value

Determina el valor de borde de un elemento. Utiliza el siguiente formato para especificar el valor del borde:

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

Utiliza los siguientes parámetros como se especifica en la tabla:

No Señor. Descripción de parámetros Tipo Valor por defecto
1

$val

Encuentra un valor específico del borde.

 Lista Ninguna
2

$elem

Se utiliza para extraer el componente de borde.

 Palabra clave Ninguna