4 ms·

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 th

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?

mtharrison 10y ago
You might not need Sass.
olavgg 10y ago
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.
Manishearth 10y ago
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.
alnorth 10y ago
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.
- crashdown 10y ago
  I think you've hit the nail on the head here.
- mrec 10y ago
  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_variables https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_v...
- dwaltrip 10y ago
  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.

mtharrison 10y ago

You might not need Sass.

olavgg 10y ago

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.

Manishearth 10y ago

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.

alnorth 10y ago

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.

crashdown 10y ago
I think you've hit the nail on the head here.
mrec 10y ago
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_variables https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_v...
dwaltrip 10y ago
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.