Tôi có thể kết hợp CSS và SCSS không?

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 trông như thế này

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 thiết lập thủ công một cái gì đó tương tự với cấu trúc đó, giữ các tệp nguồn của Bootstrap tách biệt với các tệp nguồn của bạn

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

nhập khẩu

Trong

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

9 của bạn, 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 những phần bạn cần. Chúng tôi khuyến khích cách thứ hai, mặc dù lưu ý rằng có một số yêu cầu và sự phụ thuộc giữa 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";
@import "../node_modules/bootstrap/scss/mixins";

// 4. Include any optional Bootstrap components as you like
@import "../node_modules/bootstrap/scss/root";
@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";

// 5. 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 Sass và bản đồ nào trong

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

9 của mình. Bạn cũng có thể bắt đầu thêm các phần của Bootstrap trong phần

// 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

1 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ừ tệp

// 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

2 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 bao gồm cờ

// 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

3 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 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 cờ

// 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

3. Nếu một biến đã được gán, thì nó sẽ không được gán lại bởi 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

// 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

5. Một số biến được đặt thành

// 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

6, các biến này không xuất thuộc tính trừ khi chúng bị ghi đè trong cấu hình của bạn

Ghi đè biến phải xuất hiện sau khi các chức năng của chúng tôi được nhập, nhưng trước phần còn lại của quá trình nhập

Đây là một ví dụ thay đổ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

7 và

// 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

8 khi nhập và biên dịch Bootstrap qua npm

// 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/mixins";

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

Lặp lại nếu cần cho bất kỳ biến nào trong Bootstrap, bao gồm 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à Biểu tượng Bootstrap

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

Bootstrap bao gồm một số bản đồ Sass, các cặp giá trị chính 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. Giống như các biến Sass, tất cả các bản đồ Sass bao gồm cờ

// 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

3 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 phải trả giá bằng việc loại bỏ các vật phẩm khỏi bản đồ khó khăn hơn một chút

sửa đổi bản đồ

Tất cả các biến trong bản đồ

// 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";
@import "../node_modules/bootstrap/scss/mixins";

// 4. Include any optional Bootstrap components as you like
@import "../node_modules/bootstrap/scss/root";
@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";

// 5. Add additional custom code here

0 được xác định là biến độc lập. Để sửa đổi màu hiện có trong bản đồ

// 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";
@import "../node_modules/bootstrap/scss/mixins";

// 4. Include any optional Bootstrap components as you like
@import "../node_modules/bootstrap/scss/root";
@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";

// 5. Add additional custom code here

0 của chúng tôi, hãy thêm phần 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 đồ

// 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";
@import "../node_modules/bootstrap/scss/mixins";

// 4. Include any optional Bootstrap components as you like
@import "../node_modules/bootstrap/scss/root";
@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";

// 5. Add additional custom code here

0 của Bootstrap

$theme-colors: [
  "primary": $primary,
  "danger": $danger
];

Thêm vào bản đồ

Thêm màu mới vào

// 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";
@import "../node_modules/bootstrap/scss/mixins";

// 4. Include any optional Bootstrap components as you like
@import "../node_modules/bootstrap/scss/root";
@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";

// 5. Add additional custom code here

0 hoặc bất kỳ bản đồ nào khác bằng cách tạo 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 bản đồ

// 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";
@import "../node_modules/bootstrap/scss/mixins";

// 4. Include any optional Bootstrap components as you like
@import "../node_modules/bootstrap/scss/root";
@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";

// 5. Add additional custom code here

4 mới và hợp nhất nó với

// 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";
@import "../node_modules/bootstrap/scss/mixins";

// 4. Include any optional Bootstrap components as you like
@import "../node_modules/bootstrap/scss/root";
@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";

// 5. Add additional custom code here

0

// 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

// 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";
@import "../node_modules/bootstrap/scss/mixins";

// 4. Include any optional Bootstrap components as you like
@import "../node_modules/bootstrap/scss/root";
@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";

// 5. Add additional custom code here

0 hoặc bất kỳ bản đồ nào khác, hãy sử dụng

// 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";
@import "../node_modules/bootstrap/scss/mixins";

// 4. Include any optional Bootstrap components as you like
@import "../node_modules/bootstrap/scss/root";
@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";

// 5. Add additional custom code here

