Sass

Sử dụng các tệp Sass nguồn của chúng tôi để tận dụng các biến, bản đồ, mixin và các hàm để giúp bạn xây dựng nhanh hơn và tùy chỉnh dự án của mình.

Trên trang này

Sử dụng các tệp Sass nguồn của chúng tôi để tận dụng các biến, bản đồ, mixin và hơn thế nữa.

Cấu trúc tệp

Bất cứ khi nào có thể, hãy tránh sửa đổi các tệp cốt lõi của Bootstrap. Đối với Sass, điều đó có nghĩa là tạo biểu định kiểu của riêng bạn để nhập Bootstrap để bạn có thể sửa đổi và mở rộng nó. Giả sử bạn đang sử dụng trình quản lý gói như npm, bạn sẽ có cấu trúc tệp giống như sau:

your-project/
├── scss
│   └── custom.scss
└── node_modules/
    └── bootstrap
        ├── js
        └── scss

Nếu bạn đã tải xuống các tệp nguồn của chúng tôi và không sử dụng trình quản lý gói, bạn sẽ muốn tạo một cái gì đó tương tự như cấu trúc đó theo cách thủ công, giữ các tệp nguồn của Bootstrap tách biệt với tệp của riêng bạn.

your-project/
├── scss
│   └── custom.scss
└── bootstrap/
    ├── js
    └── scss

Nhập khẩu

Trong của bạn custom.scss, bạn sẽ nhập các tệp Sass nguồn của Bootstrap. Bạn có hai lựa chọn: bao gồm tất cả Bootstrap hoặc chọn các phần bạn cần. Chúng tôi khuyến khích phần sau, mặc dù hãy lưu ý rằng có một số yêu cầu và phụ thuộc trên các thành phần của chúng tôi. Bạn cũng sẽ cần bao gồm một số JavaScript cho các plugin của chúng tôi.

// Custom.scss
// Option A: Include all of Bootstrap

// Include any default variable overrides here (though functions won't be available)

@import "../node_modules/bootstrap/scss/bootstrap";

// Then add additional custom code here

// Custom.scss
// Option B: Include parts of Bootstrap

// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "../node_modules/bootstrap/scss/functions";

// 2. Include any default variable overrides here

// 3. Include remainder of required Bootstrap stylesheets
@import "../node_modules/bootstrap/scss/variables";

// 4. Include any default map overrides here

// 5. Include remainder of required parts
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

// 6. Optionally include any other parts as needed
@import "../node_modules/bootstrap/scss/utilities";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";
@import "../node_modules/bootstrap/scss/helpers";

// 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
@import "../node_modules/bootstrap/scss/utilities/api";

// 8. Add additional custom code here

Với thiết lập đó, bạn có thể bắt đầu sửa đổi bất kỳ biến và bản đồ nào của Sass trong của bạn custom.scss. Bạn cũng có thể bắt đầu thêm các phần của Bootstrap dưới // Optionalphần này nếu cần. Chúng tôi khuyên bạn nên sử dụng ngăn xếp nhập đầy đủ từ bootstrap.scsstệp của chúng tôi làm điểm xuất phát của bạn.

Giá trị mặc định của biến

Mọi biến Sass trong Bootstrap đều bao gồm !defaultcờ cho phép bạn ghi đè giá trị mặc định của biến trong Sass của riêng bạn mà không cần sửa đổi mã nguồn của Bootstrap. Sao chép và dán các biến nếu cần, sửa đổi giá trị của chúng và xóa !defaultcờ. Nếu một biến đã được gán, thì nó sẽ không được gán lại theo các giá trị mặc định trong Bootstrap.

Bạn sẽ tìm thấy danh sách đầy đủ các biến của Bootstrap trong scss/_variables.scss. Một số biến được đặt thành null, những biến này không xuất ra thuộc tính trừ khi chúng được ghi đè trong cấu hình của bạn.

Ghi đè biến phải đến sau khi các hàm của chúng ta được nhập, nhưng trước khi nhập phần còn lại.

Đây là một ví dụ thay đổi khi nhập background-colorvà biên dịch Bootstrap qua npm:color<body>

// Required
@import "../node_modules/bootstrap/scss/functions";

// Default variable overrides
$body-bg: #000;
$body-color: #111;

// Required
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc

Lặp lại khi cần thiết cho bất kỳ biến nào trong Bootstrap, bao gồm cả các tùy chọn chung bên dưới.

Bắt đầu với Bootstrap qua npm với dự án khởi động của chúng tôi! Truy cập kho lưu trữ mẫu twbs / bootstrap-npm-starter để xem cách xây dựng và tùy chỉnh Bootstrap trong dự án npm của riêng bạn. Bao gồm trình biên dịch Sass, Autoprefixer, Stylelint, PurgeCSS và Bootstrap Icons.

Bản đồ và vòng lặp

Bootstrap bao gồm một số ít bản đồ Sass, các cặp giá trị khóa giúp tạo các họ CSS liên quan dễ dàng hơn. Chúng tôi sử dụng bản đồ Sass cho màu sắc, điểm ngắt lưới và hơn thế nữa. Cũng giống như các biến Sass, tất cả các bản đồ Sass đều bao gồm !defaultcờ và có thể được ghi đè và mở rộng.

Một số bản đồ Sass của chúng tôi được hợp nhất thành những bản đồ trống theo mặc định. Điều này được thực hiện để cho phép dễ dàng mở rộng bản đồ Sass nhất định, nhưng đi kèm với cái giá là khiến việc loại bỏ các vật phẩm khỏi bản đồ khó hơn một chút.

Sửa đổi bản đồ

Tất cả các biến trong $theme-colorsbản đồ được định nghĩa là các biến độc lập. Để sửa đổi màu hiện có trong $theme-colorsbản đồ của chúng tôi, hãy thêm màu sau vào tệp Sass tùy chỉnh của bạn:

$primary: #0074d9;
$danger: #ff4136;

Sau đó, các biến này được đặt trong bản đồ của Bootstrap $theme-colors:

$theme-colors: (
  "primary": $primary,
  "danger": $danger
);

Thêm vào bản đồ

Thêm màu mới vào $theme-colorshoặc bất kỳ bản đồ nào khác bằng cách tạo một bản đồ Sass mới với các giá trị tùy chỉnh của bạn và hợp nhất nó với bản đồ gốc. Trong trường hợp này, chúng tôi sẽ tạo một $custom-colorsbản đồ mới và hợp nhất nó với $theme-colors.

// Create your own map
$custom-colors: (
  "custom-color": #900
);

// Merge the maps
$theme-colors: map-merge($theme-colors, $custom-colors);

Xóa khỏi bản đồ

Để xóa màu khỏi $theme-colorshoặc bất kỳ bản đồ nào khác, hãy sử dụng map-remove. Lưu ý rằng bạn phải chèn $theme-colorsgiữa các yêu cầu của chúng tôi ngay sau định nghĩa của nó trong variablesvà trước khi sử dụng nó trong maps:

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";

$theme-colors: map-remove($theme-colors, "info", "light", "dark");

@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

// Optional
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc

Các khóa bắt buộc

Bootstrap giả định sự hiện diện của một số khóa cụ thể trong bản đồ Sass khi chúng tôi sử dụng và tự mở rộng chúng. Khi bạn tùy chỉnh các bản đồ được bao gồm, bạn có thể gặp phải lỗi khi khóa của một bản đồ Sass cụ thể đang được sử dụng.

Ví dụ: chúng tôi sử dụng primary, successvà dangercác khóa từ $theme-colorscho các liên kết, nút và trạng thái biểu mẫu. Việc thay thế các giá trị của các khóa này sẽ không có vấn đề gì, nhưng việc xóa chúng có thể gây ra sự cố biên dịch Sass. Trong những trường hợp này, bạn sẽ cần sửa đổi mã Sass sử dụng các giá trị đó.

Chức năng

Màu sắc

Bên cạnh các bản đồ Sass mà chúng tôi có, màu chủ đề cũng có thể được sử dụng làm các biến độc lập, chẳng hạn như $primary.

.custom-element {
  color: $gray-100;
  background-color: $dark;
}

Bạn có thể làm sáng hoặc tối màu bằng Bootstrap's tint-color()và shade-color()các chức năng. Các chức năng này sẽ kết hợp màu sắc với đen hoặc trắng, không giống như bản gốc của Sass lighten()và darken()các chức năng sẽ thay đổi độ đậm nhạt theo một lượng cố định, điều này thường không dẫn đến hiệu quả mong muốn.

