Guides

Nested selectors

let link = %cx(`
  color: $(Color.Text.body);
 
  &:hover {
    color: $(Color.Text.accent);
  }
`)

let link = %cx(`
  color: $(Color.Text.body);
 
  &:hover {
    color: $(Color.Text.accent);
  }
`)

Interpolation in selectors

let highlighted = %cx(`
  padding: 4px;
  outline: 1px solid red;
`)
 
let link = %cx(`
  color: $(Color.Text.body);
 
  & .$(highlighted) {
    padding: 0px;
  }
`)

let highlighted = %cx(`
  padding: 4px;
  outline: 1px solid red;
`)
 
let link = %cx(`
  color: $(Color.Text.body);
 
  & .$(highlighted) {
    padding: 0px;
  }
`)

Interpolation in Media queries

module Media = {
  let mobileDown = "(max-width: 767px)"
}
 
let container = %cx(`
  display: grid;
  grid-column-gap: 48px;
  grid-template-columns: repeat(2, 1fr);
  width: 100%;
 
  @media screen and $(Media.mobileDown) {
    grid-template-columns: 100%;
  }
`)

module Media = {
  let mobileDown = "(max-width: 767px)"
}
 
let container = %cx(`
  display: grid;
  grid-column-gap: 48px;
  grid-template-columns: repeat(2, 1fr);
  width: 100%;
 
  @media screen and $(Media.mobileDown) {
    grid-template-columns: 100%;
  }
`)

Note that all interpolation in preludes (selectors/media queries/etc) are strings and only the structure is being parsed and validated.

Not valid interpolation

Can't pass a function

// 🔴
let fn = (~kind, ~big) => { /* ... */ };
%styled.div(fn)

// 🔴
let fn = (~kind, ~big) => { /* ... */ };
%styled.div(fn)

Can't pass a variable reference

// 🔴
let value = "display: block"
%styled.div(value)

// 🔴
let value = "display: block"
%styled.div(value)