Implementing SASS and Global Variables

  • 26 June 2018
  • 2 replies
  • 11 views

Hi there,

I’m looking for a way to use SASS and Global Variables with Unbounce. They have some documentation that mentions how to utilize global variables (http://unbounce.github.io/sass_styleguide/#global-variables), but their support team refuses to clarify the instructions “because it’s outside their scope of support”. So alas, I am here.

Basically, I’m looking to do something like the following in my stylesheets - even if I need to host my sheets elsewhere and link them in with a header injection such as <link rel="stylesheet" type="text/css" href="path/to/theme.css">

  @color1: blue;
  @color2: red;

  .container {
    color: @color1;
    background: @color2;
  }

This is an oversimplification of my objective, but you get the point. I would be fine using @ variables or $ variables.


2 replies

I would also like the ability to implement SASS (or any kind of CSS preprocessor - LESS, Stylus, etc).

Hey there 🐱

Vicky from the Unbounce Team here 🙂

Unfortunately, we haven’t included support for the LESS extension on CSS in our builder just yet. However, .less code should work once it’s compiled into CSS.

Have you considered using a Less to CSS converter similar to this one? https://www.webtoolkitonline.com/less-to-css.html

Reply