Skip to content

Instantly share code, notes, and snippets.

Last active Jul 11, 2019
What would you like to do?
Understanding about CSS Variable - #30DaysofCSSGirls

Understanding about CSS Variable - #30DaysofCSSGirls

CSS Variable Level 1

'--'* family of properties - Custom Properties

Custom Properties

  • Define the substitution value of 'var()' functions

  • Define any valid ID that starting with two dashes

  • Property of name starts with two dashes (--)* such as (--abc)

  • E.g.

:root { --main-color: black --accent-color: white; } -- focusing directly one change of the colour at the website instead of changing colour at one by one code

  • values or names are usually case-senstive
  • Not reset by the 'all' property
  • Use CSS-wide keywords

Custom Property Value Syntax

  • production matches any sequence of one or more tokens

    • Sequence doesn't contain
    • <bad-string-token>
    • <bad-url-token>
    • unmatched
      • <)-token>
      • <]-token>
      • <}-token>
    • top-level
      • <semicolon-token> tokens
      • <delim-token> tokens with a value of "!"
  • Never include unmatched quote '," or bracket {}

  • Contain a trailing '!important"

    • '!important" remove from the property's value by CSS Parser or Syntax Checking
    • make the custom property "important" in CSS Cascade
  • Represent at least one token (whitespace)

    • --foo: ; = valid
  • var(--foo) call = single space as its substitution value

    • --foo:; = invalid
  • E.g.

--foo: if(x > 5) this.width = 10;

  • Values are usually case-senstive

  • Initial values are empty value and special interaction with 'var()' notation

  • Declared on any Element

  • Resolved with Normal Inheritance and Cascade Rules

  • Made conditional with '@media' and other Conditional Rules

  • Used in HTML's Style attribute

  • Read or Set using CSSOM

Resolving Dependency Cycles

  • Create cyclic dependencies which custom property or more than one uses 'var()' refer it or each other

  • Create a directed dependency graph that contain nodes for each custom property

  • Add an edge between prop and var

  • If having a cycle in the dependency graph, need to be compute to their initial value (guaranteed-invalid value)

  • E.g.

:root { --main-color: #c06; --accent-background: linear-gradient(to top, var(--main-color), white); } --Valid Custom Property by using a Variable

var() notation - Cascading Variables

  • substituted into the value of another property with 'var()' property

var() = var( <custom-property-name> [, <declaration-value> ]? ) }

First Part - name of the custom property to be substituted
Second Part - fallback value (used as the substitution value when invalid reference custom property)

  • used in place of any part of a value in any property on an element
  • cannot used as property names, selectors instead of property values

Invalid Variables

  • When a custom property has its initial value, 'var()' functions cannot use it for substitution

  • Invalid at computed-value time if 'var()' references a custom property with its initial value or uses a valid custom properties but property value sub invalid 'var()' functions

  • E.g.

:root { --not-a-color: 20px; } p { background-color: red; } p { background-color: var(--not-a-color); } --Invalid Variable (wrong assignment for background colour in paragraph)

Variables in Shorthand Properties


  • Value of a shorthand property is removed out into its component for longhand properties at parse time
  • Longhands participate in the cascade with of the shorthand more-or-less discarded
  • If a var() functions is used in a shorthand, you don't know where the values are heading to which area
  • Single var() function might be replace in the value of several longhands at same time


  • Fill in longhands with special, unobservable-to-authors pending-subtitution value include the shorthand contains a variable
  • Cascade as normal value, at computed-value time after 'var()' functions are subtituted in and parsed shorthand and longhands should have properly values at point


  • case-insensitive flag set for custom property declarations
  • Don't appear on a CSSStyleDeclaration object in camel-cased form

Serializing Custom Properties

  • Serialized with the casing as provided by the author
  • Restricted to the ACSII range and case-insensitive


Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment