Basscss is built with Rework. Rework is a preprocessor based on the CSS specification and a flexible plugin architecture.
Create a source CSS file to import the Basscss modules.
@import "basscss-base";
@import "basscss-utilities";
To import custom files within the same folder, use ./
to indicate the current folder.
See Rework NPM for more details on usage.
@import "basscss-base";
@import "basscss-utilities";
@import "./buttons.css";
Set CSS variables after the imports to alter Basscss’s default values.
@import "basscss-base";
@import "basscss-utilities";
:root {
--font-family: Georgia, serif;
}
To use variables as property values, follow this syntax:
.button-red {
color: white;
background-color: var(--red);
}
To set an inline fallback value, place it after the variable name separated by a comma.
.button-red {
color: white;
background-color: var(--red, #f00);
}
See Rework Vars for more details on usage.
To adjust breakpoints for the default media queries, set custom media queries after the imports. See Rework Custom Media for more details on usage.
@import "basscss-base";
@import "basscss-utilities";
@custom-media --breakpoint-sm (min-width: 32em);
To learn more about creating custom builds of Basscss, see Custom Builds.