{% extends 'layouts/docs.html' %} {% set page = references.rework %} {% set isdocs = true %} {% block content %}

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.

{% highlight 'css' %}
@import "basscss-base";
@import "basscss-utilities";
{% endhighlight %}

To import custom files within the same folder, use ./ to indicate the current folder. See Rework NPM for more details on usage.

{% highlight 'css' %}
@import "basscss-base";
@import "basscss-utilities";
@import "./buttons.css";
{% endhighlight %}

Variables

Set CSS variables after the imports to alter Basscss’s default values.

{% highlight 'css' %}
@import "basscss-base";
@import "basscss-utilities";

:root {
  --font-family: Georgia, serif;
}
{% endhighlight %}

To use variables as property values, follow this syntax:

{% highlight 'css' %}
.button-red {
  color: white;
  background-color: var(--red);
}
{% endhighlight %}

To set an inline fallback value, place it after the variable name separated by a comma.

{% highlight 'css' %}
.button-red {
  color: white;
  background-color: var(--red, #f00);
}
{% endhighlight %}

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.

{% highlight 'css' %}
@import "basscss-base";
@import "basscss-utilities";

@custom-media --breakpoint-sm (min-width: 32em);
{% endhighlight %}

Custom Builds

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

{% endblock %}