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. Use bux-styles.scss as your main scss file.

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.

This method is recommended when building a Drupal theme.

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-webfonts/bux-webfonts.css");

// Add BUX base partials. Order is important.
@import "../path-to-bux/bux-composer/dist/sass/utils/reset";
@import "../path-to-bux/bux-composer/dist/sass/core/spacing";
@import "../path-to-bux/bux-composer/dist/sass/core/breakpoints";
@import "../path-to-bux/bux-composer/dist/sass/core/grid";
@import "../path-to-bux/bux-composer/dist/sass/core/colors";
@import "../path-to-bux/bux-composer/dist/sass/core/typography";
@import "../path-to-bux/bux-composer/dist/sass/core/mixins";
@import "../path-to-bux/bux-composer/dist/sass/core/base";

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

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

Settings file#

The Sass assets come packaged with an optional settings file which can be used to override some system default values such as breakpoints, gutters, container max-width, etc.

To enable the settings file, rename _settings.scss.txt to _settings.scss and uncomment the import statement in bux-styles.scss.

If you are using BUX Sass in conjunction with site-specific scss like in the example above, add @import "settings"; before all BUX base partials.

Available Sass Variables#

Global Mixins#

MixinDescription
clearfix()Provides an easy way to include a clearfix for containing floats. Takes no arguments.
breakpoint($breakpoint)Implements a media query based on a minimum-width and up value. The  $breakpoint  argument takes the following options: sm, md, lg, xl, xxl.
link-reset()Strips BUX basic link styles. May be used as a starting point for other link-based elements. Takes no arguments.
rem-calc($values)Converts one or more pixel values into matching rem values. Default.
visually-hidden($focusable)Hides element visually, but leaves it available for screen readers. Default  $focusable = false. Set to  true  when using for skip links.