• When posting, please be aware that artistic nudity is still nudity and not allowed under RpNation rules. Please edit your pictures accordingly!

    Remember to credit artists when using work not your own.

Resource CSS Variables and Calc()

Alteras

The Sleepy Prisoner
Administrator
Supporter
CSS Variables
Browser Support List



Safari may not be able to support more complex variables due to a problem involving RPN's inline style.
wwwwHello! Alteras 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.

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;
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:
Code:
var(--variable);
So lets say that you have a variable set to the value "2px red solid"
Code:
[div=--example:2px red solid;][/div]
And you want to make a div box's border to 2px red solid. You would do
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:
CSS Calc()
Browser Support List


Some Features may not be equally supported across all browsers. Please check compatibility charts on MDN or W3S
Safari may not be able to support divide. Please use with caution and consider using multiplying decimals as an alternative.
wwwwHello! Alteras Alteras here again. This is a resource post on CSS Calc(), calculations that can be done in CSS. These are mostly for varying sizes and readability. Using Calc(), you can perform calculations for CSS properties where length, frequency, angle, time, number, or integer is required.

Using Calc()
It is extremely easy.
Code:
property: calc(expression);
[div=width:calc(100% - 75px)][/div]
You just use calc() and put in the expression you want to calculate.

Operations
Calc() follows the standard operations of math and the order of operations.

* Multiply
/ Divide
+ Add
– Subtract

( ) Parentheses are also supported, but are considered nested Calc().

Nested Calc()
Nested Calc is when you have a calc() in a calc().
Code:
Calc(calc(75% * 2.5) - 12em)
As stated, parentheses are considered nested Calc()
Code:
Calc((50px / 2) + 40vh)

Syntax
wwwwPlus + and minus - operations must be surrounded by white space. This is due to the fact that there are negative values in CSS. If they don't have whitespace, they are interpreted as positive and negative. You don't need to do the same for multiply * and divide /, but it is recommended for consistency.
Code:
Calc(70px -5%) is not the same as Calc(70px - 5%)
You also need to know that if you are using a number with no defined unit in a multiply or divide, there needs to be at least one unit that defined.
Code:
Calc(100% / 6)
If you are using plus or minus, all values must be defined units.
Code:
Calc(5px + 37vh - 1337mm)
Also, you can't divide by zero.
 
Last edited:
Combining Calc() and CSS Variables
wwwwAnd I, Alteras Alteras , am here once more. The last two posts covered how to use Calc() and CSS Variables. This post will be covering the use of both of them in unison, as well as some limitations in regards to them.

Nested Calc() with variables
Variables are only computed at the point of which it is used. One of the outcomes of this is the use of variables inside Calc()
Code:
[div=--variable-A:500px; --variable-B:calc(var(--variable-A) - 2em)]
[div= --variable-C:calc(var(--variable-B) / 6);][/div][/div]
While this may seem redundant and counter-intuitive, it's actually useful when the calc expressions are long and complicated and reliant on multiple things.

Variable Units
So in variable usage alone, you can't do this:
Code:
[div=--example:50][div=width:var(--example)px][/div][/div]
In order to define a number ahead of time and then add the units, you'll have to do this instead.
Code:
[div=--example:50][div=width:calc(var(--example) * 1px))][/div][/div]
I don't know what applications this has, but it's actually pretty neat and gives you some insight to how you can really push things.

Computed as Needed
So, this is one of the more annoying things about variables and calc(). They only are computed when used. That means that if you create a variable with a calc expression as it's value, the calc expression isn't evaluated until when the variable is used.
Code:
[div=--example:calc(100% - 2vh);]filler [div=width:var(--example)][/div][/div]
is actually
[div=] filler[div=width:calc(100% - 2vh);][/div][/div]
This brings about several limitations, such as the fact that you can't get a value for something ahead of stuff, then bring it in. This also means that this
Code:
[div=--message-width:calc(100% / 3)][div=width:75%; border: 2px red solid]hello.[div=width:var(--message-width); border:2px blue solid]Hi, I'm 1/3 the size of my parent box, not the post.[/div][/div]
Will only have the size of that calculated to the size of it's container.
hello.
Hi, I'm 1/3 the size of my parent box, not the post.
 

Users who are viewing this thread

Back
Top