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).
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!
Steven Kielbasa
Visual communicator, dad, gamer, fixed-gear cyclist, re-poster, random commenter, Art Institute grad, and all around nerd.