Skip to content

Instantly share code, notes, and snippets.

@c-kick
Last active January 25, 2024 10:33
Show Gist options
  • Save c-kick/e2d39d500ef0bf3b9f6b884cdca6e232 to your computer and use it in GitHub Desktop.
Save c-kick/e2d39d500ef0bf3b9f6b884cdca6e232 to your computer and use it in GitHub Desktop.
Extends Bootstrap (padding, margin, gap, etc.) utilities with css variables
//
// Extends Bootstrap utilities defined in map '$add_css_variables_to' with css variables
// containing their respective units. Also adds additional values,
// if specified as 'name: variable' pairs in '$add_values'
//
// example:
// $add_css_variables_to: (
// padding-x
// )
// $add_values: (
// grid : var(--gap)
// )
//
// before:
//
// .px-1 {
// padding-right: 0.25rem !important;
// padding-left: 0.25rem !important;
// }
//
// after:
//
// .px-1 {
// padding-right: 0.25rem !important;
// padding-left: 0.25rem !important;
// --padding-right: 0.25rem !important;
// --padding-left: 0.25rem !important;
// }
//
// including an additional:
//
// .px-grid {
// padding-right: var(--gap) !important;
// padding-left: var(--gap) !important;
// --padding-right: var(--gap) !important;
// --padding-left: var(--gap) !important;
// }
// (and all responsive definitions, of course)
//
//
$utilities: () !default;
$add_css_variables_to: (
padding,
padding-x,
padding-y,
padding-top,
padding-end,
padding-bottom,
padding-start,
margin,
margin-x,
margin-y,
margin-top,
margin-end,
margin-bottom,
margin-start,
gap,
row-gap,
column-gap
);
@if $enable-negative-margins {
$add_css_variables_to: join($add_css_variables_to, (
negative-margin,
negative-margin-x,
negative-margin-y,
negative-margin-top,
negative-margin-end,
negative-margin-bottom,
negative-margin-start,
));
}
$add_values: (
grid : var(--gap, #{$spacer}),
row : var(--row-gap, #{$spacer}),
column : var(--column-gap, #{$spacer}),
);
@each $utility_name in $add_css_variables_to {
$additional_values: ();
$css_variables: ();
$orig_properties: map-get(map-get($utilities, "#{$utility_name}"), "property");
@each $property in map-get(map-get($utilities, "#{$utility_name}"), "property") {
$css_variables: join($css_variables, --#{quote($property)}, space);
}
@each $value, $variable in $add_values {
$additional_values: if($utility_name != "#{$value}", map-merge($additional_values, (#{$value}: #{$variable})), ());
}
$utilities: map-merge(
$utilities, (
"#{$utility_name}": map-merge(
map-get($utilities, "#{$utility_name}"),
(
property: join(map-get(map-get($utilities, "#{$utility_name}"), "property"), $css_variables, space),
values: map-merge(map-get(map-get($utilities, "#{$utility_name}"), "values"), $additional_values),
),
)
)
);
// print out <class>-current classes that set padding to the current variable
// useful to set equal padding in nested elements,
// for example setting .px-current on an element inside a .px-1 element
// will apply the same (responsive) left and right padding to it
.#{map-get(map-get($utilities, "#{$utility_name}"), "class")}-current {
@each $property in $orig_properties {
#{$property}: var(--#{$property}, 0);
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment