Basscss is built with Rework. Rework is a preprocessor based on the CSS specification and a flexible plugin architecture.

# Imports

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

# Variables

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.

# Custom Media Queries

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

# Custom Builds

To learn more about creating custom builds of Basscss, see Custom Builds.

Imports Variables Custom Media Queries Custom Builds