I’m trying to implement this trick here but no idea how to fold that into Sage’s gulp file. Please help. TIA!
I’m not sure of a scenario where you would need to set a variable in your gulp file but not in your SASS. However even with that, I need to ask the infamous question: what have you tried?
Figured it out. Just added the call to header()
before the sass block of cssTasks. I realize this runs regardless of the existence of *.scss
files but this works. I’ll try to wrap it in a gulpif()
as well.
var header = require('gulp-header');
var cssTasks = function(filename) {
return lazypipe()
.pipe(function() {
return gulpif(!enabled.failStyleTask, plumber());
})
.pipe(function() {
return gulpif(enabled.maps, sourcemaps.init());
})
.pipe(function() {
return gulpif('*.less', less());
})
.pipe( function() { return header('$themeColor: #ff99ff;\n'); })
.pipe(function() {
return gulpif('*.scss', sass({
outputStyle: 'nested', // libsass doesn't support expanded yet
precision: 10,
includePaths: ['.'],
errLogToConsole: !enabled.failStyleTask
}));
})
.pipe(concat, filename)
.pipe(autoprefixer, {
browsers: [
'last 2 versions',
'android 4',
'opera 12'
]
})
.pipe(cssNano, {
safe: true
})
.pipe(function() {
return gulpif(enabled.rev, rev());
})
.pipe(function() {
return gulpif(enabled.maps, sourcemaps.write('.', {
sourceRoot: 'assets/styles/'
}));
})();
};
This was just a test but the real goal is to get an external link selector to include the correct domain.
a[href^="http://"]:not([href*="192.168.10.12"]),
a[href^="https://"]:not([href*="192.168.10.12"]),
a[href^="//"]:not([href*="192.168.10.12"]), {
&:after {
content: 'External';
}
}