Hàm var() trong CSS

Những website lớn thường sử dụng rất nhiều CSS với lượng lớn thuộc tính CSS bị lặp lại. Giả sử khi bạn muốn sửa màu chủ đạo của website thì rất có khả năng bạn sẽ phải sửa ở rất nhiều vị trí ví dụ như button, navbar, title,… Để khắc phục vấn đề này thì cũng có nhiều cách giải quyết. Và một cách đơn giản là sử dụng Hàm trong CSS

Tất cả Biến trong CSS khi khai báo cần có hai dấu gạch ngang (liền nhau) “- -” ở phía trước .
Khi lấy giá trị của biến ra thì bạn dùng cấu trúc “var(tên biến, giá trị dự phòng)”.

Biến phân biết chữ thường và chữ HOA

--text-color
--Text-Color
--text-Color

Xét ví dụ sau:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>connguago.com</title>
  <style>
    :root{--main-bg-color:#ff7f50}
    #div1{background-color:var(--main-bg-color,#937368);padding:5px}
    #div2{background-color:var(--main-bg-color,#937368);padding:5px}
    #div3{background-color:var(--main-bg-color,#937368);padding:5px}
  </style>
</head>
<body>
  <h1>The var() Function</h1>
  <div id="div1">Lorem ipsum dolor sit amet.</div><br>
  <div id="div2">Lorem ipsum dolor sit amet, consectetur.</div><br>
  <div id="div3">Lorem ipsum dolor sit amet, consectetur adipisicing.</div>
</body>
</html>

Sử dụng :root để khai báo mã màu #ff7f50

Khi đó #div1, #div2, #div3 tham chiếu đến :root để sử dụng mã màu đã khai báo. Nếu muốn sửa màu #div1, #div2, #div3 thì chỉ cần sửa ở :root là được.

var(tên biến, giá trị dự phòng) – Nếu biến không tồn tại thì nó sẽ sử dụng giá trị dự phòng, ở ví dụ trên là #937368

Bạn có thể sử dụng var(tên biến) bỏ qua giá trị dự phòng.

Download bài tập mẫu

Chúc bạn thành công!

<div class="hotline">
  <a href="tel:0123456789" rel="nofollow">
    <div class="icon">
      <span class="ripple"></span>
      <span class="ripple"></span>
      <span class="ripple"></span>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480.56 480.56" class="svg-icon">
        <path d="M365.354 317.9c-15.7-15.5-35.3-15.5-50.9 0l-35.5 35.6c-3.2 3.3-5.9 4-9.8 1.8-7.7-4.2-15.9-7.6-23.3-12.2-34.5-21.7-63.4-49.6-89-81-12.7-15.6-24-32.3-31.9-51.1-1.6-3.8-1.3-6.3 1.8-9.4 11.9-11.5 23.5-23.3 35.2-35.1 16.3-16.4 16.3-35.6-.1-52.1l-27.9-28-28.8-28.8c-15.7-15.3-35.3-15.3-50.9.1l-35.7 35.5c-11.3 10.7-17 23.8-18.2 39.1-1.9 24.9 4.2 48.4 12.8 71.3 17.6 47.4 44.4 89.5 76.9 128.1 43.9 52.2 96.3 93.5 157.6 123.3 27.6 13.4 56.2 23.7 87.3 25.4 21.4 1.2 40-4.2 54.9-20.9 10.2-11.4 21.7-21.8 32.5-32.7 16-16.2 16.1-35.8.2-51.8l-57.2-57.1zm-19.1-79.7l36.9-6.3c-5.8-33.9-21.8-64.6-46.1-89-25.7-25.7-58.2-41.9-94-46.9l-5.2 37.1c27.7 3.9 52.9 16.4 72.8 36.3 18.8 18.8 31.1 42.6 35.6 68.8zm57.7-160.4c-42.6-42.6-96.5-69.5-156-77.8l-5.2 37.1c51.4 7.2 98 30.5 134.8 67.2 34.9 34.9 57.8 79 66.1 127.5l36.9-6.3c-9.7-56.2-36.2-107.2-76.6-147.7z"></path>
      </svg>
    </div>
    <b class="text">0123456789</b> 
  </a>
</div>
<div class="icon_24tieng_l" style="bottom: 85px; width: 45px; height: 45px;">
  <a href="http://zalo.me/0123456789" target="_blank" rel="nofollow noopener">
    <img src="http://24tieng.com/wp-content/uploads/2022/01/zalo.png" /></a>
</div>
<div class="icon_24tieng_l" style="bottom: 145px; width: 45px; height: 45px;">
  <a href="https://www.messenger.com/t/userfb" target="_blank" rel="nofollow noopener">
    <img src="http://24tieng.com/wp-content/uploads/2022/01/messenger.png" />
  </a>
</div>
Thẻ