Stylesheet variables?

[Lynx]

Kami and/or elli (or anyone else who knows):

In the stylesheet, I've noticed that there are @ variables (?) there, like @body_background_color: #999999;.

I've got some questions, if you don't mind.

1. Can we create our own unique variables there (not sure exactly what they're called, so defaulting to the term variable), such as: @mysetting: #cccccc;?

2. If we can create them, how can they be used (have you made your own and found a use for them)?

3. Any idea if plugins can grab the info off of those?


Thanks for any insight!

[Kami]

no idea about plugins, but yeah you can create your own.

all you have to do is declare it at the top of your style sheet, eg:

@white: #fff;
@light_gray: #f3f3f3;
@med_gray_1: #e7e7e7;
@med_gray_2: #b6b6b6;
@dark_gray: #444;
And then later in your stylesheet simply reference the @ names.

They're most useful for recurring colours / styles. For instance on TARP I reuse the same colour blue for the titlebars, the header, post header/footer, so instead of trying to figure out what exact hex is witch i simply plug in @dark_blue and it fills in the value accordingly.

[Retread]

Sept 2, 2020 20:52:26 GMT -8 Lynx said:

1. Can we create our own unique variables there (not sure exactly what they're called, so defaulting to the term variable), such as: @mysetting: #cccccc;?

Hi Lynx

I think they're called LESS variables. lesscss.org/# The part that begins with @ and is punctuated with : is the variable and the part that follows and is punctuated with ; is obviously the value.

You absolutely can create your own. Just be careful to use a unique name that hasn't already been used in the Style Sheet. I don't know if there would be a problem if the variable was defined later in the Style Sheet than where it is used to substitute a value, so to be safe I'd suggest: declare first, substitute later.

Sept 2, 2020 20:52:26 GMT -8 Lynx said:

2. If we can create them, how can they be used (have you made your own and found a use for them)?

As Kami mentioned, they're convenient in any situation where changing a value in one place will automatically change it for many declarations.

My favorite use for them is for additions to the Visual Editor.

Sept 2, 2020 20:52:26 GMT -8 Lynx said:

3. Any idea if plugins can grab the info off of those?

I can't say for certain, but I very much doubt it.

When a theme is saved, LESS compiles what we see in the 'Style Sheet' and creates the actual publicly available css file which is used with the theme. For instance, if you View Page Source when viewing the Support Forum using the proboards.com theme, you'll see the HTML is referring to this css file:
<link rel="stylesheet" type="text/css" media="screen" href="//storage.proboards.com/1/css/kgJlmzgGZtKKY0GoNBfD.css" id="forum_style" />

That file has all the substitutions made for the variables and the variable declarations are not present. I don't think a plugin would be able to access the LESS source file that we see in the Style Sheet via the Admin panel. But we could ask Brian , as I reckon he would know.

[Kami]

Hey Retread! Thanks for adding the info about these being LESS variables, I appreciate that.

Not super sure why you had to repeat the information I already provided on how to use them though? Generally, we aren't supposed to repeat information. You tagged me, so it seems you wanted me to notice, and I am rather confused about it.

[Retread]

Sept 3, 2020 8:53:14 GMT -8 Kami said:

Not super sure why you had to repeat the information I already provided on how to use them though? Generally, we aren't supposed to repeat information. You tagged me, so it seems you wanted me to notice, and I am rather confused about it.

I tagged you to acknowledge that the beginning of that portion of my reply was already mentioned by you.

However, I continued by pointing out new variables aren't limited to the Style Sheet tab of the Advanced Styles & CSS. They can be used when creating new sections of the Visual Editor.

If you feel the notification created when I tagged you was a nuisance, I can just refer to your name in plain text in the future. Let me know.

[Bennett 🚀]

Sept 3, 2020 8:09:33 GMT -8 Retread said:

Sept 2, 2020 20:52:26 GMT -8 Lynx said:

1. Can we create our own unique variables there (not sure exactly what they're called, so defaulting to the term variable), such as: @mysetting: #cccccc;?

Hi Lynx

I think they're called LESS variables. lesscss.org/# The part that begins with @ and is punctuated with : is the variable and the part that follows and is punctuated with ; is obviously the value.

You absolutely can create your own. Just be careful to use a unique name that hasn't already been used in the Style Sheet. I don't know if there would be a problem if the variable was defined later in the Style Sheet than where it is used to substitute a value, so to be safe I'd suggest: declare first, substitute later.

Sept 2, 2020 20:52:26 GMT -8 Lynx said:

2. If we can create them, how can they be used (have you made your own and found a use for them)?

As Kami mentioned, they're convenient in any situation where changing a value in one place will automatically change it for many declarations.

My favorite use for them is for additions to the Visual Editor.

Sept 2, 2020 20:52:26 GMT -8 Lynx said:

3. Any idea if plugins can grab the info off of those?

I can't say for certain, but I very much doubt it.

When a theme is saved, LESS compiles what we see in the 'Style Sheet' and creates the actual publicly available css file which is used with the theme. For instance, if you View Page Source when viewing the Support Forum using the proboards.com theme, you'll see the HTML is referring to this css file:
<link rel="stylesheet" type="text/css" media="screen" href="//storage.proboards.com/1/css/kgJlmzgGZtKKY0GoNBfD.css" id="forum_style" />

That file has all the substitutions made for the variables and the variable declarations are not present. I don't think a plugin would be able to access the LESS source file that we see in the Style Sheet via the Admin panel. But we could ask Brian , as I reckon he would know.

You could inject your LESS variables into CSS variables, and then you could use those variables in plugins as well.

In the theme:
:root {
 --primary: @primary;
}
In a plugin's CSS:
.button-in-plugin {
    background-color: var(--primary);
}

[Kami]

Sept 3, 2020 9:33:45 GMT -8 Retread said:

Sept 3, 2020 8:53:14 GMT -8 Kami said:

Not super sure why you had to repeat the information I already provided on how to use them though? Generally, we aren't supposed to repeat information. You tagged me, so it seems you wanted me to notice, and I am rather confused about it.

I tagged you to acknowledge that the beginning of that portion of my reply was already mentioned by you.

However, I continued by pointing out new variables aren't limited to the Style Sheet tab of the Advanced Styles & CSS. They can be used when creating new sections of the Visual Editor.

If you feel the notification created when I tagged you was a nuisance, I can just refer to your name in plain text in the future. Let me know.

I didn't say that, I said I was confused. I appreciate that you took the time to explain your rationale.

[Lynx]

Thank you Kami, Retread and Bennett 🚀 for the replies! Very informative and much appreciated!

[Brian]

Sept 3, 2020 8:09:33 GMT -8 Retread said:

I don't think a plugin would be able to access the LESS source file that we see in the Style Sheet via the Admin panel. But we could ask Brian, as I reckon he would know.

A workaround was already suggested (though according to MDN it isn't compatible with IE), but I did want to explicitly state that this is the case and any CSS you add to a plugin can't use existing LESS variables nor does it ever go through the LESS compiler.

[Bennett 🚀]

Sept 3, 2020 14:07:36 GMT -8 Brian said:

Sept 3, 2020 8:09:33 GMT -8 Retread said:

I don't think a plugin would be able to access the LESS source file that we see in the Style Sheet via the Admin panel. But we could ask Brian , as I reckon he would know.

A workaround was already suggested (though according to MDN it isn't compatible with IE), but I did want to explicitly state that this is the case and any CSS you add to a plugin can't use existing LESS variables nor does it ever go through the LESS compiler.

IE is on the way out 🥳