Giter Site home page Giter Site logo

Comments (6)

qm3ster avatar qm3ster commented on September 1, 2024

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

from engine.

tobiasmuehl avatar tobiasmuehl commented on September 1, 2024

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%)

from engine.

qm3ster avatar qm3ster commented on September 1, 2024

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

from engine.

taylorzane avatar taylorzane commented on September 1, 2024

@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

from engine.

tobiasmuehl avatar tobiasmuehl commented on September 1, 2024

@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]

from engine.

taylorzane avatar taylorzane commented on September 1, 2024

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.

from engine.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.