Convert SharePoint spcolor-files to Sass partials
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore
.travis.yml
LICENSE
README.md
index.js
index.test.js
package.json

README.md

gulp-spcolor2scss

Convert SharePoint spcolor-files to Sass partials

Build Status

Installation

Install package with NPM and add it to your development dependencies:

npm install --save-dev gulp-spcolor2scss

Basic usage

1. Use gulp to convert your spcolor file to a scss partial

'use strict';

var gulp = require('gulp');
var sass = require('gulp-sass');
var header = require('gulp-header');
var spcolor2scss = require('gulp-spcolor2scss');

gulp.task('spcolor', function() {
    return gulp.src('./themes/custom.spcolor', { buffer: true })
        .pipe(spcolor2scss())
        .pipe(header("//\n// This file is autogenerated. Do not edit!\n//\n"))        
        .pipe(gulp.dest('./sass'))        
});

gulp.task('css', ['spcolor'], function() {
    return gulp.src('./sass/**/*.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest('css'));    
});

2. Import the generated partial to you sass file

// Original spcolor file was named 'custom.spcolor'
// It has been renamed to "_custom_spcolor.scss" by the plugin
@import "custom_spcolor";

3. Use the generated sass variables in your styles

The plugin prefixes all spcolor variable names with 'spcolor_' in order to avoid collisions with other variables you might be using.

body {
    background-color: $spcolor_PageBackground;
    color: $spcolor_BodyText;
    font-family: arial, sans-serif;
}

h1 {
    color: $spcolor_HeaderText;
}

License

This plugin is licensed using the The MIT License (MIT). You can use it as you wish, but if you choose to do so, you'll do it at your own risk.