Solid includes mixins to help extend the framework in your custom SCSS.
Use the solid-breakpoint mixin to apply styles at the standard Solid breakpoints. This mixin requires a Solid breakpoint prefix (xs, sm, md, or lg) in order to call the appropriate media query.
.custom-style-that-needs-media-query {
@include solid-breakpoint ($breakpoint);
}
Use the generate-breakpoint-prefixes mixin to add responsive prefixes to any class.
@include generate-breakpoint-prefixes {
&class-that-needs-responsive-prefixing {
};
}
The button-style mixin takes custom color values and includes all of the base button styles needed to easily create custom button colors.
.button--custom {
@include button-style($fill-color, $text-color, $secondary-text-color:$fill-color, $secondary-hover-text-color:$text-color);
}