SASS Mixins

Using Solid Mixins in Custom SCSS

Solid includes mixins to help extend the framework in your custom SCSS.

Solid Breakpoint

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);

Generate Breakpoint Prefixes

Use the generate-breakpoint-prefixes mixin to add responsive prefixes to any class.

  @include generate-breakpoint-prefixes {
    &class-that-needs-responsive-prefixing {

Custom Buttons

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);