Các biến CSS

Bootstrap bao gồm nhiều thuộc tính tùy chỉnh CSS (biến) trong CSS đã biên dịch của nó để tùy chỉnh thời gian thực mà không cần biên dịch lại Sass. 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-gray-100: #f8f9fa;
  --bs-gray-200: #e9ecef;
  --bs-gray-300: #dee2e6;
  --bs-gray-400: #ced4da;
  --bs-gray-500: #adb5bd;
  --bs-gray-600: #6c757d;
  --bs-gray-700: #495057;
  --bs-gray-800: #343a40;
  --bs-gray-900: #212529;
  --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-primary-rgb: 13, 110, 253;
  --bs-secondary-rgb: 108, 117, 125;
  --bs-success-rgb: 25, 135, 84;
  --bs-info-rgb: 13, 202, 240;
  --bs-warning-rgb: 255, 193, 7;
  --bs-danger-rgb: 220, 53, 69;
  --bs-light-rgb: 248, 249, 250;
  --bs-dark-rgb: 33, 37, 41;
  --bs-white-rgb: 255, 255, 255;
  --bs-black-rgb: 0, 0, 0;
  --bs-body-color-rgb: 33, 37, 41;
  --bs-body-bg-rgb: 255, 255, 255;
  --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));
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.5;
  --bs-body-color: #212529;
  --bs-body-bg: #fff;
}

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);
}

Điểm ngắt lưới

Mặc dù chúng tôi bao gồm các điểm ngắt lưới của mình dưới dạng các biến CSS (ngoại trừ xs), hãy lưu ý rằng các biến CSS không hoạt động trong các truy vấn phương tiện . Điều này là do thiết kế trong thông số kỹ thuật CSS cho các biến, nhưng có thể thay đổi trong những năm tới với sự hỗ trợ cho env()các biến. Kiểm tra câu trả lời Stack Overflow này để biết một số liên kết hữu ích. Đồng thời, bạn có thể sử dụng các biến này trong các tình huống CSS khác, cũng như trong JavaScript của bạn.