variables.md

Declare variables in your CSS with a @set directive and use them with the $() function.

Variables can also be injected at runtime with the vars option.

/* Defining variables */
@set {
  dark: #333;
  light: #F4F2E2;
  smaller-screen: screen and (max-width: 800px);
}

/* Using variables */
@media $(smaller-screen) {
  ul, p {
    color: $(dark);
    /* Using a fallback value with an undefined variable */
    background-color: $(accent-color, #ff0);
  }
}

---

/* Interpolation */
.username::before {
  content: "$(greeting)";
}

Conditionals

Sections of CSS can be included and excluded on the basis of variable existence with the @ifset directive:

@set foo #f00;
@set bar true;

@ifset foo {
  p {
    color: $(foo);
  }
}

p {
  font-size: 12px;
  @ifset not foo {
    line-height: 1.5;
  }
  @ifset bar(true) {
    margin-bottom: 5px;
  }
}