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 -

@include element-invisible-off;

VERTICAL-CENTER

Aşağıdaki biçimi kullanarak öğeleri statik olmayan ana öğenin içine dikey olarak ortalanmış olarak yerleştirmek için kullanılır -

@include vertical-center;

HORIZONTAL-CENTER

Aşağıdaki biçimi kullanarak elemanları statik olmayan üst elemanın içine yatay olarak ortalanmış olarak yerleştirmek için kullanılır -

@include horizontal-center;

ABSOLUTE-CENTER

Aşağıdaki biçimi kullanarak elemanları statik olmayan ana elemanın içine kesinlikle ortalanmış olarak yerleştirmek için kullanılır -

@include absolute-center;