CSS Variables
wwwwCSS variables are, well, part of CSS, so that means it can only be used with Div boxes or CSS code injections. They will not work with normal bbcode tags, and must instead be treated as CSS.
Declaring a CSS Variable
wwwwIt is extremely easy.
wwwwThat's it. That's all. You declare the variable name with -- (double dashes) followed by the variable name you want to give it. After that you just define the value you want the variable to carry with a colon and your value, like a normal CSS property.
Note that the CSS etiquette and naming conventions are that you separate the words with a dash. So variable name A would be --variable-name-A. You could do capitalizations instead or some other standard, but remember, the point of CSS variables is also to help clean up your code and make it readable.
Using variables
Using variables is just as easy as making them. To use them, you must precede them with var(. So this means that when you use a variable, it'll look like this:
So lets say that you have a variable set to the value "2px red solid"
And you want to make a div box's border to 2px red solid. You would do
Or maybe you want 3 div boxes with a border 2px red solid.
Inheritance
wwwwSo one of the biggest benefits to variables is the fact that you can set a variable and alter CSS properties from afar. The only way you can do this is through wrapping the area you want to have the variable in a div. If an element uses a variable outside of the div, it wont have it.
Fallback
wwwwSo one of the interesting things you can do with Var( is include fallback values. These are values that are used if the variable is an invalid value. It is done by simply appending the fallback value in a comma after the variable.
Browser Support List
Safari may not be able to support more complex variables due to a problem involving RPN's inline style.
wwwwHello!
Alteras
here. This is a resource post on CSS variables, variables defined with CSS properties. The applications of variables are mostly for saving space and time. Often times in CSS code injection, there'll be multiple elements that all use the same property, then changing and testing it becomes a hassle. By setting a Variable, you only have to change the variable and everything else will use it.Safari may not be able to support more complex variables due to a problem involving RPN's inline style.
wwwwCSS variables are, well, part of CSS, so that means it can only be used with Div boxes or CSS code injections. They will not work with normal bbcode tags, and must instead be treated as CSS.
Declaring a CSS Variable
wwwwIt is extremely easy.
Code:
--variable: value;
Note that the CSS etiquette and naming conventions are that you separate the words with a dash. So variable name A would be --variable-name-A. You could do capitalizations instead or some other standard, but remember, the point of CSS variables is also to help clean up your code and make it readable.
Using variables
Using variables is just as easy as making them. To use them, you must precede them with var(. So this means that when you use a variable, it'll look like this:
Code:
var(--variable);
Code:
[div=--example:2px red solid;][/div]
Code:
[div=--example:2px red solid;][div=border:var(--example);]hi[/div][/div]
hi
Or maybe you want 3 div boxes with a border 2px red solid.
Code:
[div=--example:2px red solid;]
[div=border:var(--example);]hi[/div]
[div=border:var(--example);]hello[/div]
[div=border:var(--example);]greetings[/div]
[/div]
hi
hello
greetings
Inheritance
wwwwSo one of the biggest benefits to variables is the fact that you can set a variable and alter CSS properties from afar. The only way you can do this is through wrapping the area you want to have the variable in a div. If an element uses a variable outside of the div, it wont have it.
Code:
[div=--example:Red]
[div=color:var(--example);]I have it![/div]
[/div]
I have it!
Code:
[div=--example:Red][/div]
[div=color:var(--example);]I don't[/div]
I don't
Fallback
wwwwSo one of the interesting things you can do with Var( is include fallback values. These are values that are used if the variable is an invalid value. It is done by simply appending the fallback value in a comma after the variable.
Code:
[div==--example:I'm an invalid value!]
[div=color:var(--example, Blue)]I'm a fall back value![/div][/div]
I'm a fall back value!
Last edited: