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