How To Use Custom Variables In Squarespace CSS

Abi Bacon

Squarespace Developer based in Southampton, UK

Are you designing a site for a client that contains Custom CSS but you’re worried it isn’t easily editable by the client?

Some properties, such as adjusting Colors, Font Sizes, Border Widths etc you’ll want your client to be able to easily adjust to their liking, but others such as Display, or Position values you might not want them touching as these could easily ‘break’ the design of their page.

What we can use in this situation are Custom Variables, or Custom Properties (these names are used pretty interchangeably).

What Is A Custom CSS Property?

A custom CSS property, also known as a CSS variable, is a user-defined variable that allows you to store reusable values to be used throughout your CSS.

Easily Editable

One huge bonus of Custom Property’s are that you can use them as many times as you’d like throughout your code, but if you want to change the value, you only need to do it in one place.

How To Create A Custom CSS Property

Your Custom Property will be scoped to the element you define it within. Here I’m going to use the :root psuedo-selector which targets the highest level element within the document. This means the —background-color custom property will be able to be used on any element within my site.

:root {
  --background-color: blue;
}

If I wanted to be more specific and only have the property be usable within the Accordion Block I would use the below code.

.accordion-block {
  --background-color: blue;
}

How To Use A Custom Property

Now that we’ve created our Custom Property we can use this within the rest of our CSS.

Once created custom properties can be referenced anywhere within the stylesheet using the var() function. For example here we’ve created a Custom Property ‘—border-width’, and we’re assigning the value to the property ‘border-width’ on the ‘.container’ element.

:root {
  --border-width: 2px;
}

.container {
  border-width: var(--border-width);
}

Custom Property Best Practises

I typically place all of my Custom Properties at the top of my Custom CSS panel, this way the areas my client can adjust (without ‘breaking’ the design) are easily accessible.

I also make sure I add a comment to the Custom CSS panel saying ‘Don’t Edit Below This Line’ below the Custom Properties.

:root {
  --custom-property-one: 12px;
  --custom-property-two: blue;
}

.accordion-block {
  --font-color: green;
  --border-width: 2px;
}

/** Do Not Edit Below This Line **/

---