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;