I would like to create a number of different themes for foundation for my Foundation web app (basically switch color schemes for different customers). I am still very new to Sass, libsass and grunt.
Basically what I want is something like: have two different _settings.scss files
_settingsA.css
$primary_color: #cc3333;
...
_settingsB.css
$primary_color: #3333cc;
...
And with those two files generate foundationA.css and foundationB.css.
I am currently using Foundation with Sass/Grunt.
I just found that the solution is editing Gruntfile.js and adding files to the "sass" task:
sass: {
options: {
includePaths: ['bower_components/foundation/scss']
},
dist: {
options: {
outputStyle: 'compressed'
},
files: {
'css/app.css': 'scss/app.scss',
'css/app2.css': 'scss/app2.scss',
'css/app3.css': 'scss/app3.scss'
}
}
}
Related
I've started working on an existing website at work that uses Sass and auto-prefixer with Grunt. I'm not 100% familiar with the files yet, but I don't want to change the structure to avoid breaking anything. The problem I'm having is that no matter what .scss files I edit, it doesn't affect the required .css file. The developers that originally built the site aren't here anymore.
The changes I make either affect file.css or file2.css, and I need to reach file.expanded.css, but there's no mention of this file in the Gruntfile, so it was either removed, or it's being compiled in another way. Obviously, I'm avoiding editing it directly. I'm just unsure if I have enough to figure this out.
In case it helps, here's the Gruntfile:
module.exports = function(grunt){
require("matchdep").filterDev("grunt-*").forEach(grunt.loadNpmTasks);
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass: {
build: {
files: {
'assets/css/file2.css': 'assets/sass/folder/file2.sass'
}
}
},
autoprefixer: {
build: {
src: 'assets/css/file.css',
dest: 'assets/css/file.css'
}
},
watch: {
css: {
files: ['assets/sass/**'],
tasks: ['buildcss']
}
},
// Browsersync
browserSync: {
dev: {
bsFiles: {
src: [
'assets/css/*.css',
'assets/images/*',
'assets/scripts/*.js',
'**/*.html'
]
},
options: {
watchTask: true,
proxy: "site.dev:8888",
}
}
},
});
grunt.registerTask('default', ['browserSync', 'watch']);
grunt.registerTask('buildcss', ['sass', 'autoprefixer']);
};
You should install a Grunt task for source maps and recompile your CSS. I personally use Gulp so, I'm unsure what the best solution for Grunt might be, but it's a similar set up. When your CSS is compiled with source maps, you'll be able to pinpoint with your inspector where in which partial or SASS file the style declarations are coming from.
http://thesassway.com/intermediate/using-source-maps-with-sass
I find Web Essentials autoprefixer not auto enough - I need to manually say it to add prefixes. Also it doesn't offer me prefixes when I'm writing .less or .scss.
Is there any extension or option to make it automatically add prefixes on css compilation from .less or .scss stage?
I've tried Web Compiler extension, but it doesn't support prefixing for sass, and says that it supports prefixing for less, but I've tried enabling autoprefix in compilerconfig.json while writing .less and it didn't add anything.
Is there something for visual studio? Or maybe I should dump it and use some editor + gulp?
I'm sure there will be an extension out there but it isn't too much work to create a Grunt/Gulp file to do your compiling for you. Task Runner Explorer will then manage the running of the file. Writing your own will give you the control and the flexibility that an extension will not.
Here is a sample using Grunt, taken from my post on the subject Getting started with Grunt, SASS and Task Runner Explorer
module.exports = function (grunt) {
'use strict';
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-autoprefixer');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
// Sass
sass: {
options: {
sourceMap: true, // Create source map
outputStyle: 'compressed' // Minify output
},
dist: {
files: [
{
expand: true, // Recursive
cwd: "sass", // The startup directory
src: ["**/*.scss"], // Source files
dest: "stylesheets", // Destination
ext: ".css" // File extension
}
]
}
},
// Autoprefixer
autoprefixer: {
options: {
browsers: ['last 2 versions'],
map: true // Update source map (creates one if it can't find an existing map)
},
// Prefix all files
multiple_files: {
src: 'stylesheets/**/*.css'
},
},
// Watch
watch: {
css: {
files: ['sass/**/*.scss'],
tasks: ['sass', 'autoprefixer'],
options: {
spawn: false
}
}
}
});
grunt.registerTask('dev', ['watch']);
grunt.registerTask('prod', ['sass', 'autoprefixer']);
};
I'm brand new to Grunt.js, but I'm starting to get the hang of it. The main thing I'd like to do with it however, I can't seem to nail down.
My goal here, is to point grunt at a directory, and have it watch all of the matching files, and upon changes, compile them into a new single CSS file.
Here's my current gruntfile:
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
// CONFIG =========================/
pkg: grunt.file.readJSON('package.json'),
sass: {
dist: {
files: {
'assets/css/style.css' : 'assets/css/sass/*.scss'
}
}
},
watch: {
css: {
files: 'assets/css/sass/*.scss',
tasks: ['sass']
}
}
});
// DEPENDENT PLUGINS =========================/
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-sass');
// TASKS =====================================/
grunt.registerTask('default', ['watch']);
};
Thus far I've been using grunt-contrib-watch, and grunt-contrib-sass. I've tried compass, as well as directory import but I couldn't get either of them to do what I'm trying to do either.
At the end of the day, I'm really just trying to avoid writing an import file, both because source order isn't going to matter for the way I'm writing my SASS, and becuase I'd really like to know how to make this happen.
I'm not sure of a way to do exactly what you want to achieve by just using Sass and Grunt-Contrib-Sass but you can achieve something similar by using Sass-Globbing, a SASS plug-in that lets you import entire directories. To use the plug-in, you'd use the require option in Grunt-Contrib-Sass and you'd have it target a main styles.scss file that may look something like:
#import "vendor/*";
#import "modules/*";
#import "partials/*";
And then your grunt file would have something like:
sass: {
dist: {
options: {
require: 'sass-globbing'
},
files: {
'assets/css/style.css' : 'assets/css/sass/style.scss'
}
}
}
Using Sass with sourcemaps works fine for me with unminified CSS, but using my minified CSS it doesn't.
I'm guessing this might be because the references first get's built to the compiled css file, but then the minified version changes everything and references then fail, could that be it? If so, I still don't know what to do about it. Any help to find a solution would be much appreciated.
This is in my last line of my main *scss-file:
/*# sourceMappingURL=mytheme-full.css.map */
I'm thinking; If I just change to the following, it should work. But no!
/*# sourceMappingURL=mytheme-full-min.css.map */
This is from my Gruntfile.js:
cssmin: {
build: {
files: {
'sites/all/themes/mytheme/css/mytheme-full-min.css': 'sites/all/themes/mytheme/css/mytheme-full.css'
}
}
},
sass: {
dist: {
options: {
sourcemap: 'auto'
},
files: {
'sites/all/themes/mytheme/css/mytheme-full.css': 'sites/all/themes/mytheme/sass/mytheme-full.scss'
}
}
},
To date, grunt-contrib-cssmin doesn't support sourcemaps (see here and here).
However, both grunt-contrib-sass and grunt-autoprefixer support sourcemaps, so your best bet is probably to enable sourcemaps on those and use the unminified css for development and debugging. To enable sourcemaps in autoprefixer, just set:
options: {
map: true
}
I have installed foundation 5 with bower. by compass watch there is no problem to compile foundation files but when i want to use grunt-sass plugin, i see this error:
Running "sass:development" (sass) task
Warning: C:\wamp\www\nik\myapp/scss/app.scss:2: error: file to import not found or unreadable: "foundation"
Use --force to continue.
Aborted due to warnings.
Line 2 of app.scss is #import "foundation".
And grunt-sass in my Gruntfile.js:
sass: {
development: {
options: {
outputStyle: 'nested'
},
files: {
'.css/development/style.css': ['scss/app.scss', 'scss/style.scss']
}
},
production: {
options: {
outputStyle: 'compressed'
},
files: {
'.css/development/style.css': ['scss/app.scss', 'scss/style.scss']
}
}
I also tested this solution but it had no affection.
Just adding --libsass for installing foundation in command line, will cause installing foundation that is compatible with grunt:
foundation new A_PROJECT_NAME --libsass
Subsequently in grunt (after installing grunt-sass) :
sass: {
development: {
options: {
outputStyle: 'nested',
// Adding foundation source files, so we can #import them.
includePaths: ['bower_components/foundation/scss']
},
files: {
'css/style.css': ['path/to/styles/app.scss']
}
}
}
Hint: you can import your own style.scss in app.scss last line.