Variants help to define different variations of a single style without having to use variables.
Usually, you'll use variants if you have a known number of static variations.

Variants are used together with Conditionals and can only be compared using an equal comparison.

button.elo

variant ThemeMode {
  Dark
  Light
}
 
style Button {
  padding: 10
  [ThemeMode=Dark] {
    backgroundColor: black
  }
  [ThemeMode=Light] {
    backgroundColor: white
  }
}

Variants can also be nested to specify styles that are only applied if both conditions are met.

button.elo

variant ThemeMode {
  Dark
  Light
}
 
variant Size {
  Normal
  Small
}
 
style Button {
  padding: 10
  width: 100
  [ThemeMode=Dark] {
    backgroundColor: black
    [Size=Normal] {
      width: 150
    }
    [Size=Small] {
      width: 80
    }
  }
}