Hacker Newsnew | past | comments | ask | show | jobs | submitlogin

This used to be so much more of a pain before Sass (and friends) came along. Having a red error box with a separate border colour used to be a pain to maintain but it's so simple with darken/lighten and a few commonly used context-specific variables.


Do you have any resources or examples you recommend for this? My front-end knowledge is over a decade old. I would still be assigning all these colours individually in CSS!


You could start with native CSS variables. :)

https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_c...


Not very easy to darken/lighten colours easily using CSS variables at the moment. Support will be coming in the future.


I find it quite easy. Just use the hsl() function.


I don't have anything to hand and I only use a tiny number of Sass's built-in features, but here's a super-quick demo of styling with variables and darken (https://sass-lang.com/documentation/modules/color#darken).

https://jsfiddle.net/peteryates/uqdnj4sa/10/

Note, darken and lighten aren't always favoured these days, it's good advice to learn scale (https://sass-lang.com/documentation/modules/color#scale), but darken or lighten makes for an easier demo.


Sass Basics seems like a good place to start: https://sass-lang.com/guide




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: