Hacker News Reader

Comment by Shanea93 | Hacker News Reader

It's sad that this site uses SCSS for displaying the rules, I'm using it in production and fully understand it, but it's needlessly abstracting the rules for the sake of a few extra words in each declaration.

That aside, these are some pretty cool examples. Are there ways of doing this with CSS which doesn't screw with my browser back button?

View on HN

I half agree with you, but one of the real benefits that SASS gives you here is making dependencies more obvious. A named variable like `$slider-height` is much clearer than a random number like `50px`. Yeah, you could put a comment next to every constant in the CSS, but I don't think that's clearer than the SASS alternative.

I think you've hit the nail on the head here.

I'd hope CSS variables [1] will make that argument obsolete soon, but then again I've been hoping that for a while...

[1] https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_v...

SCSS variables also make things FAR more maintainable. To change a color, you shouldn't have to change every single line where that color is used.

You update the value where your color variable is defined, and then each style declaration that uses the color variable receives the new value automatically.

There's a "view compiled" button that turns up if you hover the SCSS in codepen. I got through half the doc before discovering it though. I was very surprised to see the ampersand, since I was pretty sure CSS didn't have anything like that.

You might not need Sass.

I absolutely agree! While we can discuss about why SCSS is better, it is more like comparing Volvo with Mercedes. In the end, CSS is the standard, not SCSS. And CSS is evolving and getting better and better.

Reply on news.ycombinator.com