CODEWITHSUNDEEP
sassgulpgulp-sass
Ebrahim
Ebrahim

Reputation: 1818

sass files, compile and seperate theme-color files with gulp

I have a folder structure like this:

|- assets
     |- sass
          global.scss
          _mixin.scss
          _body.scss
          _header.scss
          _footer.scss
          |- themes
               blue.scss
               base.scss
               dark.scss

I want to compile my sass files and get this css structure out of it (the most important is that I want separate css files for my color):

|- assets
     |- cdd
          global.css
          |- themes
               blue.css
               base.css
               dark.css

I'm using this gulpfile.js file to compile this

'use strict';

var gulp        = require('gulp'),
concat      = require('gulp-concat'),
plumber     = require('gulp-plumber'),
sass        = require('gulp-sass');

// Gulp plumber error handler
function errorLog(error) {
   console.error.bind(error);
   this.emit('end');
}

// Compile Sass files into CSS
gulp.task('sass', function () {
return gulp.src('./assets/sass/**/*.scss')
            // Sass - Compile Sass files into CSS
            .pipe(sass({
                outputStyle: 'expanded',
                includePaths: ['./assets/sass/']
            }))
      .on('error', errorLog)
            .pipe(gulp.dest('./assets/css'))
 });

gulp.task('default', ['sass']);

it is not making separate color file for me, and the color theme files are appended in the end of the global.css file

Upvotes: 2

Views: 1496

Answers (1)

Mark
Mark

Reputation: 2071

The way I created different themes for a project was to split my scss like so;

|- scss
|- |- core
|- |- |- _all-my-scss-files-and-folders.scss
|- |- |- _config.scss 
|- |- |- core.scss
|- |- themes
|- |- |- blue.scss
|- |- |- yellow.scss
|- |- |- pink.scss

Within _config.scss you set your default colour scheme

$colour-primary-main: #FFF !default;
$colour-primary-secondary: #EEE !default;
$colour-primary-tetiary: #E0E0E0 !default;
$colour-primary-quaternary: #R4R4R4 !default;

Within your themes scss files you overwrite your variables and then @import your partials

$colour-primary-main: #333;
$colour-primary-secondary: #000;
$colour-primary-tetiary: #444;
$colour-primary-quaternary: #FEFEFE;

@import '../core/config';
etc

You then will need to set up a new gulp task that compiles your theme SCSS files

gulp.task('sass-theme', function () {
  return gulp.src('assets/sass/theme/*.scss')
    .pipe(sass({
      outputStyle: 'expanded',
    }))
    .on('error', errorLog)
    .pipe(gulp.dest('./assets/css'))
});

You also will need to ignore the new themes folder on your default scss task

gulp.task('sass', function () {
  return gulp.src([
      'assets/sass/**/*.scss',
      '!assets/sass/themes/*.scss';
    ])
    .pipe(sass({
      outputStyle: 'expanded',
    }))
    .on('error', errorLog)
    .pipe(gulp.dest('./assets/css'))
 });

Upvotes: 3

Related Questions