Overview
A variation alters the design of an element but is not mutually exclusive. Variations can be stacked together, or be used along with altering an element's type.
For example, having wide menus that take up the full width of its parent may sometimes be overwhelming. You can use the compact variation of a menu to alter its format to only take up the necessary space.
Context sensitive
In Semantic, variations maintain context based on the element they modify, but keep the same vocabulary between elements. Just like how in English, the adjective 'big' may describe a different scale for a big planet versus a big insect.
For example an icon might need to modify it's vertical alignment when it is larger than the surrounding text, while a form does not.
All definitions in Semantic are based around em and rem so resizing an element usually is as simple as altering the base font size of the element, padding, margins, and other properties will adjust automatically.
Using Variations Together
Another variation of a menu is an inverted menu. This alters the color contrast to appear inverted for darker backgrounds. Some variations may also mutate when used together. Lets try adding the class name red as well.
Variations are not mutually exclusive and can be used together harmoniously, so we can use these together to create an inverted red tiered menu
Intersecting Variations
The definition for the variation red contains css specifically for describing the intersection of both red and inverted. For example, lets see the same menu with only the red variation.