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 -