Closed arvinxx closed 3 years ago
This is really out of the scope of Github issues. A better place to ask this type of question ("Is there any way to...") is Stack Overflow.
Closing to reduce issue noise. You're welcome to post a link to the related Stack Overflow question.
I post a question about it. https://stackoverflow.com/questions/65997822/an-idea-to-combine-less-function-and-css-variable-is-therr-any-way-to-handle-th
Acutally I don't think stackoverflow is the right place. Because the maintainer of this repo know the lifecircle of less's executing processing most.
What I want to know is just is there any way to modify less code after executing less function. If there is,it will help a lot. Otherwise,Ifx this can be a feature of it?
@arvinxx I'm currently the primary maintainer. To be honest, I don't totally understand your question. But if it's essentially a feature request, Less is basically just in bug-fixing mode at this point.
This could be nice. I like to use @somevar
instead of long and a bit harder to write var(--somevar)
in my less file
What we want is basically to print out the variable text instead of the actual value so we can access it from the dom. I for example want to let the visitor to change a "@primaryColor" value to a darker shade with a picker.
So in the less file we have ;
:root{
--primary-color: #AF1763;
}
@primaryColor: var(--primary-color);
.somediv{
color: @primaryColor;
}
this prints:
.somediv{
color: #AF1763;
}
this not changing if I change the --primary-color: #AF1763;
variable in dom. because less printed out the color hardcoded
So what would be nice is that it prints our like this;
.somediv{
color: var(--primary-color);
}
This way if we change --primary-color: #AF1763;
in root with JS or whatever the text color will be updated everywhere @primaryColor has been used in the less file.
As we know, less function can't work with css variables. There are lots of related Issues, like #3563 #3551 #3537 #3394 .
These issuses show we really want a way to combine less variable and css variable. Because less is a great tool to compile css in a programming way and css variable has the feature of dynamtic value and is a good way to switch theme.
It's true that is less can't use css variables in less function. But want we really want is to hook less variable and css variable.
And thus, I come up a "theory" method to combine less function and css variable. Here it is.
First, declare less variable in less function way.
Secondly, declare css variables with less variable
by this method, we can get a generated css:
By this method , we can delcare a new less variable to hook less variable and css variable. and it will work geart with light mode and dark mode.
The reason to we want to use less variable ohter than css variable is that css variable has too much syntax noise. It's much easier to write with a single
@
thanvar(--
.However, It's not enough. Because the purpose is to hook
@blue-1
withvar(--blue-1)
.And actually what want I just need is change the declare of
@blue-*: less function
to@blue-*: var(--blue-*)
after executing less function.the
modifyVars
param is used to replace value before less function executes, What I really need is a param to modify variable after executing less function. (There is a little scope of modify variable to avoid circular dependency,for example we don't want--blue-1: @blue-1
to--blue-1: var(--blue-1)
).So is there any way to achieve this? For example a plugin? I need more information to solve this problem, I think it will be a really meaning feature.