Biến SASS

Bài viết này giải thích về các biến trong SASS.

Chúng tôi sẽ cung cấp giải thích chi tiết về biến SASS và hướng dẫn sử dụng chúng từng bước một.

YouTube Video

Biến SASS

SASS là một ngôn ngữ mở rộng của CSS cho phép bạn viết CSS linh hoạt và hiệu quả hơn. Trong các tính năng của nó, biến là một công cụ mạnh mẽ giúp duy trì sự nhất quán về kiểu dáng và giúp thay đổi dễ dàng hơn.

Biến SASS là gì?

Biến SASS cung cấp cách lưu trữ các giá trị như màu sắc, kích thước phông chữ và khoảng cách thường sử dụng trong CSS, giúp quản lý chúng ở một nơi duy nhất.

Bằng cách sử dụng biến, bạn có thể dễ dàng thay đổi kiểu dáng và cải thiện khả năng đọc mã nguồn.

Cách viết biến

Biến có thể được viết như sau.

1// Variable syntax
2//$variable-name: value;
3$primary-color: #3498db;

• Bạn cần thêm ký hiệu $ vào trước tên biến.
• variable-name là tên của biến. Nên đặt tên rõ ràng và có ý nghĩa cho biến.
• value là giá trị được gán cho biến.

Cách sử dụng cơ bản của biến

Dưới đây là một ví dụ cơ bản về biến SASS.

 1// Variable definition
 2$primary-color: #3498db;
 3$secondary-color: #2ecc71;
 4$base-font-size: 16px;
 5
 6// Variable usage
 7body {
 8    font-size: $base-font-size;
 9    color: $primary-color;
10    background-color: $secondary-color;
11}

• Khi bạn đã định nghĩa một biến như $primary-color, bạn có thể sử dụng lại giá trị này bao nhiêu lần tùy ý.
• Khi thay đổi một giá trị, bạn chỉ cần sửa lại định nghĩa của biến, giúp tăng khả năng bảo trì.

Kết quả CSS được tạo ra

1body {
2    font-size: 16px;
3    color: #3498db;
4    background-color: #2ecc71;
5}

Sử dụng biến trong lồng nhau

Kết hợp lồng nhau của SASS với biến giúp tổ chức mã nguồn và dễ quản lý hơn.

 1@use "sass:color";
 2
 3// Variable definition
 4$button-bg: #e74c3c;
 5$button-color: #fff;
 6$button-padding: 10px 20px;
 7
 8.button {
 9    background-color: $button-bg;
10    color: $button-color;
11    padding: $button-padding;
12
13    &:hover {
14        background-color: color.adjust($button-bg, $lightness: -10%);
15    }
16}

• Bạn có thể sử dụng biến bên trong các bộ chọn lồng nhau.
• Bằng cách kết hợp các biến, bạn có thể đạt được kiểu dáng linh hoạt, chẳng hạn như làm cho một màu tối hơn 10% bằng cách sử dụng hàm color.adjust.

Kết quả CSS được tạo ra

1.button {
2    background-color: #e74c3c;
3    color: #fff;
4    padding: 10px 20px;
5}
6
7.button:hover {
8    background-color: #c0392b;
9}

Biến với giá trị mặc định

Trong SASS, bạn có thể đặt giá trị mặc định cho biến. Đặt giá trị mặc định cho phép bạn sử dụng biến mà không ghi đè lên các biến có sẵn.

1// Set default value
2$font-size: 14px !default;
3
4// Define the variable in another file
5$font-size: 16px;
6
7p {
8    font-size: $font-size;
9}

• Bằng cách thêm !default, biến sẽ không bị ghi đè nếu đã được định nghĩa trước đó.
• Điều này rất hữu ích trong phát triển nhóm hoặc cho các thiết lập toàn bộ dự án.

Kết quả CSS được tạo ra

1p {
2    font-size: 16px;
3}

Phạm vi của biến

Biến SASS có phạm vi và khả năng sử dụng tùy thuộc vào nơi chúng được định nghĩa. Hiểu phạm vi giúp tránh việc ghi đè biến ngoài ý muốn.

1. Phạm vi toàn cục

1$global-color: #ff6347;
2
3.header {
4    color: $global-color;
5}

• Các biến trong phạm vi toàn cục có thể được sử dụng ở bất kỳ đâu trong toàn bộ tệp.

2. Phạm vi cục bộ

1.card {
2    $card-bg: #f0f0f0;
3    background-color: $card-bg;
4}
5
6.button {
7    // Error: $card-bg cannot be used
8    background-color: $card-bg;
9}

• Các biến trong phạm vi cục bộ chỉ có thể sử dụng trong một phần lồng nhau hoặc một tệp cụ thể.

Sử dụng biến trong phép tính

Biến SASS cũng có thể sử dụng trong các phép tính. Các phép tính có thể áp dụng với giá trị có đơn vị và màu sắc.

 1@use "sass:color";
 2
 3$base-padding: 10px;
 4$double-padding: $base-padding * 2;
 5
 6.container {
 7    padding: $double-padding;
 8}
 9
10$main-color: #3498db;
11$lighter-color: color.adjust($main-color, $lightness: 20%);
12
13h1 {
14    color: $lighter-color;
15}

Kết quả CSS được tạo ra

1.container {
2    padding: 20px;
3}
4
5h1 {
6    color: #5dade2;
7}

• Sử dụng biến để điều chỉnh màu sắc hoặc tính toán khoảng cách giúp tăng khả năng bảo trì.

Tóm tắt

Biến SASS là một tính năng thiết yếu để quản lý và bảo trì CSS hiệu quả.

Sử dụng biến SASS giúp duy trì kiểu dáng nhất quán trên toàn bộ dự án và giúp thay đổi dễ dàng hơn.

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.

YouTube Video