Jump to content

Local Development Environment - Using LESS Variables and Tweaks?

Recommended Posts

I've got my development platform set up. All appears to be working as it should and I'm starting to dig into the code to make some custom changes to my site template. However, I don't really understand how to handle the LESS variables set up as Tweaks in a local environment. It appears that the SquareSpace Server downloads the stylesheets from the source and uses them before Global.Less and/or Mobile.Less but after Tweaks.Less (ie. Changes to global and mobile show, but variable changes within tweaks do not).

Can anyone speak to how variables should be managed in a local environment to ensure something like @navBgColor that would otherwise be set as a Tweak can still be implemented/changed/used in the development process? Perhaps I just don't see/understand where the variable values are being set outside the Tweak.Less file...

I'm currently working with the Adirondack template.



Link to comment
  • Replies 1
  • Views 561
  • Created
  • Last Reply

OK. I'm going to answer my own question - but it's not really a pleasant answer, and likely not a correct answer.

It appears as though the Squarespace Server pulls the Style Variables from the source site last, which is really silly if you're trying to test sweeping changes across the site in developer mode. This means that if there is a @textColor variable used in the less stylesheets, any local value assigned to @textColor will not display locally - it will be pulled from the source.

I've tried a number of different ways around this including attempting to override the variable directly in the global.less file and creating a new variables.less file to add to the template.conf file. These won't work as the server will still pull the site values last.

The only solution I've been able to find is to rename the variable. So instead of using @textColor, I renamed it @tColor and updated the tweaks.less file accordingly. This forces the server to look locally instead of grabbing the pre-defined value on the site.

The problem with this solution will be the fact that I'll have to do it again if I ever need to make another change as @tColor will now be the site-side value the server will be looking for.

It's a hack, but it should work for now. If anyone knows of a better way to manage variables in local development, please chime in!

Link to comment


This topic is now archived and is closed to further replies.

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.