Foundation - Sass Karışımları

İçe aktarılıyor

Scss / util / _mixins.scss dosyasının altına yerleştirilen SASS karışımlarının içeriğini içe aktarır . Aşağıdaki kod satırını kullanarak SASS karışımlarını içe aktarabilirsiniz -

@import 'util/mixins';

Sass Referansı

SASS işlevlerini kullanarak bileşenlerin stillerini değiştirebilirsiniz.

Mixins

Bileşenleriniz için CSS sınıf yapısını oluşturmak için aşağıdaki karışımları kullanabilirsiniz.

CSS-TRIANGLE

Açılır oklar, aşağı açılan tırtıllar ve daha fazlasını oluşturmak için kullanılır. Var olan bir elemana üçgen eklemek için <i> & :: before </i> veya <i> & :: after </i> seçicisini kullanır. Aşağıdaki biçimi kullanır -

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

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

Sr.No.	Parametre ve Açıklama	Tür	Varsayılan değer
1	$triangle-size Üçgenin genişliğini tanımlar.	Numara	Yok
2	$triangle-color Üçgenin rengini tanımlar.	Renk	Yok
3	$triangle-direction Yukarı, sağ, aşağı veya sol gibi üçgenin yönünü tanımlar.	Anahtar kelime	Yok

HAMBURGER

Genişlik, yükseklik, çubuk sayısı ve renkli menü ikonu oluşturmak için kullanılır. Aşağıdaki biçimi kullanır -

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

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

Sr.No.	Parametre ve Açıklama	Tür	Varsayılan değer
1	$color Simgenin rengini tanımlar.	Renk	Yok
2	$color-hover Simgenin üzerine geldiğinizde rengi tanımlar.	Renk	Yok
3	$width Simgenin genişliğini tanımlar.	Numara	Yok
4	$height Simgenin yüksekliğini tanımlar.	Numara	Yok
5	$weight Simgedeki tek tek çubukların ağırlığını tanımlar.	Numara	Yok
6	$bars Simgedeki çubuk sayısını tanımlar.	Numara	Yok

BACKGROUND-TRIANGLE

Bir elemanın arka plan görüntüsünü belirtmek için kullanılır. Aşağıdaki biçimi kullanır -

@include background-triangle($color);

Parametreyi tabloda belirtildiği gibi kullanır -

Sr.No.	Parametre ve Açıklama	Tür	Varsayılan değer
1	$color Üçgenin rengini tanımlar.	Renk	$ siyah

CLEARFIX

Bu karışım, alt öğeleri otomatik olarak temizler, böylece ek işaretlemeye gerek kalmaz. Aşağıdaki biçimi kullanır -

@include clearfix;

AUTO-WIDTH

Kapta bulunan öğelerin sayısına göre öğeleri otomatik olarak boyutlandırır. Aşağıdaki biçimi kullanır -

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

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

Sr.No.	Parametre ve Açıklama	Tür	Varsayılan değer
1	$max Kaptaki maksimum öğe sayısını tanımlar.	Numara	Yok
2	$elem Kardeş seçiciler için bir etiket kullanır.	Anahtar kelime	li

DISABLE-MOUSE-OUTLINE

Fare giriş eylemini tanımladığında öğenin etrafındaki dış çizgiyi devre dışı bırakmak için kullanılır. Aşağıdaki biçimi kullanır -

@include disable-mouse-outline;

ELEMENT-INVISIBLE

Öğeleri gizlemek için kullanılır ve klavyeler ve diğer cihazlar tarafından kullanılabilir. Aşağıdaki biçimi kullanır -

@include element-invisible;

ELEMENT-INVISIBLE-OFF

Görünmez öğeleri kaldırmak için kullanılır ve element-invisible () karışımını kullanarak CSS çıktısını tersine çevirir . Aşağıdaki biçimi kullanır -