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