4 ms·
This is an interesting idea. Seems like a good practice in larger projects though. I like your choice in words, lightest, lighter, light, base, dark, darker, da
by Kagerjay 8y ago
This is an interesting idea. Seems like a good practice in larger projects though. I like your choice in words, lightest, lighter, light, base, dark, darker, darkest. Its the same naming convention as tailwinds, minus the word "base".
Is the word "pallete" really necessary? Why not just organize it like this instead?
// Colors
$blue-lightest: hsl(201, 75%, 66%);
$blue-lighter: hsl(201, 75%, 61%);
$blue-light: hsl(201, 75%, 56%);
$blue hsl(201, 75%, 51%);
$blue-dark hsl(201, 75%, 46%);
$blue-darker hsl(201, 75%, 41%);
$blue-darkest hsl(201, 75%, 36%);
and
body {
background-color: mix($red,$purple-light);
color: $blue-dark;
}
I am surprised the author did not mention HSL code anywhere, especially in the section about creating shades. I use HSL for everything, it should be standard practice.
- pg_bot 8y agoThe palette does two jobs. First, it makes sure you don't overwrite yourself somewhere else in the codebase. It also helps you easily see where someone has goofed since they aren't using the palette when defining a color. You could write everything that way, but you have to spend more effort maintaining the project.
- Kagerjay 8y agoOkay good point If it's a solo project I would probably just stick to what I wrote, but for larger projects I see the benefits. Since someone might define another $color-variable elsewhere