Change indentation in Sass

Question

How can I change indentation from 2 spaces to 4 spaces in output CSS files when using Sass? I\'m using expanded style. I don\'t know anything about Ruby, but I have tried to

Answer 1

The right way to change the sass indenting is to go to rubygems/gems/sass-3.x.x/lib/sass/tree/visitors/to_css.rb (or anywhere your to_css.rb file is), and edit this:

tab_str = ' ' * (@tabs + node.tabs)

Answer 2

Since this is the referenced question regarding sass indentation and as of now (DEC 2019), the accepted answer is outdated; I add this answer.
According to sass documentation, amongst its options, it accepts two options called indentType and indentWidth to control indentation behavior.
The default is using 4 spaces which can be changed to 1 tab like this:

function css() {
    return gulp
    .src("./scss/**/*.scss")
    .pipe(plumber())
    .pipe(sass({
        outputStyle: "expanded",
        includePaths: "./node_modules",
        indentType: "tab",
        indentWidth: 1
    }))
    .on("error", sass.logError)
    .pipe(autoprefixer({
        cascade: false
    }))
    .pipe(header(banner, {
        pkg: pkg
    }))
    .pipe(gulp.dest("./css"))
    .pipe(rename({
        suffix: ".min"
    }))
    .pipe(cleanCSS())
    .pipe(gulp.dest("./css"))
    .pipe(browsersync.stream());
}

Answer 3

sass-3.2.3/lib/sass/tree/visitors/to_css.rb has a number of hard-coded double-space strings (' ') that are used for indentation. If you replace them all with four-space strings it will compile your css as you stated.