Yayasan - Sass Mixins

Pengimporan

Ini mengimpor konten mixin SASS yang ditempatkan di bawah file scss / util / _mixins.scss . Anda dapat mengimpor mixin SASS dengan menggunakan baris kode berikut -

@import 'util/mixins';

Referensi Sass

Anda dapat mengubah gaya komponen dengan menggunakan fungsi SASS.

Mixins

Anda dapat menggunakan mixin berikut untuk membuat struktur kelas CSS untuk komponen Anda.

CSS-TRIANGLE

Ini digunakan untuk membuat panah dropdown, pip dropdown dan banyak lagi. Ini menggunakan pemilih <i> & :: before </i> atau <i> & :: after </i> untuk memasang segitiga ke elemen yang ada. Ini menggunakan format berikut -

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

Ini menggunakan parameter berikut seperti yang ditentukan dalam tabel -

Sr.No. Parameter & Deskripsi Tipe Nilai Default
1

$triangle-size

Ini mendefinisikan lebar segitiga.

Jumlah Tidak ada
2

$triangle-color

Ini menentukan warna segitiga.

Warna Tidak ada
3

$triangle-direction

Ini menentukan arah segitiga seperti atas, kanan, bawah atau kiri.

Kata kunci Tidak ada

HAMBURGER

Ini digunakan untuk membuat ikon menu dengan lebar, tinggi, jumlah bar dan warna. Ini menggunakan format berikut -

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

Ini menggunakan parameter berikut seperti yang ditentukan dalam tabel -

Sr.No. Parameter & Deskripsi Tipe Nilai Default
1

$color

Ini menentukan warna untuk ikon.

Warna Tidak ada
2

$color-hover

Ini menentukan warna saat Anda mengarahkan kursor ke ikon.

Warna Tidak ada
3

$width

Ini mendefinisikan lebar ikon.

Jumlah Tidak ada
4

$height

Ini menentukan ketinggian ikon.

Jumlah Tidak ada
5

$weight

Ini menentukan berat batang individu di ikon.

Jumlah Tidak ada
6

$bars

Ini menentukan jumlah bar di ikon.

Jumlah Tidak ada

BACKGROUND-TRIANGLE

Ini digunakan untuk menentukan gambar latar belakang ke sebuah elemen. Ini menggunakan format berikut -

@include background-triangle($color);

Ini menggunakan parameter seperti yang ditentukan dalam tabel -

Sr.No. Parameter & Deskripsi Tipe Nilai Default
1

$color

Ini menentukan warna segitiga.

Warna $ hitam

CLEARFIX

Mixin ini secara otomatis menghapus elemen turunan, sehingga tidak perlu markup tambahan. Ini menggunakan format berikut -

@include clearfix;

AUTO-WIDTH

Secara otomatis mengukur elemen berdasarkan jumlah elemen yang ada dalam penampung. Ini menggunakan format berikut -

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

Ini menggunakan parameter berikut seperti yang ditentukan dalam tabel -

Sr.No. Parameter & Deskripsi Tipe Nilai Default
1

$max

Ini mengidentifikasi jumlah maksimum item dalam wadah.

Jumlah Tidak ada
2

$elem

Ini menggunakan tag untuk penyeleksi saudara.

Kata kunci li

DISABLE-MOUSE-OUTLINE

Ini digunakan untuk menonaktifkan garis besar di sekitar elemen saat mengidentifikasi tindakan masukan mouse. Ini menggunakan format berikut -

@include disable-mouse-outline;

ELEMENT-INVISIBLE

Ini digunakan untuk menyembunyikan elemen dan dapat tersedia untuk keyboard dan perangkat lain. Ini menggunakan format berikut -

@include element-invisible;

ELEMENT-INVISIBLE-OFF

Ini digunakan untuk menghapus elemen yang tidak terlihat dan membalikkan output CSS dengan menggunakan mixin elemen-invisible () . Ini menggunakan format berikut -

@include element-invisible-off;

VERTICAL-CENTER

Ini digunakan untuk menempatkan elemen secara vertikal di tengah elemen induk non-statis dengan menggunakan format berikut -

@include vertical-center;

HORIZONTAL-CENTER

Ini digunakan untuk menempatkan elemen secara horizontal di tengah elemen induk non-statis dengan menggunakan format berikut -

@include horizontal-center;

ABSOLUTE-CENTER

Ini digunakan untuk menempatkan elemen yang benar-benar di tengah di dalam elemen induk non-statis dengan menggunakan format berikut -

@include absolute-center;