mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-24 22:16:38 +02:00
Code Issues Releases Wiki Activity

Document how to disable generated classes and still use the util() mixin

Browse Source
This commit is contained in:
Mark Otto
2023-03-24 23:03:07 -05:00
parent b6e4cf45de
commit 850bd19d0e
2 changed files with 30 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
scss/utilities/_api.scss
View File

@@ -51,8 +51,6 @@
$utilities-map: build-utilities-map(); // stylelint-disable-line scss/dollar-variable-default
// Sometimes it’s useful for a mixin to be able to take any number of arguments. If the last argument in a @mixin declaration ends in ..., then all extra arguments to that mixin are passed to that argument as a list. This argument is known as an argument list.
@mixin util($classes...) {
@each $class in $classes {
@if map-has-key($utilities-map, $class) {

31
site/content/docs/5.3/utilities/mixin.md
View File

@@ -113,7 +113,7 @@ Include multiple utilities in a single `util()` mixin call with a comma separate
}
```
## Custom setup
## Usage
Want to use only the utilities and mixin in your own project? In your project's Sass file, include the following:
@@ -136,3 +136,32 @@ Want to use only the utilities and mixin in your own project? In your project's
color: purple;
}
```
### Disable generated utilities
The `util()` mixin is powered by Sass placeholders, not the generated classes in the compiled CSS. This means you can disable the generated classes and still use the mixin in your custom Sass.
To do this, disable the `$enable-utility-classes` global option, import the required Sass files, and start using the new mixin.
```scss
// Disable the generated utility classes
$enable-utility-classes: false;
// Required Bootstrap imports
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/variables-dark";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/root";
// Import the utilities maps and mixins
@import "bootstrap/scss/utilities";
@import "bootstrap/scss/utilities/api";
// Write your own styles
.test {
@include util(d-inline-flex, p-4, mb-md-3);
color: purple;
}
```