Write less but do more in Squarespace with LESSCSS

Did you know that in Squarespace there is a custom CSS panel and that panel actually has a LESSCSS compiler?

Squarespace team knew that CSS code can get lengthy and crowded in the custom css panel so they implemented their own less compiler. This way we can write variables, mixins and so much more. Nevertheless on the day of writing this article, this LESS compiler does support an older version of LESS, the 1.3.3 version, that is pretty primordial if you ask me.

A proactive thing would be to analyze what did the LESS version 1.3.3 supported back in that time and make the best of it.

For starters variables are supported, but in the same time CSS variables are supported too, so it’s up to you which you want to use.

//css variable
:root {
   --primary-color: #fcc;  
}
div {
   color: var(--primary-color);
}

//Less variable
@primary-color: #fcc;
div {
   color: @primary-color;
}

Mixins with or without arguments

.border-radius(@radius){
    border-radius: @radius
}
.btn {
    .border-radius(10px);
}

.bordered {
    border-top: dotted 1px green;
    border-bottom: solid 3px yellow;
}
.btn {
    .borderered;
}

The counterpart for mixins is the ::part selector in CSS.

Arguments of the mixins can have default values, in case you call the mixin and don’t specify a value for the argument:

.GraySection(@color: green, @background: #ccc) {
   .inner {
      color: #color;
      background-color: @background;
   }
}
//after defining it you call it below
section[data-section-id="622e3c5c144cda6e338f255c"] {
  .GraySection(@color: black);
}

This will call GraySection mixin and change the default color into black, the background will remain the #ccc hex color.

Nesting

#menu {
    list-style: none;
    li{
        padding: 10px;
        a {
            color: @green
        }
        &:hover a {
            color: #000;
        }
    }
}

This results in #menu li a and #menu li a:hover to be generated as selectors.

The parent reference( & ) is also supported and it can be used in a different order:

span {
   h1 & {
     color: blue;
   }
}

This creates the following rule: h1 span { color: blue }

.red {
   && {
     color: red;
   }
}

Duplicating the parent selector generates bigger specificity, creating the following rule: .red.red { color: red }

Not supported features:

• :extend

Mainly this is all, with smaller additional features, that we can also use:

Interpolation

Even if selector interpolation has the version 1.4.0 displayed in the documentation it still works in Squarespace, so I guess it’s more like a trial and error based case. Above we used a variable as a selector and interpolated it inside the selector area.

In this case we interpolated a variable inside a string. This kind of interpolation inside a mixin will not work in Squarespace.

Lazy evaluation of the variable is also implemented, so you can use variable before it was defined.

Not supported features:

• variable properties
• variable variables

Escaping

div {
   width: calc(100% - 15px);
}

This mathematical operation between different units will be calculated by LESS in a different way then CSS would do it with calc. The result is actually 85% for the width. To avoid this happening, we need to escape the calc, to tell LESS to ignore this part and let CSS do the heavy-lifting.

div {
   width: ~"calc(100% - 15px)";
}

This will leave the code inside the quotation marks untouched.

Conclusion: The 1.3.3 version of LESS with LESS-parser implemented in Squarespace, has a limited number of features. Loops, guards, maps are missing but the basic stuff is already there like variables, interpolations, mixins. Make your custom CSS writing easier by using LESS.

0