vBulletin Manual - How Style Variables Interact with CSS

vBulletin uses Style Variables to dynamically build the CSS it uses for rendering during page load or when the files are written to the server, if you have enabled that option. The use of Style Variables allows you to build different styles from which your users can choose.

Here is a sample of code in a CSS template:

.postbit, .postbitlegacy, .eventbit {
    margin-bottom: {vb:stylevar padding};
    display:block;
    width: 100%;
    clear:both;
    position: relative;
    float: {vb:stylevar left};
    color: {vb:stylevar body_color};
    border: {vb:stylevar postbit_border};
}

This code contains several style variable references denoted by {vb:stylevar} tags. The vBulletin template engine retrieves the values of the style variables and inserts them directly into the CSS before it is used for rendering.

CSS Math Tag
It is possible to use style variables in mathematical expressions with the {vb:math} tag.

This is used to evaluate the result of the mathematical expression specified. The syntax is:

{vb:math expression}

An example using {vb:math} is:

height:{vb:math 8px + {vb:math {vb:stylevar font.fontSize}-1}};

This expression determines the height of an element based on the font size specified in the font style variable and an extra value of 8 pixels.