Support for other CSS attribute constraints

[taylorzane]

It is my understanding that GSS does not support this syntax:

#selector {
  myBGC == #f00;

  background-color :== myBGC;
}

#another-selector {
  background-color :== #selector[background-color];
}

I was unable to make this snippet work with any variation of variable declaration, type of color syntax used (i.e. blue, #fff, rgb(1, 2, 3))

Is binding to background-color and other color-related items supported? Or is that something I would have to handle myself manually, or by using another CSS/JS framework?

[qm3ster]

Only numeric parameters, enumerated in units like px and vw are supported. The rest can only be assigned directly, like in css.

[tobiasmuehl]

Support for this syntax can certainly be added since colors can be reduced to numbers. Do you have other scenarios of using this syntax? The one you described can be met with a preprocessor, which can also manipulate the colors like darken($myBGC, 10%)

[qm3ster]

The really GSSish use of this would be to bind things like opacity, colors, transforms and z-positions to various sizes, for responsive animation.

[taylorzane]

@tobiasmuehl To be completely honest, I've discontinued use of GSS; I can close this issue, or we can leave it open for discussion as this is something I would like to see in the future, should I need to use GSS.

I found that my project didn't need something as advanced to do some simple layout constraints. So I wouldn't be able to give any other examples. I like what @qm3ster said about binding to other attributes, but it seems difficult to bind a color to a position in certain formats (#fff) because it's ambiguous as to what attribute you want to modify.

My thoughts...using this example:

#foo {
  myBGC == #fff;
  background-color :== myBGC * #selector[top]

}

#selector {
  position: absolute;
  top == 0.5;
  right == 1.0;
  left == 0.0;
}

1. Do we modify the whole thing?
   • background-color :== myBGC * #selector[top]
     • => #fff * 0.5 == #777
2. Do we have to pass an array, for each nibble/byte? (This could implicitly spread a single number to all nibbles/bytes.)
   • background-color :== myBGC * #selector[top]
     • => #fff * [0.5, 0.5, 0.5] == #777
   • background-color :== myBGC * [#selector[top], #selector[right], #selector[left]]
     • => #fff * [0.5, 1.0, 0.0] == #7f0

[tobiasmuehl]

@taylorzane I guess you just went back to normal CSS + preprocessor?

I feel like a constraint system that is based on solely linear algebra operations is unable to really work with colors. Colors come from a different world than layout, and I feel like they should be treated as their own datatype (yes, that's not what I said in the previous post).

Writing something like darken(myBGC, 0.1) is much more expressive than myBGC == myBGC * 0.9. The language can be extended to support those operations (probably not in the same syntax though).

myOtherThing[background-color] :== myBGC darken-by ::window[width] / ::window[height]

[taylorzane]

Yeah, just using Stylus as a preprocessor for now. I like the idea of using preprocessor-esque syntax for binding two together. There's certainly plenty of gotchas and room for improvement, but this is getting to the right direction.