Skip to content

Commit 91e25a3

Browse files
mdomdo
committed
Update utility mixin and wrap utility classes in $enable- variable
- Rearrange Sass files to simplify things - Rename `utl()` to `util()` - Add new `$enable-utility-classes` variable for disabling the default generation of our utilities (useful if you want to only use utilities via mixin)
1 parent 6ea0e7e commit 91e25a3

8 files changed

Lines changed: 61 additions & 59 deletions

File tree

‎scss/_variables.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -348,6 +348,7 @@ $enable-rfs: true !default;
348348
$enable-validation-icons: true !default;
349349
$enable-negative-margins: false !default;
350350
$enable-deprecation-messages: true !default;
351+
$enable-utility-classes: true !default;
351352
$enable-important-utilities: true !default;
352353

353354
// Prefix for :root CSS variables

‎scss/bootstrap-grid.scss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,4 +66,3 @@ $utilities: map-get-multiple(
6666
);
6767

6868
@import "utilities/api";
69-
@import "utilities/mixin";

‎scss/bootstrap-utilities.scss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,4 +17,3 @@
1717

1818
// Utilities
1919
@import "utilities/api";
20-
@import "utilities/mixin";

‎scss/bootstrap.scss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,5 +51,4 @@
5151

5252
// Utilities
5353
@import "utilities/api";
54-
@import "utilities/mixin";
5554
// scss-docs-end import-stack

‎scss/functions/_utilities-map.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,8 @@
1414
}
1515

1616
$utilities-map: () !default;
17-
@each $key, $utility in $utilities {
1817

18+
@each $key, $utility in $utilities {
1919
@if type-of($utility) == "map" {
2020
$properties: map-get($utility, property);
2121
// Some utilities set the value on more than one property.

‎scss/utilities/_api.scss‎

Lines changed: 58 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,74 @@
1-
// Loop over each breakpoint
2-
@each $breakpoint in map-keys($grid-breakpoints) {
3-
4-
// Generate media query if needed
5-
@include media-breakpoint-up($breakpoint) {
6-
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
7-
8-
// Loop over each utility property
9-
@each $key, $utility in $utilities {
10-
// The utility can be disabled with `false`, thus check if the utility is a map first
11-
// Only proceed if responsive media queries are enabled or if it's the base media query
12-
@if type-of($utility) == "map" and (map-get($utility, responsive) or $infix == "") {
13-
@include generate-utility($utility, $infix);
14-
}
15-
}
16-
}
17-
}
18-
19-
// RFS rescaling
20-
@media (min-width: $rfs-mq-value) {
1+
@if $enable-utility-classes {
2+
// Loop over each breakpoint
213
@each $breakpoint in map-keys($grid-breakpoints) {
22-
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
4+
// Generate media query if needed
5+
@include media-breakpoint-up($breakpoint) {
6+
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
237

24-
@if (map-get($grid-breakpoints, $breakpoint) < $rfs-breakpoint) {
258
// Loop over each utility property
269
@each $key, $utility in $utilities {
2710
// The utility can be disabled with `false`, thus check if the utility is a map first
2811
// Only proceed if responsive media queries are enabled or if it's the base media query
29-
@if type-of($utility) == "map" and map-get($utility, rfs) and (map-get($utility, responsive) or $infix == "") {
30-
@include generate-utility($utility, $infix, true);
12+
@if type-of($utility) == "map" and (map-get($utility, responsive) or $infix == "") {
13+
@include generate-utility($utility, $infix);
14+
}
15+
}
16+
}
17+
}
18+
19+
// RFS rescaling
20+
@media (min-width: $rfs-mq-value) {
21+
@each $breakpoint in map-keys($grid-breakpoints) {
22+
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
23+
24+
@if (map-get($grid-breakpoints, $breakpoint) < $rfs-breakpoint) {
25+
// Loop over each utility property
26+
@each $key, $utility in $utilities {
27+
// The utility can be disabled with `false`, thus check if the utility is a map first
28+
// Only proceed if responsive media queries are enabled or if it's the base media query
29+
@if type-of($utility) == "map" and map-get($utility, rfs) and (map-get($utility, responsive) or $infix == "") {
30+
@include generate-utility($utility, $infix, true);
31+
}
3132
}
3233
}
3334
}
3435
}
36+
37+
38+
// Print utilities
39+
@media print {
40+
@each $key, $utility in $utilities {
41+
// The utility can be disabled with `false`, thus check if the utility is a map first
42+
// Then check if the utility needs print styles
43+
@if type-of($utility) == "map" and map-get($utility, print) == true {
44+
@include generate-utility($utility, "-print");
45+
}
46+
}
47+
}
3548
}
3649

50+
// Generate utility placeholders
51+
52+
$utilities-map: build-utilities-map(); // stylelint-disable-line scss/dollar-variable-default
3753

38-
// Print utilities
39-
@media print {
40-
@each $key, $utility in $utilities {
41-
// The utility can be disabled with `false`, thus check if the utility is a map first
42-
// Then check if the utility needs print styles
43-
@if type-of($utility) == "map" and map-get($utility, print) == true {
44-
@include generate-utility($utility, "-print");
54+
@mixin util($class) {
55+
@if map-has-key($utilities-map, $class) {
56+
$definition: map-get($utilities-map, $class);
57+
$breakpoint: map-get($definition, breakpoint);
58+
@if $breakpoint != null {
59+
@include media-breakpoint-up($breakpoint) {
60+
@each $property in map-get($definition, properties) {
61+
#{$property}: map-get($definition, value);
62+
}
63+
}
4564
}
65+
@else {
66+
@each $property in map-get($definition, properties) {
67+
#{$property}: map-get($definition, value);
68+
}
69+
}
70+
}
71+
@else {
72+
@debug "Unknown utility class " + $class;
4673
}
4774
}

‎scss/utilities/_mixin.scss‎

Lines changed: 0 additions & 24 deletions
This file was deleted.

‎site/content/docs/5.1/customize/options.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ You can find and customize these variables for key global options in Bootstrap's
2626
| `$enable-validation-icons` | `true` (default) or `false` | Enables `background-image` icons within textual inputs and some custom forms for validation states. |
2727
| `$enable-negative-margins` | `true` or `false` (default) | Enables the generation of [negative margin utilities]({{< docsref "/utilities/spacing#negative-margin" >}}). |
2828
| `$enable-deprecation-messages` | `true` (default) or `false` | Set to `false` to hide warnings when using any of the deprecated mixins and functions that are planned to be removed in `v6`. |
29+
| `$enable-utility-classes` | `true` (default) or `false` | Enables the generation of utility classes. |
2930
| `$enable-important-utilities` | `true` (default) or `false` | Enables the `!important` suffix in utility classes. |
3031
| `$enable-smooth-scroll` | `true` (default) or `false` | Applies `scroll-behavior: smooth` globally, except for users asking for reduced motion through [`prefers-reduced-motion` media query]({{< docsref "/getting-started/accessibility#reduced-motion" >}}) |
3132
{{< /bs-table >}}

0 commit comments

Comments
 (0)