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-black: #000;
  --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", "Noto Sans", "Liberation Sans", Arial, 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;
  --bs-border-width: 1px;
  --bs-border-style: solid;
  --bs-border-color: #dee2e6;
  --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
  --bs-border-radius: 0.375rem;
  --bs-border-radius-sm: 0.25rem;
  --bs-border-radius-lg: 0.5rem;
  --bs-border-radius-xl: 1rem;
  --bs-border-radius-2xl: 2rem;
  --bs-border-radius-pill: 50rem;
  --bs-link-color: #0d6efd;
  --bs-link-hover-color: #0a58ca;
  --bs-code-color: #d63384;
  --bs-highlight-bg: #fff3cd;
}

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

Bootstrap 5 đang ngày càng 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 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 . Các thanh điều hướng của chúng tôi cũng sử dụng các biến CSS kể từ v5.2.0. 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 dành cho các máng xối lưới CSS lựa chọn tham gia mới — với việc sử dụng nhiều thành phần hơn trong tương lai.

Bất cứ khi nào có thể, chúng tôi sẽ gán các biến CSS ở cấp thành phần cơ sở (ví dụ: .navbarcho thanh điều hướng và các thành phần phụ của nó). Điều này giúp giảm việc phỏng đoán về vị trí và cách tùy chỉnh, đồng thời cho phép nhóm của chúng tôi sửa đổi dễ dàng trong các bản cập nhật trong tương lai.

Tiếp đầu ngữ

Hầu hết các biến CSS sử dụng tiền tố để tránh xung đột với cơ sở mã của riêng bạn. Tiền tố này bổ sung cho tiền tố --bắt buộc trên mọi biến CSS.

Tùy chỉnh tiền tố thông qua $prefixbiến Sass. Theo mặc định, nó được đặt thành bs-(lưu ý dấu gạch ngang cuối).

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. Trong thời gian chờ đợ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.