- This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
Viewing 3 posts - 1 through 3 (of 3 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Hello!
Not sure if this is possible but came up during a code review meeting:
Can color stops be defined separately and independent from their related colors?
The idea is that we have this linear gradient:
background: linear-gradient(to right, blue 0%, green 100%);
…but want to also have this linear gradient as a second option:
background: linear-gradient(to right, blue 50%, green 100%);
Rather than writing 2 separate classes, can the color stops be defined by themselves with no colors?
I know it would be just as easy to write it in Sass with variables but would like to have a utility class available to override any color combination from 0-100 to 50-100 (or any other combination like 0-50, 25-75, etc etc etc).
So the desired end result would be a single class for the gradient and a utility class for the color stop positions.
Thoughts? Thanks!
Danny
Not without variables of some kind….but yes.
Whether you use SASS or actual CSS variables is up to you but, frankly, I don’t think you will be saving any time of effort.
Thanks! This is almost exactly what I was looking for…with the exception of CSS4 variables cuz we have to support IE10+ (ugh).
I did find this article that Chris Coyier wrote and has a nice SASS mixin to help use both at the same time:
https://css-tricks.com/difference-between-types-of-css-variables/
Cheers!
D