brandonminch / grunt-prettysass Goto Github PK

Since grunt uses the command sass-convert which comes with the ruby version of Sass, it makes sense to mention that in the README.md file, because otherwise, people who are using node-sass will get an error indicating that the command sass-convert is not found.

The prettysass task fails:

Running "prettysass:app" (prettysass) task
prettifying: ./sass
>> ./sass: Error: Command failed: /bin/sh: sass-convert: command not found
Warning: Task "prettysass:app" failed. Use --force to continue.

On OS X 10.10 Yosemite.

I installed the package exactly as the README said: npm install grunt-prettysass --save-dev.
My grunt version is:

> grunt --version
grunt-cli v0.1.13
grunt v0.4.5

My grunt config is available here: https://gist.github.com/ChristianSch/84368e2e4e7e9ecba753#file-gruntfile-js-L108

The command sass-convert is not available (globally). So this fails: https://github.com/brandonminch/grunt-prettysass/blob/master/tasks/prettysass.js#L164

I don’t know if the README is missing something or my installation is flawed but any suggestions would be great.

An example of a mixin that takes 'null' as an argument from bourbon thoughtbot/bourbon@49c9379

// Before prettysass
.toolbar {
  @include position(absolute, 0px 0px null 0px);
}
// After prettysass
.toolbar {
  @include position(absolute, 0px 0px 0px);
}

First of all, great module!
I have a problem when I activate alphabetization with scss files which are structured like that:

#page {
position: relative;
.next, 
.prev {
width: 100;
}
}

When i run prettysass over this code, I get the following output:

#page {
.next, 
position: relative;
.prev {
width: 100;
}
}

So it seems that if you use a new line for each class or id, the module thinks it is an attribute and sorts it. It have no problems with classes and ids in one line.

Would be great if you can take a look.

This is a really great Module!

But I found a problem with includes:

%placeholder {
  @include breakpoint(xs) {
    width: $value1;
  }
  width: $value2;
  flex-shrink: 0;
}  

outputs this:

%placeholder {
  @include breakpoint(xs) {
  flex-shrink: 0;
  width: $value2;
    width: $value1;
  }
}

Which is very strange. I use includes with @content a lot and it works fine except in this case. I can't figure out why it happens here. Any ideas whats going wrong?

Hello,

Allow me to begin by expressing my gratitude for the existence of this grunt plugin. Of all those I've tried this is the only one that I've been able to use to automatically format (or, "prettify") my Sass code.

I've modified prettysass.js a bit to add an option to remove blank lines from the output.

Here's my modified version of prettysass.js:

http://websightdesigns.com/prettysass.txt

Just let me know if there's anything I need to do on my end to commit this into the repository.

This plugin is great, but it inserts two newlines before every inline comment. Is there an option to keep the inline comments inline? If not, this would be a nice feature to add.

Running this task never seems to finish.

prettysass: {
    options: {
        alphabetize: true
    },
    app: {
        src: ['styles/core/_error.scss']
    },
},