% include to access variables and macros

New Contributor

I added my varibles and macros to the top of my CSS file. When I use % import to import I get an error:

The following validation error was found: TemplateSyntaxException: Could not resolve function 'borderradius'

 

How can I get my included CSS files to accept varibles and macros?

 

 

Reply
0 Upvotes
2 Replies 2
Top Contributor

Does your macro look something like this?

 

{% macro borderradius(value) -%}
    -webkit-border-radius: {{ value }};
    -moz-border-radius: {{ value }};
    -o-border-radius: {{ value }};
    -ms-border-radius: {{ value }};
    border-radius: {{ value }};
{%- endmacro %}

 

 

I would also check this Designer's Doc: http://designers.hubspot.com/docs/hubl/hubl-variables-and-macros-syntax#macros

Highlighted
Regular Contributor

If you created your macro in the CSS file and now moved it elsewhere, make sure you are importing the macro with a reference name then be sure to prefix any calls to the function with the name.

 

I like to import the file as "macros".

{% import 'path/to-your/macros.html' as macros %}

 Example usage would then be:

.ctaButton 
{ {{macros.borderradius(params)}} }

Your error is usually because you try referencing a macro that's in the same html file (or css) that you're working on.

 

Best of luck,

Mike