Using Backbreeze in your Sass project.
There are multiple ways to use Sass and multiple Sass versions. All testing for this library is done using
node-sass. There are some recommendations you can find on the Sass website on how to install Sass.
This guide assumes that you have a running Sass setup and are using a
main.scss file (name is not relevant) to include all your Sass partials.
NOTE: Backbreeze is not (yet) written using the new sass module system to be more compatible with older codebases. This might change in the future.
Installation via NPM
Backbreeze is distributed via npm.
$ npm install --save backbreeze
Alternatively you can clone the git repository. And copy the files to some location in your project. This approach is not recommended as you will not have automatic updates and bug fixes.
# Clone from GitHub$ git clone https://github.com/nicolas-cusan/backbreeze.git# Go into directory$ cd backbreeze# Remove the git folder$ rm -rf .git
Including in your project
Backbreeze provides two Sass partials:
_utilities.scss. Due to the way default variables work in Sass you need to overwrite any Backbreeze variables before including the Backbreeze
_config.scss file. It is recommended to include the
_utilities.scss partial last to enable overwriting of any other styles.
To keep things tidy it is also recomended to have a
_vars.scss (name is not relevant) partial to hold your Backbreeze configuration (Learn how to configure Backbreeze here).
// main.scss// Project variables and Backbreeze configuration@include 'vars';// Backbreeze `_config.scss` (file path might vary depending on your setup)@include 'path/to/node_modules/backbreeze/src/config';// Reset stylesheet@include 'path/to/node_modules/destyle.css';// Custom project styles@include 'my-include';@include 'my-other-include';// ....// Backbreeze `_utilities.scss` last to overwrite any other styles// (file path might vary depending on your setup)@include 'path/to/node_modules/backbreeze/src/utilities';
Other ways to use Backbreeze
The Backbreeze npm package includes a compiled CSS version of the library with the default values. However as Backbreeze does not provide a large number of default values it is not recommended to use this version. In addition to that Backbreeze generates a lot of classes so file size might be an issue. It is highly recommended to remove unused classes from your code base for production, you can learn more about it here.