Variables

Our theme styles are written in SCSS, a language built on CSS that allows you to write more functional and efficient CSS.

In SCSS, you are able to define variables that allow you to easily set & reuse the same value multiple times throughout your styles.

We use a number of variables that are really helpful when styling our themes, and you also have access to!

Here are some examples of what you can do:

/* Color variables */
.foo-block, .bar-block {
  color: $primaryDark;
  background: $primaryLightest;
}

/* Font sizes */
.foo-heading {
  font-size: $heading3FontSize;
}

/* Custom variable that you can update this whenever you want */
$accentColor: pink;

.bar-card {
  background: $accentColor;
}

/* Compiles to CSS as: */
.foo-block, .bar-block {
  color: #6138D8;
  background: #C0B5E8;
}

.foo-heading {
  font-size: 25px;
}

.bar-card {
  background: pink;
}