// Tint a color: mix a color with white
@function tint-color($color, $weight) {
  @return mix(white, $color, $weight);
}

// Shade a color: mix a color with black
@function shade-color($color, $weight) {
  @return mix(black, $color, $weight);
}

// Shade the color if the weight is positive, else tint it
@function shift-color($color, $weight) {
  @return if($weight > 0, shade-color($color, $weight), tint-color($color, -$weight));
}

Trong thực tế, bạn sẽ gọi hàm và chuyển các tham số màu và trọng lượng vào.

.custom-element {
  color: tint-color($primary, 10%);
}

.custom-element-2 {
  color: shade-color($danger, 30%);
}

Độ tương phản màu

Để đáp ứng các yêu cầu về độ tương phản của Nguyên tắc hỗ trợ tiếp cận nội dung web (WCAG) , tác giả phải cung cấp độ tương phản màu văn bản tối thiểu là 4,5: 1 và độ tương phản màu không phải văn bản tối thiểu là 3: 1 , với rất ít trường hợp ngoại lệ.

Để trợ giúp việc này, chúng tôi đã đưa color-contrastchức năng này vào Bootstrap. Nó sử dụng thuật toán tỷ lệ tương phản WCAG để tính toán ngưỡng tương phản dựa trên độ sáng tương đối trong sRGBkhông gian màu để tự động trả về màu tương phản sáng ( #fff), tối ( #212529) hoặc đen ( #000) dựa trên màu cơ bản được chỉ định. Chức năng này đặc biệt hữu ích cho các mixin hoặc vòng lặp mà bạn đang tạo nhiều lớp.

Ví dụ: để tạo các mẫu màu từ $theme-colorsbản đồ của chúng tôi:

@each $color, $value in $theme-colors {
  .swatch-#{$color} {
    color: color-contrast($value);
  }
}

Nó cũng có thể được sử dụng cho các nhu cầu tương phản một lần:

.custom-element {
  color: color-contrast(#000); // returns `color: #fff`
}

Bạn cũng có thể chỉ định màu cơ bản với các chức năng bản đồ màu của chúng tôi:

.custom-element {
  color: color-contrast($dark); // returns `color: #fff`
}

Thoát SVG

Chúng tôi sử dụng escape-svghàm để thoát và ký <tự cho ảnh nền SVG. Khi sử dụng hàm, các URI dữ liệu phải được trích dẫn.>#escape-svg

Thêm và Trừ các hàm

Chúng tôi sử dụng các hàm addvà subtractđể bọc calchàm CSS. Mục đích chính của các hàm này là để tránh lỗi khi giá trị "không có đơn vị" 0được chuyển vào một calcbiểu thức. Các biểu thức như calc(10px - 0)sẽ trả về một lỗi trong tất cả các trình duyệt, mặc dù chính xác về mặt toán học.

Ví dụ trong đó calc hợp lệ:

$border-radius: .25rem;
$border-width: 1px;

.element {
  // Output calc(.25rem - 1px) is valid
  border-radius: calc($border-radius - $border-width);
}

.element {
  // Output the same calc(.25rem - 1px) as above
  border-radius: subtract($border-radius, $border-width);
}

Ví dụ trong đó calc không hợp lệ:

$border-radius: .25rem;
$border-width: 0;

.element {
  // Output calc(.25rem - 0) is invalid
  border-radius: calc($border-radius - $border-width);
}

.element {
  // Output .25rem
  border-radius: subtract($border-radius, $border-width);
}

Mixin

Thư mục của chúng tôi scss/mixins/có rất nhiều mixin cung cấp năng lượng cho các bộ phận của Bootstrap và cũng có thể được sử dụng trong dự án của riêng bạn.

Phối màu

Một mixin viết tắt cho prefers-color-schemetruy vấn phương tiện có sẵn với sự hỗ trợ lightvà darkcác lược đồ màu tùy chỉnh.

@mixin color-scheme($name) {
  @media (prefers-color-scheme: #{$name}) {
    @content;
  }
}

.custom-element {
  @include color-scheme(dark) {
    // Insert dark mode styles here
  }

  @include color-scheme(custom-named-scheme) {
    // Insert custom color scheme styles here
  }
}