Minify CSS to prevent accidental editing of sass-generated CSS files?

Question

Minify CSS to prevent accidental editing of sass-generated CSS files?

Closed this issue 10 years ago · 9 comments

Contributors editing the Poplus styles is awesome – we want more of that!

But I'm a bit worried that lots of edits^[1][2] are being made to the generated CSS files, rather than the source Sass files. I'd hate to see these contributors' work automatically overwritten by Sass next time someone, following the README instructions, runs sass --watch.

One solution is to stop using Sass. But that seems a shame, since it makes a lot of things in CSS a lot simpler.

Another solution might be to get Sass to minify the CSS output. If nothing else, this will act as a visual deterrent to collaborators editing the CSS files – I'd like to think most of them will wonder "how the heck can anyone edit this stuff?" and maybe then they'll notice the Sass directory, or the message in the README. Speaking of which, we'd also need to update the README, to tell people to:

sass --watch assets/sass:css --style compressed

Maybe a comment at the top of the generated CSS, along the lines of "Don't edit this, edit /assets/sass instead" might be useful too?

What do you think, @lfalvarez @wrightmartin?

wrightmartin commented 10 years ago

👍

Answer 1 · 2014-06-23T16:48:05.000Z

I agree with you entirely, and I think that it would also be good to create a shell script to do that for us.
And here would be a checklist of things to do:

Minify the generated css
Update README
Comment on the generated css "Don't edit this, edit /assets/sass instead"
Create a script (Grunt)

Answer 2 · 2014-06-23T16:53:38.000Z

I wasn't imagining a wrapper script, but you mentioning it made me realise, we could wrap all the stuff up into one script, so it's even easier to develop Poplus stuff locally. A script like:

#!/bin/sh
jekyll serve --watch &
sass --watch assets/sass:css --style compressed &

Which runs the server and the right sass command, and backgrounds them somehow (the & trick probably isn't what we want, since it'll return to a prompt, and there'll be no obvious way to stop the server or sass without closing the terminal window).

Answer 3 · 2014-06-23T17:52:57.000Z

I was also thinking is there a possibility that we do not version the css files?, so they don't cause that misinterpretation, and coupling between our css and scss.

Answer 4 · 2014-06-24T08:31:56.000Z

@lfalvarez I'd be happy with that

Answer 5 · 2014-06-24T08:33:28.000Z

Isn't the issue that GitHub Pages can't automatically compile Sass, so we have to include the CSS in the git repo, otherwise it won't be generated or served?

Answer 6 · 2014-06-24T09:48:10.000Z

Yes, I believe you need to commit the CSS.
For interest, the Jekyll site that is fixmystreet.org (you can see the README at https://github.com/mysociety/fixmystreet/tree/gh-pages ) optionally uses grunt to do jekyll, SASS compilation, JS uglifying, and live reloading in browser when you edit a source file. But I agree the idea of at least compressing the CSS might be enough :)

Answer 7 · 2014-06-24T16:30:50.000Z

Good to know =), I think that it is a pretty good solution.

Answer 8 · 2014-08-01T22:21:56.000Z

I think having sass --watch assets/sass:css --style compressed has made global.css scary enough that people won't edit it directly. I've updated the README and added the comment to the top of global.css (by adding it to the top of global.scss). Not sure we need a Grunt file.