Help! how to use css variables for size/padding/margin etc

i can see some cwicly users(even louis’s video , I remember) are using css variables for size etc…

i working on it for harlf day,
but do not know how to use it by cwicly,
is any brief/guideline on this ?

anyone can help on it? thanks in advance sincerely.

Hi @qiang814k,

usually, the workflow would be like this:

  1. In your global stylesheet (or create one with Cwicly) create a css variable, usually under root selector:
:root {
  --variable-name: variable-value;

For sizes and spacing remember to add units to variable-value.

  1. In Cwicly’s input field for e.g. padding, margin, width etc. use that variable like so:


and from the units’ dropdown choose the last option of two dashes, although Cwicly does it automatically.

And that’s all! :slightly_smiling_face:

A good resource to learn about it is W3Schools CSS Variables.


I create my variables for spacing and font sizes here:

Then I create a global style sheet in Cwicly called “variables”. There I paste the created variables for spacing and font size. Also I will declare other variables I want to use like --canvas-padding or --header-height.

Now you can use the variables but you need to type them out:

Bildschirmfoto 2023-10-26 um 11.45.22

For padding and margin (only for top and bottom) I also create a utility class sheet. This way I can just give a section the class .p-top-2xl for example and don’t have to type the variable out.

.p-top-2xl {
   padding-top: var(--space-2xl);

To make the classes available in the Classes selector you can register the used classes as External Classes here:

To import all your classes just press this button and paste the whole style sheet.

A while back I got some great help in this thread:

Hey guys, your feedback is greatly appreciated, I was about to ask about this when I found this post and the subsequent answers.

Great community,
Thank you so much

thanks for your help, @Jonas @Marjan , take a try, seems working very well.