CSS Variables

CSS custom properties (variables) let you define values once and reuse them throughout your site. Change the value in one place, and every element using it updates instantly. This is the foundation of consistent theming.

A CSS variable is a name you define, like --brand-color, and every time you reference it with var(--brand-color), the browser substitutes the actual value. It sounds simple, but it transforms how you maintain colors, typography, spacing, and more — especially when you need to swap themes or scale your design.

Note: CSS variables are fully supported in Silex via the CSS Variables plugin. For advanced features like component-scoped variables or runtime switching (Dark Mode), vote for Dark Mode for Websites on the roadmap.

Creating a variable

Open the CSS Variables dialog (the paint brush icon in the left sidebar, or via the Style panel).

Define variables by name and type:

• Color variables — colors used throughout your design (brand colors, text colors, borders)
• Size variables — spacing, font sizes, widths, heights
• Typography variables — font families for consistent typefaces

Click Add to create a variable. Give it a name (e.g., primary-color or heading-font) and set an initial value. The variable is stored in the :root CSS rule, making it available to all elements.

Example colors: - --brand-blue: #0066cc - --text-dark: #333333 - --border-light: #e0e0e0

Example sizes: - --spacing-small: 8px - --spacing-large: 24px - --font-size-heading: 32px

Example typography: - --font-sans: "Inter", sans-serif - --font-serif: "Merriweather", serif

Using a variable

Once you've created a variable, you can apply it to any CSS property that accepts that value type.

In the Style panel, look for a + button next to color, size, or typography properties. Click it to open a dropdown of available variables. Select the variable, and the property now uses var(--variable-name) instead of a hard-coded value.

Example: Set Background-color to the variable --brand-blue. Later, you change --brand-blue to #0044aa, and every element using that variable instantly updates.

You can also mix variables with other values. For example, linear-gradient(to right, var(--brand-blue), transparent) uses a variable as the starting color of a gradient.

Organizing variables by breakpoint

Silex lets you define different variable values for different screen sizes. In the CSS Variables dialog, you can set a variable at the desktop size, then override it for tablet or mobile.

This is useful for responsive typography: define --font-size-heading: 48px for desktop, then 32px for tablet and 24px for mobile. Every element using var(--font-size-heading) automatically scales.

Steps:

1. Open the CSS Variables dialog
2. Select or create a variable
3. Choose a device (breakpoint) from the dropdown
4. Set the value for that breakpoint

Variables defined at the desktop level are inherited by smaller breakpoints unless overridden.

Naming conventions for variables

Good variable names make your design system readable and maintainable.

Color naming patterns: - --primary-color, --secondary-color — main brand colors - --text-dark, --text-light — text colors - --bg-white, --bg-gray — background colors - --border-color, --shadow-color — effects - --success-color, --error-color — semantic colors

Size naming patterns: - --spacing-xs, --spacing-sm, --spacing-md, --spacing-lg — consistent spacing scale - --font-size-sm, --font-size-base, --font-size-lg — typography scale - --radius-small, --radius-large — border radius scale

Avoid names tied to appearance (--dark-blue) in favor of semantic names (--primary-color). This way, if your brand evolves, you change the value, not the name.

Common use cases

Theming

Define all your brand colors as variables. Every button, heading, and border references the same variable. To rebrand, change the value in one place.

:root {
  --primary-color: #0066cc;
  --secondary-color: #ff6600;
  --text-color: #333333;
  --bg-color: #ffffff;
}

Responsive typography

Define font sizes for each breakpoint. Headings automatically scale on mobile.

:root {
  --font-size-h1: 48px;
}

@media (max-width: 768px) {
  :root {
    --font-size-h1: 32px;
  }
}

Consistent spacing

Use a spacing scale for margins and padding. This prevents scattered, inconsistent gaps.

:root {
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 16px;
  --spacing-4: 24px;
}

Apply these to padding and margins throughout your design. Changing --spacing-3 updates every element using it.

Fallback values

When using a variable, you can provide a fallback in case the variable is not defined:

color: var(--brand-color, #0066cc);

If --brand-color is not defined, the color falls back to #0066cc. This is useful for ensuring designs work even if a variable is missing.

Practical example: light and dark theme variables

Although Silex doesn't yet have built-in dark mode switching, you can prepare your variables for it:

1. Define all colors as variables at :root (light theme)
2. Use semantic names like --bg-primary, --text-primary
3. Later, when dark mode is supported (via the roadmap feature), you'll add a media query or class selector with dark theme variables

Base (light):

:root {
  --bg-primary: #ffffff;
  --text-primary: #000000;
  --border-primary: #e0e0e0;
}

Future (dark mode):

@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary: #1a1a1a;
    --text-primary: #ffffff;
    --border-primary: #333333;
  }
}

