less / less.js

Less. The dynamic stylesheet language.
http://lesscss.org
Apache License 2.0
17k stars 3.41k forks source link

How to create a LESS variable with a Plugin #3659

Open Ora9 opened 2 years ago

Ora9 commented 2 years ago

I want to create a simple LESS plugin that create variables on a function call

I want to do this because i want to have a less variable dynamic on runtime (link of unanswered question on why i want to do that)

In short

i want to do this :

less to css var

without having to do :

enter image description here

And just declare each variable once like :

enter image description here

And var() is the custom LESS plugin function i wanna make

What i tried

I tried to learn how to create plugin on lesscss.org, github.com, and on diverse site, but it's either just not enough, or really obscure on how to create variables

I also saw this blog post where he creates variables, but i tried every thing, and nothing worked

Finally

I just want some advices or code, and ideally an explanation on how tf it works

Thanks :)

gzb1128 commented 2 years ago

hello,i mean less support creating variables like this is it not enough or maybe i don't get your point ` @width: 10px; @height: @width + 10px;

header {

width: @width; height: @height; } `

Ora9 commented 2 years ago

hello,i mean less support creating variables like this is it not enough or maybe i don't get your point ` @width: 10px; @height: @width + 10px;

header { width: @width; height: @height; } `

Hi, thanks, but i want to create a variable programmatically with a js plugin, not directly in .less file

iChenLei commented 2 years ago

@Fukv I think less plugin's preProcessor is for you, you can parse less source file via postcss and postcss-less, and then modify the var function ast node, and leave the rest work to less.