• 0 Posts
  • 24 Comments
Joined 1 year ago
cake
Cake day: October 9th, 2024

help-circle




  • There is no such proposal I’m aware of. @function will enable a finite combination in a more convenient way and maybe the ident() function can help building comma separated values in new ways. In general using classes for this is tricky though because the position of each value in the list matters (if you want something like layer-1 = gradient-blue, layer-2 = gradient-red, …). Each class would need to represent a tuple (index, image) so you would need every permutation ( layer-1-gradient-blue, layer-2-gradient-blue, …)


  • You can compose layering backgrounds in the way you described by using using custom properties:

    @property --gradient-1 {
      syntax: "<image> | none";
      inherits: false;
      initial-value: none;
    }
    
    @property --gradient-2 {
      syntax: "<image> | none";
      inherits: false;
      initial-value: none;
    }
    
    .gradient-1, .gradient-2 {
      background-image: var(--gradient-2), var(--gradient-1);
    }
    
    .gradient-1 {
     --gradient-1: linear-gradient(60deg, red 0%, orange 50%, red 100%);
    }
    
    .gradient-2 {
      --gradient-2: radial-gradient(at center, blue 10%, teal 50%, transparent 50%);
    }
    
    

    Using the @property syntax with ’inherits: false‘ prevents that the parents value for this property get inherited, so that arbitrary nesting is possible.