Even though Silex doesn't switch themes automatically yet, using semantic variable names prepares you for when it does.

Common mistakes

• Naming variables after appearance, not purpose. Avoid --dark-blue in favor of --primary-color. You'll rename everything if your brand changes.
• Creating too many variables. Start with essentials: brand colors, typography, spacing. Add more as your design grows.
• Forgetting the double dash. CSS variable names must start with -- (e.g., --primary, not primary).
• Using undefined variables without fallbacks. If you reference a variable that doesn't exist, nothing renders. Always provide a fallback or ensure the variable exists.
• Not testing variable fallbacks. Test that your design degrades gracefully if a variable is missing.

Learn more

• MDN: CSS Custom Properties (Variables) — full reference
• MDN: var() function — using variables in CSS
• Dark Mode for Websites — vote for runtime theme switching
• Colors and backgrounds — where variables are most commonly used
• Typography — variable fonts and font families

---

Advanced: variable scope and inheritance

:root vs element scope

Variables defined in :root are global and accessible everywhere. You can also define variables on specific elements, and they are inherited by descendants.

Example: define --card-padding: 16px on a .card element. All children of that card can use it via var(--card-padding). This is useful for component-scoped design tokens.

Variable inheritance

Like color and font properties, CSS variables inherit from parent to child. A child that doesn't define --primary-color inherits it from the parent. This means you can define variables high in the DOM tree and override them lower.

Media query variables

Variables can have different values in different media queries. Define variables at :root for desktop, then override them at smaller breakpoints.

:root {
  --font-size-h1: 48px;
}

@media (max-width: 768px) {
  :root {
    --font-size-h1: 32px;
  }
}

This is how Silex's breakpoint-specific variables work under the hood.

Computed values

Variables store the exact value you assign. If you set --spacing: 1em, that's what gets computed — it doesn't expand to pixels. This can be useful (it scales with context) or confusing (it looks different in different contexts). Be intentional about units.

Reference: CSS variable types in Silex

Type	Purpose	Example Values
Color	Color properties (background, text, borders)	#0066cc, rgba(0, 102, 204, 0.8), hsl(210, 100%, 50%)
Size	Dimensions, spacing, font sizes, etc.	16px, 1em, 2rem, 50%, 24px
Typography	Font families	"Inter", sans-serif, "Georgia", serif

All variables are stored in :root as CSS custom properties and are inherited globally unless overridden at a specific breakpoint or element.

---

Quiz

Q1: You create a variable --brand-color: #0066cc and apply it to five buttons' background colors. Later you change the variable to #ff6600. What happens?

• A) Only the first button updates; you must manually update the others
• B) All five buttons update instantly
• C) Nothing happens; the buttons are already painted
• D) You must recreate the variable with the new value

Answer

B) All five buttons update instantly — this is the power of variables. Change the value once, and everything using it updates everywhere.

Q2: You want to apply a CSS variable to a property, but you don't see the + button next to it. Why?

• A) Silex doesn't support variables on that property
• B) You haven't created a variable yet
• C) The property type doesn't match available variable types (color, size, typography)
• D) You need to enable variables in settings first

Answer

C) The property type doesn't match available variable types — if you're trying to apply a color variable to a text property that expects an alignment value, it won't work. Match the variable type to the property type.

Q3: You define --spacing-sm: 8px at the desktop breakpoint. Does it automatically apply to mobile?

• A) No, you must define it separately for each breakpoint
• B) Yes, it inherits unless you override it for mobile
• C) Only if you add a media query
• D) It depends on whether it's a size or color variable

Answer

B) Yes, it inherits unless you override it for mobile — variables defined at larger breakpoints cascade down to smaller ones. You only need to override if you want a different value on mobile.

Q4: Which naming convention is best for a variable that controls your main brand color?

• A) --blue
• B) --dark-blue
• C) --primary-color
• D) --color-1

Answer

C) --primary-color — semantic names survive brand changes. If you later choose a different color for your primary brand, the name --primary-color still makes sense, but --blue or --dark-blue becomes misleading.

Q5: You apply a variable var(--brand-color) to a property, but you misspelled the variable name and it doesn't exist. What happens?

• A) The property uses a fallback color
• B) Nothing renders; the property is ignored
• C) The editor shows an error
• D) The variable is created automatically with a default value

Answer

B) Nothing renders; the property is ignored — undefined variables cause the property to fail silently. Always double-check variable names, or use a fallback: var(--brand-color, #0066cc).