Articles
Giới thiệu về SASS/SCSS
Cờ `!default` trong SASS

Cờ `!default` trong SASS

Bài viết này giải thích về cờ !default trong SASS.

Chúng tôi sẽ giải thích chi tiết về cờ !default và hướng dẫn cách sử dụng nó qua các ví dụ thực tế.

YouTube Video

Cờ !default trong SASS

Cờ !default trong SASS là một công cụ quan trọng giúp tăng tính mô-đun và khả năng tái sử dụng cho các stylesheet. Bằng cách sử dụng cờ này, bạn có thể đặt giá trị mặc định cho các biến, đồng thời cho phép giá trị được định nghĩa ở nơi khác ghi đè giá trị mặc định này. Tại đây, chúng tôi sẽ giải thích chi tiết về cờ !default và ví dụ cách sử dụng nó trong thực tế.

Cờ !default là một tính năng riêng của SASS dùng để đặt giá trị mặc định cho các biến. Khi thêm cờ này, bạn sẽ nhận được các hành vi sau:.

  • Chỉ định giá trị mặc định Giá trị chỉ được đặt nếu biến chưa được định nghĩa ở nơi khác.

  • Kiểm soát thứ tự ưu tiên Nếu biến đã được định nghĩa trước đó, giá trị của biến sẽ không bị ghi đè.

Tính năng này đặc biệt hữu ích khi xây dựng các module và thư viện. Người dùng có thể đặt giá trị tùy chỉnh, nhưng nếu không, giá trị mặc định sẽ được sử dụng.

Ví dụ cơ bản

Đoạn mã sau minh họa cách sử dụng cơ bản của cờ !default.

1// _variables.scss
2$primary-color: blue !default;
  • Định nghĩa biến mặc định $primary-color bằng cờ !default.
1// main.scss
2@use 'variables' with (
3    $primary-color: red
4);
5
6body {
7    background-color: variables.$primary-color;
8}
  • Nhập các biến bằng @use và ghi đè $primary-color bằng with.

CSS xuất ra 

1body {
2    background-color: red;
3}
  • Trong ví dụ này, vì $primary-color được đặt thành red trong main.scss, nên giá trị blue được định nghĩa trong _variables.scss sẽ không được sử dụng.

Khi một biến chưa được định nghĩa

Nếu biến không được định nghĩa trong main.scss, giá trị mặc định sẽ được sử dụng.

1// main.scss
2@use 'variables';
3
4body {
5    background-color: variables.$primary-color;
6}
  • Vì biến được nhập mà không ghi đè, nên giá trị mặc định blue của $primary-color định nghĩa trong _variables.scss sẽ được áp dụng.

CSS xuất ra 

1body {
2    background-color: blue;
3}

Cách sử dụng trong các module lồng nhau

Sử dụng !default trong các module giúp việc tùy chỉnh trở nên linh hoạt.

1// _variables.scss
2$primary-color: blue !default;
3$button-color: blue !default;
  • Định nghĩa $primary-color và $button-color với cờ !default.
1// _buttons.scss
2@use 'variables';
3
4.button {
5    color: variables.$button-color;
6}
  • Nhập module variables và xác định màu sắc của .button bằng biến $button-color.
1// main.scss
2@use 'variables' with (
3    $button-color: orange
4);
5
6@use 'buttons';
  • Sử dụng @use với with để ghi đè $button-color thành orange, và sử dụng module buttons.

CSS xuất ra 

1.button {
2    color: orange;
3}
  • Bằng cách này, các module cung cấp giá trị mặc định nhưng vẫn tôn trọng các cài đặt do người dùng định nghĩa.

Những điểm cần lưu ý

Khi sử dụng cờ !default, bạn nên chú ý các điểm sau:.

  • Chọn giá trị mặc định phù hợp Nên chọn giá trị mặc định phù hợp với hầu hết các trường hợp sử dụng thông thường.

  • Thiết kế có chủ đích Nên sử dụng tên biến nhất quán và tránh xung đột với các module khác.

  • Kiểm tra thứ tự Để cờ !default hoạt động đúng, bạn cần quản lý thứ tự ghi đè biến một cách chính xác.

Tình huống thực tế

Chuyển đổi chủ đề

Ví dụ, khi tạo một thư viện hỗ trợ nhiều chủ đề (theme), bạn có thể sử dụng !default để cung cấp các giá trị mặc định có thể tùy chỉnh.

1// _theme.scss
2$background-color: white !default;
3$text-color: black !default;
4
5body {
6    background-color: $background-color;
7    color: $text-color;
8}
  • Định nghĩa $background-color và $text-color với cờ !default cho giao diện, và áp dụng chúng cho thẻ body.
1// main.scss
2@use 'theme' with (
3    $background-color: #f0f0f0
4);
  • Tùy chỉnh giao diện bằng cách ghi đè $background-color qua @use và with.

CSS xuất ra 

1body {
2    background-color: #f0f0f0;
3    color: black;
4}

Thành phần tái sử dụng

Trong một thành phần nút (button) tái sử dụng, bạn có thể cung cấp kiểu dáng mặc định nhưng cho phép người dùng đổi màu sắc nếu muốn.

 1// _buttons.scss
 2$button-bg: #007bff !default;
 3$button-color: #ffffff !default;
 4
 5.button {
 6    background-color: $button-bg;
 7    color: $button-color;
 8    padding: 0.5em 1em;
 9    border-radius: 4px;
10}
  • Định nghĩa màu nền và màu chữ mặc định cho nút bằng !default và áp dụng các kiểu.
1// main.scss
2@use 'buttons' with (
3    $button-bg: #28a745
4);
  • Tùy chỉnh màu nút bằng cách ghi đè $button-bg với @use và with.

CSS xuất ra 

1.button {
2    background-color: #28a745;
3    color: #ffffff;
4    padding: 0.5em 1em;
5    border-radius: 4px;
6}

Tóm tắt về cờ !default

Cờ !default trong SASS là một công cụ mạnh mẽ khi xây dựng các module và thư viện. Nó giúp tăng khả năng tái sử dụng đồng thời cho phép tùy biến linh hoạ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.

YouTube Video

Biến SASSCờ `!global` trong SASS