csscomb not working for .scss files

[entozoon]

I've installed csscomb js into sublime 3 and ctrl+shift+c (or tools>run csscomb js) works fine for .css files but seemingly does nothing (and no console message) within an .scss file.

I know it should work fine with sass because I've used the previous versions with no problems. It's as if the package only loads for .css files and not others. I wouldn't mind if it loaded for every file type.

Thanks in advance.

[tonyganch]

Does ST detects file syntax correctly? If you paste view.settings().get('syntax') in console, what is the response?

[entozoon]

>>> view.settings().get('syntax')
'Packages/Syntax Highlighting for Sass/Syntaxes/SCSS.tmLanguage'

(whatever that means :P )

[tonyganch]

Thanks, that helped a lot :) I've published a fix that should help. I guess it'll take some time for it to appear at Package Control, but you can always install the plugin from GitHub.

[entozoon]

Fantastic, glad to be of service to such an epic tool!

[paramburu]

Sorry but I belive this wasn't fixed. I'm getting the following error while trying to sort SCSS files:

Error: Parsing error at undefined: Please check the validity of the CSS block starting from the line #12
    at Object.Comb.processString (/Users/*/Library/Application Support/Sublime Text 3/Packages/sublime-csscomb/node_modules/csscomb/lib/csscomb.js:205:19)
    at Socket.<anonymous> (/Users/*/Library/Application Support/Sublime Text 3/Packages/sublime-csscomb/csscomb.js:23:37)
    at Socket.EventEmitter.emit (events.js:117:20)
    at _stream_readable.js:920:16
    at process._tickCallback (node.js:415:13)

It can be a problem with the csscomb itself so please let me know if I should report it to the other tracker. I think the following block might be the problem although is a valid scss block:

    @media #{$medium-up} {
        width: $medium-up-width;
    }

[tonyganch]

@paramburu, interpolated variables, yes. This error will be fixed once CSScomb 3.0 is out: csscomb/csscomb.js#214

[paramburu]

Thanks. But, may I ask you why is it that the web interface doesn't complaint?

http://csscomb.com/online/

[tonyganch]

@paramburu, because the website is soooo outdated and "Online sorting" still uses php version :) We'll update it with v3.0.

[uxleo-com]

For me the problem persists, no msg in the console when I run CSScomb on sass. Syntax is 'Packages/Syntax Highlighting for Sass/Syntaxes/SCSS.tmLanguage', but fixing it, as suggested in https://github.com/csscomb/sublime-csscomb/commit/d30446d83512a148e4b6daa8ed7f93e8dae14d2d doesn't help.

[tombpain]

I am also having issues with SCSS. Nothing happens, no exceptions in the console, just doesn't do anything. Works fine with css.

[DavidBachmann]

Was having the same problem as tombpain. The reason was that my Sublime syntax was set to Sass instead of SCSS. Installing the SCSS syntax solved the problem.

[tombpain]

@DavidBachmann Fantastic, thanks, worked perfectly.

[cmalven]

Suddenly CSS comb stopped working for me, too. I'm using the SCSS syntax for the file. CSS comb doesn't error, but it also doesn't reorder properties. It just unindents the selected block.

[MarcelRobitaille]

For all those getting this error:

Step 1: Open Packages/CSScomb/CSScomb.py Step 2: Go near bottom of file Step 3: Make sure you have both

def is_scss(self):
       return self.view.settings().get('syntax').endswith('/SCSS.tmLanguage')

and

def is_sass(self):
        return self.view.settings().get('syntax').endswith('/Sass.tmLanguage')

Step 4: Under "def get_syntax(self):", add:

if self.is_sass():
        return 'scss'

CSScomb should now work in both Sass and SCSS syntaxes

[felipeduardo]

worked very well with sass / SCSS, but now ...

  .panel
{
    position: relative;

    overflow: hidden;

    height: 205px;
}

[yumyo]

@felipeduardo same results for me too

[chernetsov0]

Can confirm that @Marcel-Robitaille fix works and I like Sass highlighting a lot more than SCSS one. So should be fixed IMO. Installed CSScomb today from Package Control but still experience this.

[dimaip]

@felipeduardo had the same issue, the problem is with weird defaults, should be: "space-before-opening-brace": " ",

[glencampbell]

No fix for this? Followed steps above and am getting no sorting at all; just getting the spacing issue @felipeduardo is getting. Would be great to see this getting sorted – have been having these issues for a long time now

[glencampbell]

Bump! I miss CSS Comb :-(

[abacaj]

bump.

[adonaicandido]

bump

[ixley]

+1

[ixley]

I'm not sure if this was it, but building out my config file with explicit sort order seemed to fix things for me. I'm guessing that relying on the default settings for this just wasn't working with sass/scss.

[ixley]

I've now gotten it to process most of my scss files fine, but it's throwing an error ("Please check the validity...") for this:

@for $i from 0 through 2 {
  .pie-slice._#{$i} path,
  .dc-legend .dc-legend-item:nth-child(#{$i + 1}) rect {
    fill: darken($teal, $i * 10);
  }
}

It appears to be choking on interpolating #{$i + 1} – so if I remove the +1 it will complete without errors, but I'm not sure what it doesn't like about this, since it seems to deal with this sort of interpolation fine in other places.

[gangsthub]

@ixley, I think you were missing a braket there:

@for $i from 0 through 2 {
  .pie-slice._#{$i} .path,
  .dc-legend .dc-legend-item:nth-child(#{$i + 1}) rect {
        fill: darken($teal, $i * 10);
  }
}

[ixley]

@gangsthub Thanks for catching that –I'm not sure why that bracket didn't get pasted in above (I've updated the snippet in my comment), but it is correctly formed and not the cause of the error. Like I mentioned, it appears to not like something about that specific interpolation string with the +1.

[vh22]

font: 400 #{$base-font-size + 3px}/#{$base-btn-line-height} $base-font-family; The same error: "Please check the validity of the block starting from line #10"

[rbelling]

having the same problem here... gonzales is failing while parsing the interpolated valuse in this snippet:

$diff-size: strip-unit($max-size - $min-size); //e.g. 13
$diff-range: $upper-range - $lower-range;
#{$property}: calc(#{$min-size} + #{$diff-size} * ((100vw - #{$lower-range}px) / #{$diff-range}));

@include width-under($lower-range) {
    #{$property}: $min-size;
}
@include width-over($upper-range) {
    #{$property}: $max-size;
}

[arvi]

I had the same issue. What worked for me is installing SCSS Sublime Package before running csscomb and adding

{
    "custom_sort_order": true
}

Package Settins > CSScomb > Settings - User