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;