Getting Started

This page is an overview of the Gerillass installation. To see the examples and learn how to use Gerillass, check the sidebar at the left-hand side.

Gerillass is a library built on top of Sass (Syntactically Awesome Style Sheets) to give you flexibility for your projects and accelerate your performance and creativity.

Many of the utilities that come with Gerillass are the solutions I have come up with for the challenges I have faced as a frontend developer over the years. These solutions have been shaped by the inspiration of other popular libraries and frameworks like Bourbon, Susy, Scut, Bootstrap, etc. over time and helped me create Gerillass.

Hope you’ll enjoy using it!

Download the Library

Visit Gerillass Site!

Dart Sass Upgrade

We are saying goodbye to LibSass with version 1.3.0

Because LibSass and the packages built on it, including Node Sass, are deprecated, Gerillass will no longer support LibSass since version 1.3.0 If you’re having a problem running Gerillass v1.3.0 please consider using Dart Sass instead of LibSass. If you are running Dart Sass already, you can install and use Gerillass 1.3.0 and later versions safely. If not, however, please use the earlier versions.

Installation

npm install gerillass

You can import Gerillass with node_modules path.

@import '{node_modules_path}/gerillass/scss/gerillass';

To include the library without using the {node_modules_path} see the examples below.

If you’re working with an eyeglass setup, simply import it without providing the node_modules path.

@import 'gerillass';

Cloning the repository from Github

You can clone the repository into your local computer from Github.

git clone https://github.com/selfishprimate/gerillass.git

Or you can add the library as a submodule into your Git based project (What is a submodule?).

git submodule add https://github.com/selfishprimate/gerillass.git

Including to the project:

@import 'gerillass/scss/gerillass';

Node.js Installation

If you are working on a Node project you can install Gerillass as a dependency.

npm installation

npm install gerillass

Yarn installation

yarn add gerillass

Using with React.js

Simply @import the library at the beginning of your App.scss file without using the node_modules path.

@import 'gerillass';

Using with Gulp

You can add a new Gulp task as in the below example or simply add includePath: ['node_modules/gerillass/scss'] option to the task if you have one already.

function sassify(done) {
  return (
    src("assets/sass/**/*.scss")
    .pipe(sass({
      outputStyle: "expanded",
      includePaths: ["node_modules/gerillass/scss"],
    }).on('error', sass.logError))
    .pipe(dest("assets/css"))
  );
  done()
}

Including to the project:

@import 'gerillass';

Using with Grunt

You can add the Gerillass library by editing your Gruntfile.js at the root level of your project. Simply find the sass related rules and add loadPath: ['node_modules/gerillass/scss'] inside the options object.

sass: {
  dist: {
    options: {
      style: "expanded",
      loadPath: ['node_modules/gerillass/scss']
    },
    files: {
      "main.css": "main.scss"
    }
  }
}

Including to the project:

@import 'gerillass';

Experimenting

Experimentation with Gerillass is easy: If you’re processing Sass files on your computer already, download the Gerillass Sass library, include it in your project, and start using it. If not, use Gerillass Play! Gerillass Play is a Gulp based playground, built for you to get started with Sass and Gerillass quickly.

Important Note: Don’t forget that you must have Node.js and Gulp installed globally on your machine.

Testing

Gerillass comes with a unit-testing module named True, which makes Sass unit tests possible (endless thanks to the OddBird Team).

You can find two test examples under the test folder, take your time, examine the codes, and then write your unit tests. After that, run the following command to see if the tests pass.

npm test