Foundation - Chức năng Sass

Foundation cung cấp một tập hợp các hàm tiện ích Sass, có thể được sử dụng với util , màu , chọn , đơn vị , giá trị và nhiều hơn nữa.

Bạn có thể nhập tất cả các tệp tiện ích cùng một lúc bằng cách sử dụng dòng mã sau:

@import 'util/util';

Bạn cũng có thể nhập các tệp tiện ích riêng lẻ như được hiển thị bên dưới -

@import 'util/color';
@import 'util/selector';
@import 'util/unit';
@import 'util/value';

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 sau đây.

vấn đề xung quanh

Nó cung cấp màu nền trước cho các phần tử dựa trên màu nền. Nó sử dụng định dạng sau để gán các loại tham số khác nhau:

foreground($color, $yes, $no, $threshold)

Các thông số trên được quy định trong bảng sau:

Sr.No.	Mô tả về Thông Số	Kiểu	Giá trị mặc định
1	$color Nó kiểm tra độ đậm nhạt của màu sắc.	Màu sắc	không ai
2	$yes Nếu màu sáng, thì nó trả về màu $ yes .	Màu sắc	$ đen
3	$no Nếu màu tối, thì nó trả về $ no color.	Màu sắc	$ trắng
4	$threshold Nó đại diện cho ngưỡng của sự nhẹ nhàng.	Phần trăm	60%

quy mô thông minh

Nó cung cấp màu sắc thích hợp cho các yếu tố theo độ đậm nhạt của nó. Nó sử dụng định dạng sau để chỉ định màu thích hợp:

smart-scale($color, $scale, $threshold)

Các tham số đã cho ở trên được chỉ định trong bảng sau:

Sr.No.	Mô tả về Thông Số	Kiểu	Giá trị mặc định
1	$color Nó được sử dụng để chia tỷ lệ màu.	Màu sắc	không ai
2	$scale Nó chỉ định tỷ lệ phần trăm để tăng hoặc giảm quy mô.	Phần trăm	5%
3	$threshold Nó đại diện cho ngưỡng của sự nhẹ nhàng.	Phần trăm	40%

đầu vào văn bản

Nó tạo ra một bộ chọn trong khi sử dụng kiểu nhập văn bản. Nó sử dụng định dạng sau để chỉ định các loại đầu vào:

text-inputs($types)

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

Sr.No.	Mô tả về Thông Số	Kiểu	Giá trị mặc định
1	$types Nó cung cấp một số kiểu nhập văn bản để tạo bộ chọn.	Màu sắc	-

đơn vị dải

Nó loại bỏ đơn vị khỏi giá trị và chỉ trả về số. Nó sử dụng định dạng sau để xóa đơn vị khỏi giá trị:

strip-unit($num)

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

Sr.No.	Mô tả về Thông Số	Kiểu	Giá trị mặc định
1	$num Nó chỉ định số khi bạn xóa đơn vị khỏi giá trị.	Màu sắc	không ai

rem-calc

Nó thay đổi giá trị pixel để phù hợp với các giá trị rem. Nó sử dụng định dạng sau để chuyển đổi giá trị pixel thành giá trị rem:

rem-calc($values, $base)

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	$values Nó chuyển đổi các giá trị pixel thành giá trị rem và phân tách chúng bằng dấu cách. Nếu bạn đang chuyển đổi danh sách được phân tách bằng dấu phẩy, thì hãy bọc danh sách trong dấu ngoặc đơn.	Số hoặc Danh sách	không ai
2	$base Nó cung cấp giá trị cơ bản trong khi chuyển đổi pixel thành giá trị rem. Nếu có giá trị null cho cơ sở, thì hàm sử dụng biến $ base-font-size làm cơ sở.	Con số	vô giá trị

có giá trị

Nó chỉ định giá trị nếu nó không phải là false. Các giá trị sai bao gồm null, không, 0 hoặc danh sách trống. Nó sử dụng định dạng sau để chỉ định giá trị:

has-value($val)

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

Sr.No.	Mô tả về Thông Số	Kiểu	Giá trị mặc định
1	$val Nó kiểm tra giá trị được chỉ định.	Trộn	không ai

bên cạnh

Nó chỉ định cạnh của một giá trị và xác định các giá trị trên cùng / phải / dưới cùng / trái trên phần đệm, lề, v.v. Nó sử dụng định dạng sau để chỉ định cạnh của giá trị:

has-value($val)

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	$val Nó chỉ định mặt của một giá trị.	Danh sách hoặc Số	không ai
2	$side Nó xác định giá trị (trên / phải / dưới / trái) sẽ trả về phía nào.	Từ khóa	không ai

get-border-value

Nó xác định giá trị đường viền của một phần tử. Nó sử dụng định dạng sau để chỉ định giá trị đường viền:

get-border-value($val, $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	$val Nó tìm thấy một giá trị cụ thể của đường viền.	Danh sách	không ai
2	$elem Nó được sử dụng để trích xuất thành phần đường viền.	Từ khóa	không ai