A set of Sass utility mixins and functions for Mobify's client services team

scss, sass, css, mixins, utilities, mobify
npm install spline-scss@2.2.0



Spline-SCSS, or just Spline, is a mixin and function library for Sass. It makes writing stylesheets for mobile-first builds faster and easier. Spline provides methods to manipulate text, use web & icon fonts, create CSS3 shapes, and much more.



Spline is distributed with the NPM package manager.

  1. Install the NPM package

    Paste this command into your command line in your project's root directory:

    npm install spline-scss --save-dev

    Note: You'll need to have Node and NPM installed to run this command.

  2. Import Spline at the beginning of your Sass stylesheet

    @import "node_modules/spline-scss/dist/spline";

Packages installed through NPM aren't made to be edited. If you need to edit or change anything within Spline, please consider opening an issue or a PR and having it added directly to the project itself.


Spline follows Semantic Versioning. In a nutshell, that means that upgrading to new point releases (eg. moving from 1.0 to 1.1) is safe. Upgrading to new major releases (from 1.0 to 2.0) will cause backwards-incompatible changes.

To update Spline, paste the following command into your command line in your project's root:

npm update spline-scss



The core set of mixins for the project.


Functions are methods of invoking Sass logic and functionality to return values. Read this article to learn more.


Some default variables for use in your projects.

Browser Support

Spline is written for mobile browsers. This means that Spline should support newer desktop browsers as well but old browser support is not a priority. Spline does not contain any browser prefixing. If you're looking for prefixing, we recommend you use Autoprefixer in addition to Spline.

  • iOS 6+
  • Android Browser 2.3+
  • Chrome for Android 35+

Other browsers may be supported but Spline is not actively developed on them. If you find any issues with specific browsers, please log them in our Issues tracker.

How To Test

  1. Run npm install
  2. Run npm run lint
  3. Ensure linter passes
  4. Run grunt
  5. Ensure that all the DEBUG output in your terminal are all passing
  6. Open test/index.html in your browser
  7. Ensure all the tests descriptions are accurate compared to how the styles render


Spline is maintained and funded on Mobify's dime. If you've got things you'd like to see added or removed, submit a PR or tweet at Jeff Kamo. A special shout out to Kyle Peatt, and Ryan Frederick for their past contributions, with which Spline was made possible.

We also owe a lot of thanks to Thoughtbot's Bourbon and Compass. Spline was inspired by both of these projects and draws a lot of its work from them.


MIT License. Spline-SCSS is Copyright © 2014-2016 Mobify. It is free software and may be redistributed under the terms specified in the LICENSE file.