Biến toàn cục dùng trong CSS

Dùng biến toàn cục cho css sẽ giúp chúng ta quản lý tốt hơn các tùy chọn giao diện, tránh phải tìm lại các mã màu hay là các tùy chỉnh đã làm trong dự án. Dưới đây là cách định nghĩa mã màu và cách gọi nó khi dùng.

// khai bao mã màu
:root {
  --main-bg-color: coral;
}

// gọi mã màu khi sử dụng
#div1 {
  background-color: var(--main-bg-color);
}

// khai bao mã màu

:root {

--main-bg-color: coral;

}

// gọi mã màu khi sử dụng

#div1 {

background-color: var(--main-bg-color);

}

Một số biến toàn cục dùng trong theme flatsome

var(–primary-color);

var(–secondary-color);

var(–success-color);

var(–alert-color);

Các biến toàn cục dùng định nghĩa màu cho website

:root {
    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --primary: #007bff;
    --secondary: #6c757d;
    --success: #28a745;
    --info: #17a2b8;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #f8f9fa;
    --dark: #343a40;
}

:root {

--blue: #007bff;

--indigo: #6610f2;

--purple: #6f42c1;

--pink: #e83e8c;

--red: #dc3545;

--orange: #fd7e14;

--yellow: #ffc107;

--green: #28a745;

--teal: #20c997;

--cyan: #17a2b8;

--white: #fff;

--gray: #6c757d;

--gray-dark: #343a40;

--primary: #007bff;

--secondary: #6c757d;

--success: #28a745;

--info: #17a2b8;

--warning: #ffc107;

--danger: #dc3545;

--light: #f8f9fa;

--dark: #343a40;

}

Đánh giá nội dung này

Bài viết mới:

CSS, Lập trình Wordpress, Thủ thuật

Biến toàn cục dùng trong CSS

Bài viết cùng chủ đề:

Cách tạo mục lục tự động cho bài viết wordpress (TOC)

CodePen Home Textarea Tabs + Syntax Highlighting

Cách tạo danh mục (table of content) cho mô tả danh mục bài viết và sản phẩm

Tạo đồng hồ đếm ngược trong wordpress bằng PHP – JavaScript Countdown Clock

Cách bỏ trường website trong bình luận của WordPress

Count Up Number trên themes Flatsome như thế nào?

Kiểm tra và tự Khởi Động Lại MySQL Khi Quá Tải Trên Máy Chủ Linux, VPS, aaPanel

Tạo bảng với nút tìm kiếm dữ liệu / How to – Filter/Search Table

Aiken Trung