Skip to main content

Using Sass

BUX CSS is generated via Sass.

Depending on your use case, you may choose to use the Sass source files in your project instead of the compiled CSS.

Some example use cases may be that you want to use the Sass variables and mixins elsewhere in your theme, that you want to extend a class, or that you would like to override the default breakpoint settings.

How to implement​

Add the Sass files to your project via a direct download, NPM, or Composer and integrate them into your normal Sass workflow. global.scss will load all global styling. Include component specific styling with Sass's @use rule

How to use in conjunction with site-specific Sass​

Import all fonts and BUX partials into your main scss file prior to the site-specific scss files. This will provide access to BUX variables and mixins from your site-specific scss files.

Example main.scss file​

// Fonts
@import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@300;400;600");
@import url("https://assets.bux.osu.edu/bux-icons/bux-icons.css");
@import url("https://assets.bux.osu.edu/bux-webfonts2/bux-webfonts2.css");

// Add BUX global.
@import "../path-to-bux/bux/dist/sass/global.scss";

// Add component partials from BUX. Order is not important, can be globbed.
@import "../path-to-bux/bux/dist/sass/components/**/_*.module.scss";

// Add partials from your site.
@import "base/**/*.scss";
@import "components/**/*.scss";

Available Sass Variables​

Global Mixins​

MixinDescription
button-reset()Resets button styles to a neutral baseline for custom styling.
clearfix()Provides a clearfix to contain floated children.
link-base($background, $hasVisited)Base styling for links with support for different background contexts (none, light, dark, scarlet) and optional visited state styling.
link-reset()Removes default BUX link styling for custom link implementations.
visually-hidden($focusable)Hides content visually while keeping it accessible to screen readers. Set $focusable to true to allow focus styles.
visually-hidden-reset()Restores visibility for elements previously hidden with visually-hidden.
form-element()Provides base layout and structure for form field wrappers and labels.
form-input()Applies standard styling for text-based form inputs.
form-input-disabled()Styles disabled form inputs with appropriate visual cues.
form-input-error()Applies error styling to form inputs.
form-error-message()Styles validation error messages for form fields.
heading($size, $height, $weight, $color, $font, $link-color)Defines consistent heading styles including typography and nested link behavior.
bux-list-ul-base()Applies base styling for unordered lists.
bux-list-ol-base()Applies base styling for ordered lists.
dark-theme()Wraps styles to apply only when the .bux-dark-theme class is present on the html element.
Back to top