sass - Define different linear-gradient for different sizes

Question

Does anyone know a cleaner way to define linear-gradients with different class names or would this be a good considered sass method?

So here is the SASS code that I have:

.has-background-graphic
  background-size: cover
  &-is-25
    background-image: linear-gradient(to right, rgba(255, 256, 255, 100) 25%, transparent), url('/1298_splash_AbbVie%20FH%20Impact%20Win_Image2_1920x1080.png')
  &-is-50
    background-image: linear-gradient(to right, rgba(255, 256, 255, 100) 50%, transparent), url('/1298_splash_AbbVie%20FH%20Impact%20Win_Image2_1920x1080.png')
  &-is-75
    background-image: linear-gradient(to right, rgba(255, 256, 255, 100) 75%, transparent), url('/1298_splash_AbbVie%20FH%20Impact%20Win_Image2_1920x1080.png')

If someone knows a cleaner and much better method, please let me know - I'd love to learn!

question from:https://stackoverflow.com/questions/65660973/define-different-linear-gradient-for-different-sizes

Answer 1

Waitting for answers