Các biến CSS

Bootstrap bao gồm khoảng hai chục thuộc tính tùy chỉnh CSS (biến) trong CSS đã biên dịch của nó, với hàng chục thuộc tính khác đang được cải thiện để tùy chỉnh trên cơ sở từng thành phần. Những thứ này cung cấp khả năng truy cập dễ dàng vào các giá trị thường được sử dụng như màu chủ đề, điểm ngắt và ngăn xếp phông chữ chính của chúng tôi khi làm việc trong trình kiểm tra của trình duyệt, hộp cát mã hoặc tạo mẫu chung.

Tất cả các thuộc tính tùy chỉnh của chúng tôi đều có tiền tốbs- để tránh xung đột với CSS của bên thứ ba.

Các biến gốc

Dưới đây là các biến chúng tôi đưa vào (lưu ý :rootlà bắt buộc) có thể được truy cập ở bất kỳ đâu CSS của Bootstrap được tải. Chúng nằm trong _root.scsstệp của chúng tôi và được bao gồm trong các tệp dist đã biên dịch của chúng tôi.

:root {
  --bs-blue: #0d6efd;
  --bs-indigo: #6610f2;
  --bs-purple: #6f42c1;
  --bs-pink: #d63384;
  --bs-red: #dc3545;
  --bs-orange: #fd7e14;
  --bs-yellow: #ffc107;
  --bs-green: #198754;
  --bs-teal: #20c997;
  --bs-cyan: #0dcaf0;
  --bs-white: #fff;
  --bs-gray: #6c757d;
  --bs-gray-dark: #343a40;
  --bs-primary: #0d6efd;
  --bs-secondary: #6c757d;
  --bs-success: #198754;
  --bs-info: #0dcaf0;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;
  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
}

Các biến thành phần

Chúng tôi cũng đang bắt đầu sử dụng các thuộc tính tùy chỉnh làm biến cục bộ cho các thành phần khác nhau. Bằng cách này, chúng tôi có thể giảm CSS đã biên dịch của mình, đảm bảo các kiểu không được kế thừa ở những nơi như bảng lồng nhau và cho phép một số cấu trúc lại và mở rộng cơ bản của các thành phần Bootstrap sau khi biên dịch Sass.

Hãy xem tài liệu bảng của chúng tôi để biết một số thông tin chi tiết về cách chúng tôi đang sử dụng các biến CSS .

Chúng tôi cũng đang sử dụng các biến CSS trên các lưới của mình — chủ yếu cho các máng xối — với việc sử dụng nhiều thành phần hơn trong tương lai.

Các ví dụ

Các biến CSS cung cấp tính linh hoạt tương tự như các biến của Sass, nhưng không cần biên dịch trước khi được cung cấp cho trình duyệt. Ví dụ: ở đây chúng tôi đang đặt lại phông chữ và kiểu liên kết của trang bằng các biến CSS.

body {
  font: 1rem/1.5 var(--bs-font-sans-serif);
}
a {
  color: var(--bs-blue);
}