I'm new to Sass, so sorry if this is basic.
I'm compiling my main sass file using gulp, which works fine. However, I'm having trouble bringing in partials - I'm doing it wrong, but I can't figure out how.
style.scss
@import partial
$main-color: rgb(117, 0, 0);
h1 {
color: $main-color;
}
h2 {
color: $secondary-color;
}
_partial.scss
$secondary-color: rgb(175, 87, 205);
gulpfile.js
var gulp = require('gulp'),
sass = require('gulp-sass');
gulp.task('default', function() {
return gulp.src('style.scss')
.pipe(sass(
{outputStyle: 'compressed'})
.on('error', sass.logError)
)
.pipe(gulp.dest('css'))
})
Do I need to add something to the gulp task to make it compile both the base scss file and the partial?
Line 1 of your style.scss
should be @import 'partial';
Sass requires the quotes and the semicolon (for the semicolon you may have been tripped up by the fact that .sass
Sass wouldn't use that semicolon)