Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Utility-Class (like Bootstrap 5) buut.. in a simple way
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px
);
$utilities: (
"text-[color]": (
class: text,
property: color,
responsive: sm md,
hover: secondary,
group-hover: secondary,
values: (
primary: #007bff,
secondary: #6c757d,
),
),
);
@function is-map($var){
@return type-of($var) == 'map';
}
@each $key, $utility in $utilities {
$_property: if(map-get($utility, 'property'), map-get($utility, 'property'), $key);
$_class: if(map-get($utility, 'class'), map-get($utility, 'class'), $key);
$_values: map-get($utility, 'values');
$_responsive: map-get($utility, 'responsive');
$_hover: map-get($utility, 'hover');
$_group-hover: map-get($utility, 'group-hover');
// values
@each $key, $value in $_values {
$_value: if($value, $value, $key);
.#{$_class}-#{$key} {
#{$_property}: $_value !important;
}
}
// hover
@if $_hover {
@each $key in $_hover {
$_value: if(is-map($_values), map-get($_values, $key), $key);
.hover\:#{$_class}-#{$key}:hover {
#{$_property}: $_value !important;
}
}
}
// group-hover
@if($_group-hover){
@each $group-value in $_group-hover {
$_value: if(is-map($_values), map-get($_values, $group-value), $group-value);
.group:hover .group-hover\:#{$_class}-#{$group-value}{
#{$_property}: $_value !important;
}
}
}
// responsive
@if $_responsive {
@each $breakpoint in $_responsive {
$_breakpoint-width: map-get($grid-breakpoints, $breakpoint);
@media (min-width:$_breakpoint-width) {
// values
@each $key, $value in $_values {
$_value: if($value, $value, $key);
.#{$breakpoint}\:#{$_class}-#{$key} {
#{$_property}: $_value !important;
}
}
// hover
@if $_hover {
@each $key in $_hover {
$_value: if(is-map($_values), map-get($_values, $key), $key);
.#{$breakpoint}\:hover\:#{$_class}-#{$key}:hover {
#{$_property}: $_value !important;
}
}
}
// group-hover
@if($_group-hover){
@each $group-value in $_group-hover {
$_value: if(is-map($_values), map-get($_values, $group-value), $group-value);
.group:hover .#{$breakpoint}\:group-hover\:#{$_class}-#{$group-value}{
#{$_property}: $_value !important;
}
}
}
}
}
}
}
// ==== OUT ==== \\
/*
.text-primary {
color: #007bff !important;
}
.text-secondary {
color: #6c757d !important;
}
.hover\:text-secondary:hover {
color: #6c757d !important;
}
.group:hover .group-hover\:text-secondary {
color: #6c757d !important;
}
@media (min-width: 768px) {
.md\:text-primary {
color: #007bff !important;
}
.md\:text-secondary {
color: #6c757d !important;
}
.md\:hover\:text-secondary:hover {
color: #6c757d !important;
}
.group:hover .md\:group-hover\:text-secondary {
color: #6c757d !important;
}
}
@media (min-width: 576px) {
.sm\:text-primary {
color: #007bff !important;
}
.sm\:text-secondary {
color: #6c757d !important;
}
.sm\:hover\:text-secondary:hover {
color: #6c757d !important;
}
.group:hover .sm\:group-hover\:text-secondary {
color: #6c757d !important;
}
}
*/
$utilities: (
// Format
// ------
// {breakpoint?hover?parent-hover?}-{key} {
// {property}: {value} !important;
// }
// -------
// LAYOUT
// -------
"position-[variant]": (
class: position,
property: position,
values: (
relative: relative,
absolute: absolute,
),
responsive: sm,
),
"top-[size]": (
class: top,
property: top,
values: (
none: none,
0: 0,
1: 1rem,
2: 2rem,
3: 3rem,
4: 4rem,
),
responsive: sm,
),
"right-[size]": (
class: right,
property: right,
values: (
none: none,
0: 0,
1: 1rem,
2: 2rem,
3: 3rem,
4: 4rem,
),
responsive: sm,
),
"bottom-[size]": (
class: bottom,
property: bottom,
values: (
none: none,
0: 0,
1: 1rem,
2: 2rem,
3: 3rem,
4: 4rem,
)
),
"left-[size]": (
class: left,
property: left,
values: (
none: none,
0: 0,
1: 1rem,
2: 2rem,
3: 3rem,
4: 4rem,
off: -4000rem,
),
responsive: sm,
),
// ------------
// BACKGROUNDS
// ------------
"bg-[color]": (
class: bg,
property: background-color,
values: (
white: $white,
grey-light: $color-text-grey-light,
light-background: $color-light-background,
blue-100: #e7f5f5,
),
hover: light-background,
),
"bg-[size]": (
class: bg,
property: background-size,
values: (
auto: auto,
cover: cover,
contain: contain,
),
),
// --------
// BORDERS
// --------
"border-[width]": (
class: border,
property: border-width,
values: (
0: 0,
),
),
"border-[color]": (
class: border,
property: border-color,
values: (
grey-light: $color-light-grey-3-1,
brand-wcag-3-1: $color-brand-wcag-3-1,
color-z: rgba(1, 159, 163, 0.4),
),
hover: brand-wcag-3-1,
),
"rounded-[size]": (
class: rounded,
property: border-radius,
values: (
xl: 1rem,
)
),
// --------
// SPACING
// --------
"ml-[size]": (
class: ml,
property: margin-left,
values: (
0: 0,
1: 0.25rem,
2: 0.5rem,
3: 0.75rem,
),
hover: 0 1 2 3,
group-hover: 0 1 2 3,
),
"mb-[size]": (
class: mb,
property: margin-bottom,
values: (
10: 2.50rem,
),
),
// -------
// SIZING
// -------
"w-[variant]": (
class: w,
property: width,
values: (
auto: auto,
screen: 100vw,
full: 100%,
half: 50%,
px: 1px,
0: 0,
1: 0.25rem, // 4px
2: 0.5rem, // 8px
3: 0.75rem, // 12px
4: 1rem, // 16px
5: 1.25rem, // 20px
6: 1.5rem, // 24px
8: 2rem, // 32px
10: 2.5rem, // 40px
12: 3rem, // 48px
16: 4rem, // 64px
20: 5rem, // 80px
perc-25: 25%,
perc-33: 33.333333%,
perc-50: 50%,
perc-66: 66.666667%,
perc-75: 75%,
),
),
"h-[variant]": (
class: h,
property: height,
values: (
auto: auto,
screen: 100vw,
full: 100%,
px: 1px,
0: 0,
1: 0.25rem, // 4px
2: 0.5rem, // 8px
3: 0.75rem, // 12px
4: 1rem, // 16px
5: 1.25rem, // 20px
6: 1.5rem, // 24px
8: 2rem, // 32px
10: 2.5rem, // 40px
12: 3rem, // 48px
16: 4rem, // 64px
20: 5rem, // 80px
),
),
// -----------
// TYPOGRAPHY
// -----------
"text-[color]": (
class: text,
property: color,
values: (
black: $black,
grey-light: $color-text-grey-light,
light-grey-3-1: $color-light-grey-3-1,
brand-text: $color-brand-text,
brand-dark: $color-brand-dark,
),
hover: brand-dark,
),
"text-[font-size]": (
class: text,
property: font-size,
values: (
xs:0.75rem,
sm:0.875rem,
base:1rem,
lg:1.125rem,
xl:1.25rem,
2xl:1.5rem,
3xl:1.875rem,
4xl:2.25rem,
5xl:3rem,
6xl:4rem,
)
),
"font-weight-[variant]": (
class: font-weight,
property: font-weight,
values: (
medium: 500,
)
),
"leading-[variant]": (
class: leading,
property: line-height,
values: (
none: 1,
tight: 1.25,
snug: 1.375,
normal: 1.5,
)
),
"list-[variant]": (
class: list,
property: list-style-type,
values: (
none: none,
disc: disc,
)
),
// -------------
// TRANSITIONS
// -------------
"transition-[variation]": (
class: transition,
property: transition-property,
values: (
none: none,
all: all,
margin: margin,
),
),
"duration-[variation]": (
class: duration,
property: transition-duration,
values: (
300: 300ms,
),
),
// --------------
// INTERACTIVITY
// --------------
"cursor": (
class: cursor,
property: cursor,
values: default pointer not-allowed,
)
);
@ricardocanelas

This comment has been minimized.

Copy link
Owner Author

@ricardocanelas ricardocanelas commented Jun 23, 2020

You can check the code in https://www.sassmeister.com/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment