Biến CSS là gì và cách sử dụng chúng như thế nào

Trong lập trình, các biến là khối xây dựng cơ bản của bất kỳ ứng dụng phần mềm nào. Chúng lưu trữ các giá trị được gán có thể được thao tác và sử dụng trong bất kỳ phần nào của chương trình.

Nhờ đó, mã ít dư thừa hơn và dễ bảo trì hơn . Đó là lý do tại sao chúng rất cơ bản cho phát triển phần mềm.

Trong bài viết này, chúng ta sẽ xem xét kỹ hơn về tương đương của chúng trong thế giới CSS.

BIẾN CSS LÀ GÌ?

Mặc dù CSS (Cascading Style Sheets) về mặt kỹ thuật không phải là một ngôn ngữ lập trình nhưng nó có phiên bản biến riêng được giới thiệu trong Chrome 49 và trở nên phổ biến kể từ đó.

Biến CSS, còn được gọi là "thuộc tính tùy chỉnh CSS" đã bổ sung tính linh hoạt hơn cho quy trình làm việc giao diện người dùng. Kể từ ngày nó được phát hành, chúng tôi có thể khai báo, sử dụng và thao tác các biến có thể được sử dụng lại trên các tệp CSS trống.

Trong một thời gian dài, cách duy nhất để đạt được kết quả tương tự là sử dụng các bộ tiền xử lý CSS như Sass hoặc LESS.

CÁCH SỬ DỤNG CÁC BIẾN CSS

Khai báo thuộc tính tùy chỉnh CSS

Để khai báo một biến trong CSS, chúng ta cần thêm một tên sẽ được bắt đầu bằng hai dấu gạch ngang (–) và gán giá trị sau dấu hai chấm. Trong ví dụ bên dướibộ chọnvà các con của nó có quyền truy cập vào biến được khai báo bên trong.

selector {
--variable-name: value;
}

Khai báo một biến trong:nguồn gốc phần tử sẽ cung cấp cho nó phạm vi toàn cầu, vì vậy tất cả các phần tử hậu duệ có thể truy cập nó.

:root {
–-bg-color: #f5333f;
}

Sử dụng biến CSS

Để áp dụng các biến CSS của chúng tôi cho các thành phần mong muốn, chúng tôi sử dụng hàm var() và thêm tên biến của chúng tôi vào bên trong làm đối số. Nhiệm vụ của chức năng này là tìm một biến CSS và áp dụng nó cho bộ chọn.

div {
background-color: var(--bg-color);
}

Kế thừa biến CSS 

Cũng giống như với CSS bình thường, các phần tử con kế thừa các giá trị biến CSS của các phần tử cha của chúng (miễn là giá trị cha không bị ghi đè trong phần tử con). Hãy xem ví dụ dưới đây:

HTML:

<div class="container">
    <div class="inner">
        <div class="box box-one">Box one content</div>
        <div class="box box-two">Box two content</div>
    </div>
</div>

CSS:

.container {
--padding: 1rem;
}
.inner {
padding: var(--padding)
}
.box {
padding: var(--padding)
}
.box-two {
--padding: 2rem;
}

Các.bên trong Và.box-onecác phần tử sẽ có cùng phần đệm ( 1rem ) đã được khai báo trong phần tử cha của chúng với lớp .thùng đựng hàng. Chỉ phần đệm của.hộp haisẽ khác vì nó đã được ghi đè bên trong bộ chọn của nó thành giá trị 2rem .

Giá trị dự phòng

Khi sử dụng các biến CSS, chúng tôi có thể vô tình đề cập đến một biến không tồn tại trong tài liệu. Đôi khi nó chỉ là một lỗi đánh máy trong tên biến mà chúng ta muốn sử dụng. Trong trường hợp này, việc thêm giá trị dự phòng sẽ ngăn hành vi hiển thị không mong muốn. Nó cũng có thể được sử dụng để gỡ lỗi nếu tên biến thích hợp được thêm vào.

Giá trị dự phòng phải được thêm vào sau tên biến trong hàm var() và được phân tách bằng dấu phẩy.

element {
  property: var(--variable-name, fallback-value)
}

Vui lòng lưu ý tên biến sai chính tả được sử dụng trên phần tử div trong ví dụ bên dưới. –color -primary không được xác định trong tài liệu nên màu nền không nên được tạo kiểu là #000 , nhưng vì chúng tôi đã thêm một giá trị dự phòng nên màu sẽ được áp dụng ngay cả khi biến CSS không tồn tại.

:root {
--color-primary: #000;
--color-secondary: #fff;
}

div {
  background-color: var(--colour-primary, #000)
}

giá trị không hợp lệ

Khi một giá trị biến CSS không hợp lệ đối với một thuộc tính được cung cấp, nó sẽ được áp dụng (bạn có thể kiểm tra các công cụ dành cho nhà phát triển) nhưng nó sẽ không hoạt động.

Ví dụ: giả sử chúng ta sử dụng một biến chứa giá trị #fff trên thuộc tính kích thước phông chữ , giá trị này hợp lệ đối với thuộc tính màu hoặc nền. Trong trường hợp đó, trình duyệt sẽ xác định rằng kích thước phông chữ không hợp lệ và đặt giá trị mặc định cho nó.

div {
--main-text: #fff;
font-size: var(--main-text);
}

Các biến CSS với CSS calc()

Hàm calc() có thể rất thiết thực với các biến CSS . Ví dụ: chúng ta có thể tạo kích thước cơ sở cho một thành phần và sau đó chỉ thay đổi một biến để làm cho nó nhỏ hơn hoặc lớn hơn.

Giả sử rằng chúng tôi muốn có các biến thể khác nhau của người dùng.hình đại diện.

.avatar {
--size: 4; 
width: calc(var(--size) * 1rem); /* 64px */
height: calc(var(--size) * 1rem); /* 64px */
}

Trong ví dụ này, chúng tôi đã gán số 4 không có bất kỳ đơn vị nào cho biến CSS –size . Sau đó, chúng tôi đã sử dụng nó để nhận các giá trị chiều rộng và chiều cao mới với một đơn vị bằng cách nhân chúng với 1rem để trở thành 4rem (64px) .

.avatar--small {
--size: 2; /* 32px */
}

.avatar--large {
--size: 8; /* 128px */
}

Cùng với đó, chúng ta có thể tạo các lớp biến thể bằng cách thêm biến CSS –size vào lớp bổ trợ.

Sử dụng các biến CSS với JavaScript

Giống như mọi phần khác của trang web, bạn có thể nhận và thao tác các giá trị biến CSS bằng JavaScript .

Trong ví dụ bên dưới, chúng tôi sẽ thay đổi nền trang sau khi chọn màu khác trong đầu vào và áp dụng nó cho phần nội dung của tài liệu.

Hãy bắt đầu bằng cách thêm một đánh dấu HTML rất đơn giản chỉ với một phần tử đầu vào có kiểu=”color” vào phần nội dung tài liệu . Nó sẽ là công cụ chọn màu của chúng tôi cho nền trang.

  
    <title>Setting Page Background with CSS Variables and JavaScript</title>
  
  
    
  

Sau đó, chúng tôi sẽ thêm một số kiểu CSS cơ bản :

• Chúng ta sẽ gán biến –page-background cho thuộc tính background-color của phần tử body
• Chúng tôi sẽ sử dụng một flexbox chỉ để căn giữa đầu vào theo chiều ngang và chiều dọc trên trang.
• Cuối cùng, chúng tôi sẽ thêm chiều cao 100vh cho phần thân tài liệu để lấy 100% chiều cao khung nhìn

:root {
--page-background: #f5333f;
}

body {
  background-color: var(--page-background);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

Cuối cùng, chúng tôi sẽ thêm một mã JavaScript đơn giản sẽ làm nên điều kỳ diệu.

Chỉ 3 dòng của nó sẽ thực hiện công việc và chức năng của chúng tôi sẽ hoạt động như mong đợi.

document.querySelector('input[type=color]').addEventListener('change', (e) => {
  document.documentElement.style.setProperty('--page-background', e.target.value);
});

Như bạn có thể thấy thao tác với Biến CSS bằng JavaScript khá đơn giản và chắc chắn có thể được sử dụng cho các trường hợp sử dụng khác nhau.