Foundation - Fungsi Sass

Foundation menyediakan satu set fungsi utilitas SASS, yang dapat digunakan dengan util , color , selector , unit , value , dan banyak lagi.

Anda dapat mengimpor semua file utilitas sekaligus dengan menggunakan baris kode berikut -

@import 'util/util';

Anda juga dapat mengimpor file utilitas individu seperti yang ditunjukkan di bawah ini -

@import 'util/color';
@import 'util/selector';
@import 'util/unit';
@import 'util/value';

Referensi Sass

Anda dapat mengubah gaya komponen dengan menggunakan fungsi SASS berikut.

latar depan

Ini memberikan warna latar depan ke elemen berdasarkan warna latar belakang. Ini menggunakan format berikut untuk menetapkan berbagai jenis parameter -

foreground($color, $yes, $no, $threshold)

Parameter di atas ditentukan dalam tabel berikut -

Sr.No. Parameter & Deskripsi Tipe Nilai Default
1

$color

Ini memeriksa kecerahan warna.

Warna Tidak ada
2

$yes

Jika warnanya terang, maka itu mengembalikan warna $ yes .

Warna $ hitam
3

$no

Jika warnanya gelap, maka mengembalikan $ no color.

Warna $ putih
4

$threshold

Ini mewakili ambang batas ringan.

Persentase 60%

skala pintar

Ini memberikan warna yang sesuai untuk elemen sesuai dengan kecerahannya. Ini menggunakan format berikut untuk menentukan warna yang sesuai -

smart-scale($color, $scale, $threshold)

Parameter yang diberikan di atas ditentukan dalam tabel berikut -

Sr.No. Parameter & Deskripsi Tipe Nilai Default
1

$color

Ini digunakan untuk mengatur skala warna.

Warna Tidak ada
2

$scale

Ini menentukan persentase untuk naik atau turun.

Persentase 5%
3

$threshold

Ini mewakili ambang batas ringan.

Persentase 40%

masukan teks

Ini membuat pemilih saat menggunakan jenis input teks. Ini menggunakan format berikut untuk menentukan jenis input -

text-inputs($types)

Ini menggunakan parameter seperti yang ditentukan dalam tabel berikut -

Sr.No. Parameter & Deskripsi Tipe Nilai Default
1

$types

Ini menyediakan sejumlah jenis input teks untuk menghasilkan selektor.

Warna -

strip-unit

Ini menghapus unit dari nilai dan hanya mengembalikan angkanya. Ini menggunakan format berikut untuk menghapus unit dari nilai -

strip-unit($num)

Ini menggunakan parameter seperti yang ditentukan dalam tabel berikut -

Sr.No. Parameter & Deskripsi Tipe Nilai Default
1

$num

Ini menentukan nomor saat Anda menghapus unit dari nilainya.

Warna Tidak ada

rem-calc

Ini mengubah nilai piksel agar sesuai dengan nilai rem. Ini menggunakan format berikut untuk mengubah nilai piksel menjadi nilai rem -

rem-calc($values, $base)

Ini menggunakan parameter berikut seperti yang ditentukan dalam tabel -

Sr.No. Parameter & Deskripsi Tipe Nilai Default
1

$values

Ini mengubah nilai piksel menjadi nilai rem dan memisahkannya menggunakan spasi. Jika Anda mengonversi daftar yang dipisahkan koma, maka bungkus daftar dalam tanda kurung.

Nomor atau Daftar Tidak ada
2

$base

Ini memberikan nilai dasar saat mengubah piksel menjadi nilai rem. Jika ada nilai nol untuk basis, maka fungsi menggunakan variabel $ base-font-size sebagai basis.

Jumlah batal

memiliki nilai

Ini menentukan nilai jika tidak salah. Nilai palsu termasuk null, none, 0 atau daftar kosong. Ini menggunakan format berikut untuk menentukan nilai -

has-value($val)

Ini menggunakan parameter seperti yang ditentukan dalam tabel berikut -

Sr.No. Parameter & Deskripsi Tipe Nilai Default
1

$val

Ini memeriksa nilai yang ditentukan.

Campuran Tidak ada

get-side

Ini menentukan sisi nilai dan mendefinisikan nilai atas / kanan / bawah / kiri pada padding, margin dll. Ini menggunakan format berikut untuk menentukan sisi nilai -

has-value($val)

Ini menggunakan parameter berikut seperti yang ditentukan dalam tabel -

Sr.No. Parameter & Deskripsi Tipe Nilai Default
1

$val

Ini menentukan sisi nilai.

Daftar atau Nomor Tidak ada
2

$side

Ini menentukan di sisi mana nilai (atas / kanan / bawah / kiri) harus dikembalikan.

Kata kunci Tidak ada

get-border-value

Ini menentukan nilai perbatasan suatu elemen. Ini menggunakan format berikut untuk menentukan nilai perbatasan -

get-border-value($val, $elem)

Ini menggunakan parameter berikut seperti yang ditentukan dalam tabel -

Sr.No. Parameter & Deskripsi Tipe Nilai Default
1

$val

Ia menemukan nilai tertentu dari perbatasan.

Daftar Tidak ada
2

$elem

Ini digunakan untuk mengekstrak komponen perbatasan.

Kata kunci Tidak ada