mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-09-03 10:23:05 +02:00
Code Issues Releases Wiki Activity

Migrate to Sass modules

Browse Source
This commit is contained in:
Mark Otto
2025-02-18 09:50:10 -08:00
parent eaa83fa86b
commit d96374ada9
106 changed files with 2001 additions and 1062 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
scss/mixins/_utilities.scss
View File

@@ -1,37 +1,48 @@
@use "sass:list";
@use "sass:map";
@use "sass:meta";
@use "sass:string";
@use "../config" as *;
// Utility generator
// Used to generate utilities & print utilities
@mixin generate-utility($utility, $infix: "", $is-rfs-media-query: false) {
$values: map-get($utility, values);
$values: map.get($utility, values);
// If the values are a list or string, convert it into a map
@if type-of($values) == "string" or type-of(nth($values, 1)) != "list" {
$values: zip($values, $values);
@if meta.type-of($values) == "string" or meta.type-of(list.nth($values, 1)) != "list" {
// A single value is converted to a map with a null key.
@if list.length($values) == 1 {
$values: (null: list.nth($values, 1));
} @else {
$values: list.zip($values, $values);
}
}
@each $key, $value in $values {
$properties: map-get($utility, property);
$properties: map.get($utility, property);
// Multiple properties are possible, for example with vertical or horizontal margins or paddings
@if type-of($properties) == "string" {
$properties: append((), $properties);
@if meta.type-of($properties) == "string" {
$properties: list.append((), $properties);
}
// Use custom class if present
$property-class: if(map-has-key($utility, class), map-get($utility, class), nth($properties, 1));
$property-class: if(map.has-key($utility, class), map.get($utility, class), list.nth($properties, 1));
$property-class: if($property-class == null, "", $property-class);
// Use custom CSS variable name if present, otherwise default to `class`
$css-variable-name: if(map-has-key($utility, css-variable-name), map-get($utility, css-variable-name), map-get($utility, class));
$css-variable-name: if(map.has-key($utility, css-variable-name), map.get($utility, css-variable-name), map.get($utility, class));
// State params to generate pseudo-classes
$state: if(map-has-key($utility, state), map-get($utility, state), ());
$state: if(map.has-key($utility, state), map.get($utility, state), ());
$infix: if($property-class == "" and str-slice($infix, 1, 1) == "-", str-slice($infix, 2), $infix);
$infix: if($property-class == "" and string.slice($infix, 1, 1) == "-", string.slice($infix, 2), $infix);
// Don't prefix if value key is null (e.g. with shadow class)
$property-class-modifier: if($key, if($property-class == "" and $infix == "", "", "-") + $key, "");
@if map-get($utility, rfs) {
@if map.get($utility, rfs) {
// Inside the media query
@if $is-rfs-media-query {
$val: rfs-value($value);
@@ -44,9 +55,9 @@
}
}
$is-css-var: map-get($utility, css-var);
$is-local-vars: map-get($utility, local-vars);
$is-rtl: map-get($utility, rtl);
$is-css-var: map.get($utility, css-var);
$is-local-vars: map.get($utility, local-vars);
$is-rtl: map.get($utility, rtl);
@if $value != null {
@if $is-rtl == false {