node package manager
Love JavaScript? Your insights can make it even better. Take the 2017 JavaScript Ecosystem Survey »



Latest Stable Version License NPM Downloads

scss-base is a selection of styles that provide a clean default look for SCSS projects. The fonts used are Droid Sans and Droid Sans Mono.

This also uses Normalize.css as a base style 'reset' (via node-normalize-scss). Because of this, you will not need a separate style reset/normalizer. scss-base also includes the standard box-sizing: border-box; reset.

Even with that, scss-base is less than 3KB zipped (~10KB minified).


You can see a demo page with all the styles provided by scss-base at


Simply run npm i scss-base node-normalize-scss -D to include scss-base and its peer dependency in your project and save it in your package.json.

Import scss-base in your SCSS to use the provided styles.

//@import 'your-override-variables'; 
@import 'scss-base';

If you use Gulp and gulp-sass, your SCSS task looks something like this:

var sass = require('gulp-sass'),
    scss_base = 'node_modules/scss-base/src';
gulp.task('scss', function() {
    return gulp.src('/path/to/your/main.scss')
            precision: 10,
            includePaths: [
        //.pipe(do other stuff - concat, minify, etc.) 


scss-base has a few variables to set the colors and fonts it uses. If you override these before including scss-base in your SCSS, the output changes to match your choices. The following variables are set by scss-base:

$color-background: #fefefe !default;
$color-text: #333 !default;
$color-text-button: #333 !default;
$color-mark: #f3f315 !default;
$color-border: #aaa !default;
$color-table-row: lighten($color-text, 75%) !default;
$color-primary: #7fd4ff !default;
$color-secondary: #86deb7 !default;
$color-toggle-on: #86deb7 !default;
$color-toggle-off: #da6869 !default;
$color-disabled: #aaa !default;
$font-url: ',700|Droid+Sans+Mono' !default;
$font-name: 'Droid Sans' !default;
$font-name-mono: 'Droid Sans Mono' !default;
$white: #fff;