Fundacja - Sass Mixins

Importowanie

Importuje zawartość mikserów SASS, które są umieszczane w pliku scss / util / _mixins.scss . Możesz zaimportować miksery SASS, używając następującego wiersza kodu -

@import 'util/mixins';

Sass Reference

Możesz zmienić style komponentów za pomocą funkcji SASS.

Mieszanki

Możesz użyć następujących mikserów, aby zbudować strukturę klas CSS dla swoich komponentów.

CSS-TRIANGLE

Służy do tworzenia rozwijanych strzałek, rozwijanych pipsów i wielu innych. Używa selektora <i> & :: before </i> lub <i> & :: after </i> do dołączenia trójkąta do istniejącego elementu. Używa następującego formatu -

@include css-triangle($triangle-size, $triangle-color, $triangle-direction);

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

Sr.No.	Parametr i opis	Rodzaj	Domyślna wartość
1	$triangle-size Określa szerokość trójkąta.	Numer	Żaden
2	$triangle-color Określa kolor trójkąta.	Kolor	Żaden
3	$triangle-direction Określa kierunek trójkąta, na przykład w górę, w prawo, w dół lub w lewo.	Słowo kluczowe	Żaden

HAMBURGER

Służy do tworzenia ikon menu wraz z szerokością, wysokością, liczbą pasków i kolorami. Używa następującego formatu -

@include hamburger($color, $color-hover, $width, $height, $weight, $bars);

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

Sr.No.	Parametr i opis	Rodzaj	Domyślna wartość
1	$color Określa kolor ikony.	Kolor	Żaden
2	$color-hover Definiuje kolor po najechaniu na ikonę.	Kolor	Żaden
3	$width Określa szerokość ikony.	Numer	Żaden
4	$height Określa wysokość ikony.	Numer	Żaden
5	$weight Określa wagę poszczególnych słupków w ikonie.	Numer	Żaden
6	$bars Określa liczbę słupków w ikonie.	Numer	Żaden

BACKGROUND-TRIANGLE

Służy do określania obrazu tła elementu. Używa następującego formatu -

@include background-triangle($color);

Używa parametru określonego w tabeli -

Sr.No.	Parametr i opis	Rodzaj	Domyślna wartość
1	$color Określa kolor trójkąta.	Kolor	$ czarny

CLEARFIX

Ta mieszanka automatycznie czyści elementy potomne, więc nie ma potrzeby stosowania dodatkowych znaczników. Używa następującego formatu -

@include clearfix;

AUTO-WIDTH

Automatycznie dopasowuje rozmiary elementów na podstawie liczby elementów obecnych w kontenerze. Używa następującego formatu -

@include auto-width($max, $elem);

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

Sr.No.	Parametr i opis	Rodzaj	Domyślna wartość
1	$max Określa maksymalną liczbę towarów w kontenerze.	Numer	Żaden
2	$elem Używa tagu dla selektorów rodzeństwa.	Słowo kluczowe	li

DISABLE-MOUSE-OUTLINE

Służy do wyłączania konturu wokół elementu, gdy identyfikuje akcję wprowadzania myszy. Używa następującego formatu -

@include disable-mouse-outline;

ELEMENT-INVISIBLE

Służy do ukrycia elementów i może być dostępny dla klawiatur i innych urządzeń. Używa następującego formatu -

@include element-invisible;

ELEMENT-INVISIBLE-OFF

Służy do usuwania niewidocznych elementów i odwraca dane wyjściowe CSS przy użyciu mixin element-invisible () . Używa następującego formatu -

@include element-invisible-off;

VERTICAL-CENTER

Służy do umieszczania elementów wyśrodkowanych w pionie wewnątrz niestatycznego elementu nadrzędnego przy użyciu następującego formatu -

@include vertical-center;

HORIZONTAL-CENTER

Służy do umieszczania elementów wyśrodkowanych w poziomie wewnątrz niestatycznego elementu nadrzędnego przy użyciu następującego formatu -

@include horizontal-center;

ABSOLUTE-CENTER

Służy do umieszczania elementów wyśrodkowanych absolutnie wewnątrz niestatycznego elementu nadrzędnego przy użyciu następującego formatu -

@include absolute-center;