Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

馃悶 f:$(color-variable) seems not working #8

Closed
EasonLin0716 opened this issue Mar 27, 2022 · 1 comment
Closed

馃悶 f:$(color-variable) seems not working #8

EasonLin0716 opened this issue Mar 27, 2022 · 1 comment
Labels
invalid This doesn't seem right

Comments

@EasonLin0716
Copy link

EasonLin0716 commented Mar 27, 2022 •
edited by 1aron

Hi,
I hope you're doing well.

I've faced an issue, if I put a variable in :root and use it in class:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Some</title>
    <link href="https://unpkg.com/@master/normal.css" rel="stylesheet" />
    <script src="https://unpkg.com/@master/style"></script>
    <script src="https://unpkg.com/@master/styles"></script>

    <style>
      html,
      body {
        height: 100%;
      }
      :root {
        --light-grey: hsl(217, 12%, 63%);
      }
    </style>
  </head>
  <body>
    <p class="font-color:$(light-grey)">Hey man!</p>
  </body>
</html>

This would work perfect. However if I change p tag to:

<p class="f:$(light-grey)">Hey man!</p>

it will not work as expected.
Official doc here: https://docs.master.co/styles/font-color
says I can use f as a shorthand of font-color, Not sure if f:$(light-grey) is illegal or this is a bug.
@1aron 1aron added the invalid This doesn't seem right label Mar 28, 2022
@BenSeage
Copy link
Contributor

BenSeage commented Mar 28, 2022 •
edited

f:color can only be used with the official color variables, e.g. f:red, f:blue-50, f:red-60...

We unable to determine whether f:$(light-grey) is belongs to font-color because the CSS variables could be anything.

In conclusion, if you want to use font-color with variables, you must type font-color:$(...).

@1aron 1aron changed the title f:$(color-variable) seems not working 馃悶 f:$(color-variable) seems not working Aug 20, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
invalid This doesn't seem right
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@1aron @BenSeage @EasonLin0716