Fundacja - Funkcje Sassa

Fundacja zapewnia zestaw Sass funkcji użytkowych, które mogą być używane z util , kolor , selektor , jednostki , wartości i wiele innych.

Możesz zaimportować wszystkie pliki narzędziowe naraz, używając następującego wiersza kodu -

@import 'util/util';

Możesz także importować pojedyncze pliki narzędziowe, jak pokazano poniżej -

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

Sass Reference

Możesz zmienić style komponentów, korzystając z następujących funkcji SASS.

pierwszoplanowy

Zapewnia elementom kolor pierwszego planu na podstawie koloru tła. Używa następującego formatu do przypisywania różnych typów parametrów -

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

Powyższe parametry są określone w poniższej tabeli -

Sr.No. Parametr i opis Rodzaj Domyślna wartość
1

$color

Sprawdza jasność koloru.

Kolor Żaden
2

$yes

Jeśli kolor jest jasny, zwraca $ yes color.

Kolor $ czarny
3

$no

Jeśli kolor jest ciemny, zwraca $ brak koloru.

Kolor $ biały
4

$threshold

Reprezentuje próg lekkości.

Odsetek 60%

inteligentna skala

Zapewnia odpowiedni kolor elementom w zależności od ich lekkości. Używa następującego formatu do określenia odpowiedniego koloru -

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

Powyższe parametry określa poniższa tabela -

Sr.No. Parametr i opis Rodzaj Domyślna wartość
1

$color

Służy do skalowania koloru.

Kolor Żaden
2

$scale

Określa procent skalowania w górę lub w dół.

Odsetek 5%
3

$threshold

Reprezentuje próg lekkości.

Odsetek 40%

wprowadzanie tekstu

Tworzy selektor podczas używania typu wprowadzania tekstu. Używa następującego formatu do określania typów danych wejściowych -

text-inputs($types)

Używa parametru określonego w poniższej tabeli -

Sr.No. Parametr i opis Rodzaj Domyślna wartość
1

$types

Udostępnia szereg typów wprowadzania tekstu do generowania selektora.

Kolor -

jednostka rozbierania

Usuwa jednostkę z wartości i zwraca tylko liczbę. Używa następującego formatu do usuwania jednostki z wartości -

strip-unit($num)

Używa parametru określonego w poniższej tabeli -

Sr.No. Parametr i opis Rodzaj Domyślna wartość
1

$num

Określa liczbę, gdy usuwasz jednostkę z wartości.

Kolor Żaden

rem-calc

Zmienia wartość piksela, aby dopasować wartości rem. Używa następującego formatu do konwersji wartości pikseli na wartości rem -

rem-calc($values, $base)

Używa następujących parametrów określonych w tabeli -

Sr.No. Parametr i opis Rodzaj Domyślna wartość
1

$values

Konwertuje wartości pikseli na wartości rem i rozdziela je spacjami. Jeśli konwertujesz listę oddzieloną przecinkami, zawiń listę w nawiasy.

Numer lub lista Żaden
2

$base

Zapewnia wartość bazową podczas konwersji piksela na wartość rem. Jeśli podstawa ma wartość null, funkcja używa zmiennej $ base-font-size jako podstawy.

Numer zero

ma wartość

Określa wartość, jeśli nie jest fałszywa. Wartości false obejmują null, none, 0 lub pustą listę. Używa następującego formatu do określania wartości -

has-value($val)

Używa parametru określonego w poniższej tabeli -

Sr.No. Parametr i opis Rodzaj Domyślna wartość
1

$val

Sprawdza określoną wartość.

Mieszany Żaden

get-side

Określa stronę wartości i definiuje górne / prawe / dolne / lewe wartości na wypełnieniu, marginesie itp. Używa następującego formatu do określania boku wartości -

has-value($val)

Używa następujących parametrów określonych w tabeli -

Sr.No. Parametr i opis Rodzaj Domyślna wartość
1

$val

Określa stronę wartości.

Lista lub numer Żaden
2

$side

Określa, po której stronie powinna powrócić wartość (góra / prawa / dół / lewa).

Słowo kluczowe Żaden

get-border-value

Określa wartość graniczną elementu. Używa następującego formatu do określania wartości obramowania -

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

Używa następujących parametrów określonych w tabeli -

Sr.No. Parametr i opis Rodzaj Domyślna wartość
1

$val

Znajduje określoną wartość granicy.

Lista Żaden
2

$elem

Służy do wyodrębniania komponentu obramowania.

Słowo kluczowe Żaden