Sublime Forum

CSS that has been processed from SASS formatting issue

#1

Using ST3 v3.1.1 Build 3176.

I’m using gulp.js to process my .scss files currently in development for a WordPress site. I have formatted my SASS to be indented accordingly, with nested classes etc. The .css file that is output looks like this in ST3:

.project-page-title {
  letter-spacing: 1px;
  line-height: 1.2em; }
  .project-page-title span {
    padding-bottom: 12px;
    border-bottom: 5px solid #140D1A; }

Notice that the nested styles are indented when they shouldn’t be (they should only be indented in SASS) and the closing curly braces for each class is compacted, like it semi-minimized but not completely.

Any idea what might be causing this? I only recently got started with SASS so it’s possible this issue has been around for a while, and I’m just noticing it now.

0 Likes
#2

This is done by the sass compiler’s output style, there are more styles you can set.

If you are using gulp-sass you need to define to pass outputStyle param to the compiler:

sass({outputStyle: 'nested|compact|compressed|expanded'}

available values are:

  • neseted (default one, the output of your example)
  • compact (each selector is onlined)
  • compressed (all styles are onelined)
  • expanded (the “normal” css style output)

you can read more about it here: https://web-design-weekly.com/2014/06/15/different-sass-output-styles/

Actually I use gulp-ruby-sass, param name is style instead of outputStyle, values are the same:

sass('path/to/scss/style.scss', {
    style:'expanded'
})
0 Likes
#3

Thanks @Orlmente, really appreciate all the extra info and link! :slight_smile:

0 Likes