CODEWITHSUNDEEP
rubysass
Matti Mehtonen
Matti Mehtonen

Reputation: 1705

Change indentation in Sass

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 read every rb file in /Library/Ruby/Gems/1.8/gems/sass-3.2.1/ on my computer.

Upvotes: 6

Views: 4629

Answers (3)

Achilles
Achilles

Reputation: 1734

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());
}

Upvotes: 1

Forty
Forty

Reputation: 325

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)

Upvotes: 1

Zach Kemp
Zach Kemp

Reputation: 11904

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.

Upvotes: 9

Related Questions