Chức năng SASS
Bài viết này giải thích về các chức năng trong SASS.
Chúng tôi sẽ giải thích chi tiết về các chức năng SASS từ cơ bản đến nâng cao, bao gồm các ví dụ thực tế hữu ích trong công việc hàng ngày.
YouTube Video
Chức năng SASS
Chức năng SASS là các công cụ mạnh mẽ giúp đóng gói logic có thể tái sử dụng trong stylesheet, cho phép thực hiện các phép tính, định dạng và phân nhánh điều kiện.
Cấu trúc cơ bản và cách sử dụng chức năng
Chức năng SASS được định nghĩa bằng @function và trả về giá trị với @return. Chức năng được gọi giống như các chức năng tích hợp sẵn.
1// Example: Define a simple function that doubles a value
2@function double($n) {
3 @return $n * 2;
4}
5
6// Use the function
7.example {
8 width: double(10px); // -> 20px
9}- Đoạn mã này định nghĩa một hàm nhân đôi một số và áp dụng nó cho chiều rộng. Kết quả là
.example { width: 20px; }sẽ được tạo ra.
Đối số, giá trị mặc định và xử lý kiểu dữ liệu
Chức năng có thể nhận nhiều đối số và thiết lập giá trị mặc định. SASS không bắt buộc kiểm tra kiểu dữ liệu tĩnh, nhưng chú ý đến định dạng của đối số sẽ làm cho chức năng của bạn vững chắc hơn.
1// Example: Function with default parameters
2@function responsive-font($base-size, $scale: 1.2, $unit: px) {
3 @return $base-size * $scale + $unit;
4}
5
6.title {
7 font-size: responsive-font(16, 1.25); // -> 20px
8}responsive-fontcó giá trị mặc định choscalevàunit, và một số đối số có thể bỏ qua khi gọi. Trong ví dụ này, một giá trị nhưfont-size: 20px;sẽ được xuất ra.
Sử dụng đối số biến (...)
Sử dụng đối số biến nếu bạn muốn truyền nhiều giá trị. Điều này hữu ích khi xử lý các danh sách hoặc nhiều màu sắc.
1// Example: Sum any number of numbers passed in
2@function sum-all($numbers...) {
3 $total: 0;
4 @each $n in $numbers {
5 $total: $total + $n;
6 }
7 @return $total;
8}
9
10.box {
11 padding: sum-all(4px, 6px, 10px); // -> 20px
12}- Một đối số biến như
$numbers...sẽ được xem là một danh sách và có thể xử lý bằng@each. Trong ví dụ này,padding: 20px;sẽ được xuất ra.
Trả về và thao tác với danh sách hoặc map
Chức năng cũng có thể trả về danh sách (ngăn cách bằng dấu cách hoặc dấu phẩy) và map. Điều này hữu ích khi trả về giá trị phức tạp.
1@use "sass:map";
2
3// Example: Return a map of spacing scale
4@function spacing-scale($base) {
5 @return (
6 'small': $base * 0.5,
7 'medium': $base,
8 'large': $base * 2
9 );
10}
11
12$scale: spacing-scale(8px);
13
14.card {
15 margin-bottom: map.get($scale, 'medium');
16}- Một đối tượng map được trả về bởi hàm, và sau đó các giá trị được lấy ra bằng
map.get. Điều này giúp bạn duy trì một hệ thống khoảng cách nhất quán.
Chức năng với các điều kiện và vòng lặp
@if, @else if, @else, @for, @each và @while đều có thể dùng trong chức năng. Bạn có thể tạo logic tính toán với điều kiện và vòng lặp.
1// Example: Generate modular scale value using loop
2@function modular-scale($step, $base: 1rem, $ratio: 1.25) {
3 $result: $base;
4 @if $step == 0 {
5 @return $result;
6 }
7 @if $step > 0 {
8 @for $i from 1 through $step {
9 $result: $result * $ratio;
10 }
11 } @else {
12 @for $i from 1 through abs($step) {
13 $result: $result / $ratio;
14 }
15 }
16 @return $result;
17}
18
19.h1 {
20 font-size: modular-scale(3, 1rem, 1.333);
21}- Chức năng này tính toán theo hệ số tỷ lệ và nhân hoặc chia tuỳ vào số bước dương hoặc âm.
modular-scale(3, 1rem, 1.333)trả về kích thước font cao hơn gốc ba bước.
Xử lý lỗi và cảnh báo (@error, @warn)
Bạn có thể dừng với @error khi có đối số không hợp lệ hoặc thao tác không mong muốn, và đưa ra cảnh báo bằng @warn. Mục đích là để cảnh báo người dùng về vấn đề càng sớm càng tốt.
1@use "sass:math";
2@use "sass:meta";
3
4// Example: Validate input and throw an error for invalid units
5@function ensure-length($value) {
6 @if meta.type-of($value) != 'number' or math.is-unitless($value) {
7 @error "Expected a length with units, got #{$value}.";
8 }
9 @return $value;
10}
11
12// Valid input (should pass)
13.test-valid {
14 width: ensure-length(10px); // expect: 10px
15}
16
17// Invalid input (should throw error during compilation)
18// Uncomment the following to test error handling:
19//
20// .test-invalid {
21// // expect error: "Expected a length with units, got 10."
22// width: ensure-length(10);
23// }- Nếu bạn truyền giá trị không hợp lệ, lỗi sẽ được xuất ra khi biên dịch, giúp xác định nguyên nhân dễ dàng hơn. Kiểm tra bên trong chức năng giúp phát hiện lỗi sớm.
Tạo chức năng đặc thù cho màu sắc
Trong SASS, bạn có thể kết hợp nhiều hàm thao tác màu sắc để tạo bảng màu riêng của mình. Điều này hữu ích để quản lý một bảng màu nhất quán cho toàn bộ dự án của bạn.
1@use "sass:color";
2@use "sass:list";
3
4// Example: Generate a color palette (tints and shades) from a base color
5@function palette($color, $steps: 5, $strength: 10%) {
6 $colors: ();
7 @for $i from 0 through $steps {
8 $amount: $i * $strength;
9 $shade: if($i == 0, $color, color.mix(black, $color, $amount));
10 $tint: color.mix(white, $color, $amount);
11 $colors: list.append($colors, $shade);
12 $colors: list.append($colors, $tint);
13 }
14 @return $colors;
15}
16
17$palette: palette(#3498db, 3, 15%);
18
19.btn {
20 background-color: list.nth($palette, 1);
21}- Trong ví dụ này,
color.mixđược sử dụng để tạo các sắc thái bằng cách pha trộn với màu đen và các tông sáng bằng cách pha trộn với màu trắng. Các giá trị được trả về trong một danh sách, và có thể truy cập bằng cách sử dụnglist.nth.
Lưu ý về hiệu suất và thời gian biên dịch
Chức năng SASS được đánh giá tại thời điểm biên dịch. Vòng lặp nhiều, đệ quy sâu hoặc thao tác phức tạp với map sẽ làm tăng thời gian biên dịch. Giữ chức năng đơn giản và nhỏ gọn; nếu cần thiết, hãy xử lý các logic phức tạp ngoài SASS, ví dụ trong công cụ build hoặc preprocessor.
Bộ sưu tập các chức năng tiện ích thực tế
Dưới đây là một số chức năng tiện ích thường dùng. Mã này được thiết kế để có thể sử dụng ngay trong các dự án thực tế.
1@use "sass:math";
2
3// Example: Clamp a value between min and max
4@function clamp-value($value, $min, $max) {
5 @if $value < $min {
6 @return $min;
7 } @else if $value > $max {
8 @return $max;
9 }
10 @return $value;
11}
12
13// Example: Convert px to rem (with optional root size)
14@function px-to-rem($px, $root: 16px) {
15 @if math.unit($px) != "px" {
16 @error "px-to-rem requires a px value.";
17 }
18 @return ($px / $root) * 1rem;
19}clamp-valueáp đặt giới hạn trên và dưới cho một giá trị, vàpx-to-remchuyển đổi giá trị pixel sang rem. Cả hai đều đơn giản hóa các quy trình thường gặp trong thiết kế đáp ứng.
Lựa chọn giữa @function và Mixins (@mixin)
Chức năng chuyên trả về giá trị, trong khi mixin xuất ra các khối CSS. Nếu kết quả logic là một giá trị thuộc tính, hãy dùng chức năng; nếu là một khối style, hãy dùng mixin.
1// Example: Function returns a value
2@function border-radius-value($size) {
3 @return $size * 1px;
4}
5
6// Example: Mixin outputs properties
7@mixin rounded($size) {
8 border-radius: border-radius-value($size);
9 -webkit-border-radius: border-radius-value($size);
10}
11.card {
12 @include rounded(8);
13}- Chức năng trả về các giá trị như số hoặc màu để dùng cho các thuộc tính khác, trong khi mixin chèn trực tiếp một nhóm thuộc tính. Tách biệt rõ ràng trong thiết kế giúp tăng tính bảo trì.
Xử lý chuỗi và cân nhắc về định dạng xuất
Hãy cẩn thận khi xử lý số có đơn vị và chuỗi trong SASS. Nối chuỗi với số có đơn vị có thể tạo ra kết quả không mong đợi. Sử dụng unquote() hoặc nội suy chuỗi (#{}) khi cần thiết.
1@use "sass:math";
2
3// Example: Safely create a CSS value string
4@function px-percentage($px, $total) {
5 $percent: math.div($px, $total) * 100;
6 @return "#{$percent}%";
7}
8
9// Safer with interpolation and math module
10@function px-percentage-safe($px, $total) {
11 $percent: math.div($px, $total) * 100;
12 // Round to 2 decimal places safely
13 $rounded: math.div(math.round($percent * 100), 100);
14 @return "#{$rounded}%";
15}- Khi trả về phần trăm ở dạng chuỗi, hãy kiểm soát độ chính xác bằng nội suy hoặc dùng
roundđể rõ ràng hơn. Để tránh lỗi, luôn xử lý rõ ràng kiểu dữ liệu khi nối kết quả tính toán với chuỗi.
Các phương pháp tốt nhất cho kiểm thử và tài liệu
Sau khi viết chức năng, hãy tạo các file SCSS nhỏ với ví dụ sử dụng để kiểm thử, giúp quá trình bảo trì dễ dàng hơn. Bạn có thể tài liệu cho mỗi chức năng về kiểu/đơn vị đầu vào, kiểu trả về, hành vi khi lỗi và ví dụ sử dụng.
1@use "sass:math";
2
3// Example: Inline "tests" (partial usage examples)
4// These can be compiled separately during development
5
6@function double($n) {
7 @return $n * 2;
8}
9
10@function px-to-rem($px, $root: 16px) {
11 @if math.unit($px) != "px" {
12 @error "px-to-rem requires a px value.";
13 }
14 @return math.div($px, $root) * 1rem;
15}
16
17// Test double()
18.test-double {
19 width: double(12px); // expect 24px
20}
21
22// Test px-to-rem()
23.test-rem {
24 font-size: px-to-rem(18px, 18px); // expect 1rem
25}
26
27// --- Inline debug tests ---
28@debug "double(12px) => #{double(12px)} (expect 24px)";
29@debug "px-to-rem(18px, 18px) => #{px-to-rem(18px, 18px)} (expect 1rem)";- Để lại chú thích với ví dụ nhỏ về 'kết quả mong đợi' giúp phát hiện lỗi khi refactor trong tương lai. Tự động biên dịch trong môi trường CI và kiểm tra đầu ra trực quan rất hiệu quả.
Tóm tắt
Chức năng SASS là một cách mạnh mẽ để tăng tính tái sử dụng và nhất quán trong style. Hãy thiết kế chức năng nhỏ gọn, đơn giản và đảm bảo an toàn bằng @error và @warn. Các chức năng tiện ích về màu sắc, khoảng cách, chuyển đổi đơn vị rất tiện để tổng hợp vào thư viện dùng chung. Để tránh thời gian biên dịch tăng cao, hãy xem xét tách xử lý phức tạp sang các bước build khác khi cần thiết.
Bạn có thể làm theo bài viết trên bằng cách sử dụng Visual Studio Code trên kênh YouTube của chúng tôi. Vui lòng ghé thăm kênh YouTube.