Foundation - Sass İşlevleri

Foundation, kullanım , renk , seçici , birim , değer ve daha pek çok şeyle kullanılabilen bir dizi SASS yardımcı işlevi sağlar .

Aşağıdaki kod satırını kullanarak tüm yardımcı program dosyalarını bir seferde içe aktarabilirsiniz -

@import 'util/util';

Ayrıca aşağıda gösterildiği gibi tek tek yardımcı program dosyalarını içe aktarabilirsiniz -

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

Sass Referansı

Aşağıdaki SASS işlevlerini kullanarak bileşenlerin stillerini değiştirebilirsiniz.

ön plan

Arka plan rengine göre öğelere ön plan rengi sağlar. Farklı tipte parametreleri atamak için aşağıdaki formatı kullanır -

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

Yukarıdaki parametreler aşağıdaki tabloda belirtilmiştir -

Sr.No.	Parametre ve Açıklama	Tür	Varsayılan değer
1	$color Rengin açıklığını kontrol eder.	Renk	Yok
2	$yes Renk açıksa, $ evet rengini döndürür .	Renk	$ siyah
3	$no Renk koyuysa, $ renk yok döndürür .	Renk	$ beyaz
4	$threshold Hafifliğin eşiğini temsil eder.	Yüzde	% 60

akıllı ölçek

Hafifliğine göre elementlere uygun rengi sağlar. Uygun rengi belirlemek için aşağıdaki formatı kullanır -

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

Yukarıda verilen parametreler aşağıdaki tabloda belirtilmiştir -

Sr.No.	Parametre ve Açıklama	Tür	Varsayılan değer
1	$color Rengi ölçeklendirmek için kullanılır.	Renk	Yok
2	$scale Yukarı veya aşağı ölçeklenecek yüzdeyi belirtir.	Yüzde	% 5
3	$threshold Hafifliğin eşiğini temsil eder.	Yüzde	% 40

metin girişleri

Metin giriş türünü kullanırken bir seçici oluşturur. Giriş türlerini belirtmek için aşağıdaki biçimi kullanır -

text-inputs($types)

Parametreyi aşağıdaki tabloda belirtildiği gibi kullanır -

Sr.No.	Parametre ve Açıklama	Tür	Varsayılan değer
1	$types Bir seçici oluşturmak için bir dizi metin girişi türü sağlar.	Renk	-

şerit birimi

Birimi değerden çıkarır ve yalnızca sayıyı döndürür. Birimi değerden çıkarmak için aşağıdaki biçimi kullanır -

strip-unit($num)

Parametreyi aşağıdaki tabloda belirtildiği gibi kullanır -

Sr.No.	Parametre ve Açıklama	Tür	Varsayılan değer
1	$num Birimi değerden çıkardığınızda numarayı belirtir.	Renk	Yok

rem-calc

Piksel değerini rem değerleriyle eşleşecek şekilde değiştirir. Piksel değerlerini rem değerlerine dönüştürmek için aşağıdaki formatı kullanır -

rem-calc($values, $base)

Tabloda belirtildiği gibi aşağıdaki parametreleri kullanır -

Sr.No.	Parametre ve Açıklama	Tür	Varsayılan değer
1	$values Piksel değerlerini rem değerlerine dönüştürür ve boşluk kullanarak ayırır. Virgülle ayrılmış listeyi dönüştürüyorsanız, listeyi parantez içinde kaydırın.	Numara veya Liste	Yok
2	$base Pikseli rem değerine dönüştürürken temel değeri sağlar. Taban için boş değer varsa, işlev temel olarak $ base-font-size değişkenini kullanır .	Numara	boş

değeri var

Yanlış değilse değeri belirtir. Yanlış değerler arasında null, none, 0 veya boş bir liste bulunur. Değeri belirtmek için aşağıdaki biçimi kullanır -

has-value($val)

Parametreyi aşağıdaki tabloda belirtildiği gibi kullanır -

Sr.No.	Parametre ve Açıklama	Tür	Varsayılan değer
1	$val Belirtilen değeri kontrol eder.	Karışık	Yok

yan yana

Bir değerin kenarını belirtir ve dolgu, kenar boşluğu vb. Üzerindeki üst / sağ / alt / sol değerleri tanımlar. Bir değerin kenarını belirtmek için aşağıdaki formatı kullanır -

has-value($val)

Tabloda belirtildiği gibi aşağıdaki parametreleri kullanır -

Sr.No.	Parametre ve Açıklama	Tür	Varsayılan değer
1	$val Bir değerin tarafını belirtir.	Liste veya Numara	Yok
2	$side (Üst / sağ / alt / sol) değerinin hangi tarafta dönmesi gerektiğini belirler.	Anahtar kelime	Yok

get-border-value

Bir elemanın sınır değerini belirler. Kenarlık değerini belirtmek için aşağıdaki biçimi kullanır -

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

Tabloda belirtildiği gibi aşağıdaki parametreleri kullanır -

Sr.No.	Parametre ve Açıklama	Tür	Varsayılan değer
1	$val Sınırın belirli bir değerini bulur.	Liste	Yok
2	$elem Kenarlık bileşenini çıkarmak için kullanılır.	Anahtar kelime	Yok