variation.css

This is for:

Developer
In this article

It’s often useful to inject some CSS into the page when developing an experience. We recommend using your variation.css file to do this, not least because the CSS code in this file is optimized and compressed for performance.

The CSS rules defined in variation.css are injected into the page only if your variation is executed. By this we mean that the visitor has met any segmentation conditions and the triggers.js file has run.

LESS

Because all experience CSS code is compiled using the open source LESS compiler, you can make use of all the great features that LESS offers, including:

  • Variables

  • Nested rules

  • Arithmetical operations

  • Mixins

Namespacing

It’s good practice to namespace your CSS classes to avoid conflicts. To help make this easier, we automatically make @experienceId and @variationMasterIdvariables available for use in your styles, as shown below.

variation.css

.qubit-@{experienceId}-foo {
  background: blue;
}

.qubit-@{variationMasterId}-foo {
  background: red;
}

variation.js

experienceId

module.exports = function variation (options) {
  const { experienceId } = options.meta
  const div = document.createElement('div')
  div.innerHTML = `<div class="qubit-${experienceId}-foo">Hello</div>`
  document.body.appendChild(div)
}

variationMasterId

module.exports = function variation (options) {
  const { variationMasterId } = options.meta
  const div = document.createElement('div')
  div.innerHTML = `<div class="qubit-${variationMasterId}-foo">Hello</div>`
  document.body.appendChild(div)
}