7. Xin lưu ý rằng bạn phải chèn nó vào giữa các yêu cầu và tùy chọn của chúng tôi

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

$theme-colors: map-remove[$theme-colors, "info", "light", "dark"];

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

Các phím 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 các khóa này. Khi bạn tùy chỉnh các bản đồ đi kèm, bạn có thể gặp lỗi khi sử dụng khóa của bản đồ Sass cụ thể

Ví dụ: chúng tôi sử dụng các khóa

// 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";
@import "../node_modules/bootstrap/scss/mixins";

// 4. Include any optional Bootstrap components as you like
@import "../node_modules/bootstrap/scss/root";
@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";

// 5. Add additional custom code here

8,

// 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";
@import "../node_modules/bootstrap/scss/mixins";

// 4. Include any optional Bootstrap components as you like
@import "../node_modules/bootstrap/scss/root";
@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";

// 5. Add additional custom code here

9 và

// 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/mixins";

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

0 từ

// 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";
@import "../node_modules/bootstrap/scss/mixins";

// 4. Include any optional Bootstrap components as you like
@import "../node_modules/bootstrap/scss/root";
@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";

// 5. Add additional custom code here

0 cho 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 chúng ta có, màu chủ đề cũng có thể được sử dụng làm biến độc lập, chẳng hạn như

// 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/mixins";

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

2

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

Bạn có thể làm sáng hoặc làm tối các màu bằng các hàm

// 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/mixins";

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

3 và

// 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/mixins";

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

4 của Bootstrap. Các chức năng này sẽ trộn màu với đen hoặc trắng, không giống như các chức năng gốc

// 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/mixins";

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

5 và

// 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/mixins";

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

6 của Sass 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 ứng mong muốn

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

0

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

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

1

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

Để đáp ứng WCAG 2. 0 về độ tương phản màu sắc, tác giả phải cung cấp, với rất ít ngoại lệ

Một chức năng bổ sung mà chúng tôi đưa vào Bootstrap là chức năng tương phản màu,

// 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/mixins";

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

7. Nó sử dụng ngưỡng tương phản để tính toán dựa trên độ sáng tương đối trong không gian màu

// 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/mixins";

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

8 để tự động trả lại màu tương phản sáng [

// 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/mixins";

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

9], tối [

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

0] hoặc đen [

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

1] dựa trên màu cơ bản đã chỉ định. Hàm 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ừ bản đồ

// 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";
@import "../node_modules/bootstrap/scss/mixins";

// 4. Include any optional Bootstrap components as you like
@import "../node_modules/bootstrap/scss/root";
@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";

// 5. Add additional custom code here

0 của chúng tôi

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

2

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

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

3

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

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

4

Thoát khỏi SVG

Chúng tôi sử dụng hàm

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

3 để thoát các ký tự

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

4,

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

5 và

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

6 cho ảnh nền SVG. Khi sử dụng hàm

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

3, URI dữ liệu phải được trích dẫn

Các hàm cộng và trừ

Chúng tôi sử dụng các hàm

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

8 và

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

9 để bọc hàm CSS

$theme-colors: [
  "primary": $primary,
  "danger": $danger
];

0. Mục đích chính của các hàm này là để tránh lỗi khi một giá trị "không có đơn vị"

$theme-colors: [
  "primary": $primary,
  "danger": $danger
];

1 được chuyển vào một biểu thức

$theme-colors: [
  "primary": $primary,
  "danger": $danger
];

0. Các biểu thức như

$theme-colors: [
  "primary": $primary,
  "danger": $danger
];

3 sẽ trả về lỗi trong tất cả các trình duyệt, mặc dù đúng về mặt toán học

Ví dụ về calc hợp lệ

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

5

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

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

6

hỗn hợp

Thư mục

$theme-colors: [
  "primary": $primary,
  "danger": $danger
];

4 của chúng tôi 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

Mixin tốc ký cho truy vấn phương tiện

$theme-colors: [
  "primary": $primary,
  "danger": $danger
];

5 có sẵn với sự hỗ trợ cho

$theme-colors: [
  "primary": $primary,
  "danger": $danger
];

6,

$theme-colors: [
  "primary": $primary,
  "danger": $danger
];

7 và bảng phối màu tùy chỉnh

Bạn có thể sử dụng SCSS với CSS không?

Tôi có thể sử dụng SCSS và CSS trong cùng một dự án không?