Importing Sass into Hubspot

developertools

#1

Anyone have any insight as how to compile Sass and upload into Hubspot? Please let me know if you have tried it and got it to work.

For reference: https://sass-lang.com

Please Help!!

Thanks,
Milana


#2

@milanaabidor

Sass should compile to straight CSS, which can the be included in a normal HubSpot stylesheet that lives in the Design Manager. Any changes would need to be recompiled, and then have your HS sheet updated (this can be done manually or via FTP)

With all of that said, if you're looking to use similar features to Sass, the HuBL language (HubSpot's templating lanugage) has many of the same features you get with Sass - importing/extending, variables and macros, mathematical operators, etc. This page of the designer docs is a great place to start - https://designers.hubspot.com/docs/hubl/hubl-variables-and-macros-syntax

Alternatively, if your app compiles Sass and publishes to a static URL, you could include that static URL in the Head of any HubSpot template or domain.


#3

What do you mean by it should? As far as I've seen Hubspot doesn't support Sass. How can I upload all the .scss files that are associated with Sass otherwise? as it isn't just one master file.


#4

@milanaabidor - You are correct that HubSpot does not support Sass. What I mean is that you would not include the raw .scss files, but rather the post-compiled standard .css files. I.e. You write sass, compile it out to a static file(s), and then either include the static file through includes in your templates/domain settings, or, copy/paste the output into a .css file hosted in the HubSpot Design Manager. (Or, alternatively, re-writing using similar concepts, but via HuBL)


#5

Hi Robert,

This would mean that I can't write code within Hubspot which is ultimately extremely difficult to do since the majority of what I am seeing/ not seeing within the browser as I code within Hubspot doesn't populate the same way when I am coding locally. If you know of any other fixes, please share or if Hubspot has any future plans of supporting Sass directly within the platform.

Also, the HuBL language link you sent over only supports variables from what I can tell because the @include portion looks like that's only within the HTML/Hubl and not the CSS. and I don't see any information regarding the @mixin or @extend functionality. If this does exist, please explain further as the documentation doesn't do a sufficient job.

Thanks!


#6

At this time I do not believe there is any plan to support Sass.

If the aim is developing locally (as opposed to within the HubSpot web based IDE), then you can run a HuBL server locally to render HuBL markup from local files - https://designers.hubspot.com/docs/tools/local-hubl-server

There are two methods by which to include and import files

  1. Standard CSS import @import url('https://www.domain.com/folder/style.css');
  2. Or, using HuBL include - {% include "hubspot/styles/patches/recommended.css" %} - this is documented in the same variables and macros document from above. Here the path is the HubSpot Design Manger path to your stylesheet. There are two ways to find that path: either via the Design Manager > Actions tab > 'Get Public URL' or, using FTP (which pairs well with working locally) - https://designers.hubspot.com/docs/tools/hubspot-ftp

RE: mixins and extends- HuBL macros provide similar functionality to mixins - https://designers.hubspot.com/docs/hubl/hubl-variables-and-macros-syntax#macros . HuBL does not really provide the same type of functionality as extends, but you could get kinda close with macros.

With all of that said, particularly if you are developing locally, you can use Sass, compile to .css, and then use FTP to upload the compiled .css file to the HubSpot Design Manager (see FTP doc above)