Get SaSSy: How to Use SASS on HubSpot

Written by Steven Kielbasa | 9/3/18 11:39 AM

Sass (or rather its SCSS flavor) has largely taken over the front-end world since its introduction in 2006.

Many developers have come to rely on its robust feature set—one that vanilla CSS lacks. If you're new to working designing in HubSpot, one of your first realizations is that HubSpot wants you to write vanilla CSS using their browser-based editor—this means no Sass for you. For HubSpot veterans, this may be old news, but that actually isn't the case and you can get Sass running with minimal effort.

Gathering Tools

There isn't much you'll need:

First, you'll need your trusty text editor of choice;
Second, you'll need a way to compile your SASS/SCSS; and
Finally, you'll need an FTP client (preferably with auto uploading).

For this tutorial, we'll be using Prepros to handle both the compilation and the uploading. You can use Gulp, Webpack, or whatever tools you prefer.

Building the Toolchain

First, create a new project in Prepros (we have a boilerplate project we start with).

Now we need to tell Prepros to compile our Sass on save. Do this by going into the Project Settings > Compiler Settings > Sass and checking the Auto Compile checkbox (we recommend also turning on Autoprefixer here too).

The last step is to configure FTP. Navigate to Project Settings > FTP Settings and plug you and your portal's information in per the HubSpot documentation. Your path will be /portals/[your-portal-id]-[your-portal-name]/content/files. This will drop your compiled files into your portal's file manager. Importantly, check the Upload on Change checkbox. With this key setting enabled, every time you save your SASS/SCSS file, it will compile and the compiled CSS file and sourcemap will get uploaded to HubSpot.

Again, you can set up this automation with whatever tool or tools you prefer. For simplicity, we've chosen a GUI tool that handles the whole process.

Using Your CSS

In your portal, navigate to the File Manager and locate your CSS file and grab its URL. Somewhere in your template (we recommend either your global header module or your template's 'Additional <head> markup' field), include the following code:

{{ require_css("[path/to/your/css/file]") }}

By including your CSS this way, you can take advantage of HubSpot's CSS optimizations (like auto concatenation) despite not using the Design Manger's code editor. That's all there is to it. Also, since Prepros is generating and uploading sourcemaps along side your CSS, your browser's devtools will be able to show you the SASS/SCSS location of your rules. To get sourcemaps working, you'll need to disable the auto-concatenation that HubSpot does, and you do this on a temporary per-tab basis by adding `?hsDebug=True` to the end of your page's URL.

Just like that, you've gained (or regained) access to all the powers of Sass while still being able to do things the 'HubSpot way'. If you've incorporated Sass into your HubSpot workflow we'd love to hear about it in the comments below. Likewise, if you have any issues, feel free to ask. Happy coding!

View full post