Foundation - Sass Mixins

Nhập khẩu

Nó nhập nội dung của hỗn hợp SASS được đặt trong tệp scss / use / _mixins.scss . Bạn có thể nhập hỗn hợp SASS bằng cách sử dụng dòng mã sau:

@import 'util/mixins';

Tham khảo Sass

Bạn có thể thay đổi kiểu của các thành phần bằng cách sử dụng các hàm SASS.

Mixin

Bạn có thể sử dụng các mixin sau để xây dựng cấu trúc lớp CSS cho các thành phần của mình.

CSS-TRIANGLE

Nó được sử dụng để tạo mũi tên thả xuống, pips thả xuống và nhiều hơn nữa. Nó sử dụng bộ chọn <i> & :: before </i> hoặc <i> & :: after </i> để gắn một hình tam giác vào một phần tử hiện có. Nó sử dụng định dạng sau:

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

Nó sử dụng các tham số sau như được chỉ định trong bảng:

Sr.No. Mô tả về Thông Số Kiểu Giá trị mặc định
1

$triangle-size

Nó xác định chiều rộng của hình tam giác.

Con số không ai
2

$triangle-color

Nó xác định màu sắc của hình tam giác.

Màu sắc không ai
3

$triangle-direction

Nó xác định hướng của tam giác như lên, phải, xuống hoặc trái.

Từ khóa không ai

HAMBURGER

Nó được sử dụng để tạo biểu tượng menu với chiều rộng, chiều cao, số thanh và màu sắc. Nó sử dụng định dạng sau:

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

Nó sử dụng các tham số sau như được chỉ định trong bảng:

Sr.No. Mô tả về Thông Số Kiểu Giá trị mặc định
1

$color

Nó xác định màu sắc cho biểu tượng.

Màu sắc không ai
2

$color-hover

Nó xác định màu khi bạn di chuột vào biểu tượng.

Màu sắc không ai
3

$width

Nó xác định chiều rộng của biểu tượng.

Con số không ai
4

$height

Nó xác định chiều cao của biểu tượng.

Con số không ai
5

$weight

Nó xác định trọng lượng của các thanh riêng lẻ trong biểu tượng.

Con số không ai
6

$bars

Nó xác định số lượng thanh trong biểu tượng.

Con số không ai

BACKGROUND-TRIANGLE

Nó được sử dụng để chỉ định hình nền cho một phần tử. Nó sử dụng định dạng sau:

@include background-triangle($color);

Nó sử dụng tham số như được chỉ định trong bảng -

Sr.No. Mô tả về Thông Số Kiểu Giá trị mặc định
1

$color

Nó xác định màu cho hình tam giác.

Màu sắc $ đen

CLEARFIX

Mixin này tự động xóa các phần tử con, do đó không cần đánh dấu bổ sung. Nó sử dụng định dạng sau:

@include clearfix;

AUTO-WIDTH

Nó tự động định kích thước các phần tử dựa trên số phần tử có trong vùng chứa. Nó sử dụng định dạng sau:

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

Nó sử dụng các tham số sau như được chỉ định trong bảng:

Sr.No. Mô tả về Thông Số Kiểu Giá trị mặc định
1

$max

Nó xác định số lượng tối đa các mục trong vùng chứa.

Con số không ai
2

$elem

Nó sử dụng một thẻ cho các bộ chọn anh chị em.

Từ khóa li

DISABLE-MOUSE-OUTLINE

Nó được sử dụng để vô hiệu hóa đường viền xung quanh phần tử khi nó xác định hành động nhập chuột. Nó sử dụng định dạng sau:

@include disable-mouse-outline;

ELEMENT-INVISIBLE

Nó được sử dụng để ẩn các phần tử và có thể khả dụng với bàn phím và các thiết bị khác. Nó sử dụng định dạng sau:

@include element-invisible;

ELEMENT-INVISIBLE-OFF

Nó được sử dụng để loại bỏ các phần tử ẩn và đảo ngược đầu ra CSS bằng cách sử dụng mixin phần tử vô hình () . Nó sử dụng định dạng sau:

@include element-invisible-off;

VERTICAL-CENTER

Nó được sử dụng để đặt các phần tử căn giữa theo chiều dọc bên trong phần tử mẹ không tĩnh bằng cách sử dụng định dạng sau:

@include vertical-center;

HORIZONTAL-CENTER

Nó được sử dụng để đặt các phần tử căn giữa theo chiều ngang bên trong phần tử mẹ không tĩnh bằng cách sử dụng định dạng sau:

@include horizontal-center;

ABSOLUTE-CENTER

Nó được sử dụng để đặt các phần tử được căn giữa tuyệt đối bên trong phần tử mẹ không tĩnh bằng cách sử dụng định dạng sau:

@include absolute-center;