# Theme Bug: Macros between multiple css files

**URL:** <https://community.hubspot.com/t/theme-bug-macros-between-multiple-css-files/21342>\
**Category:** CMS Development\
**Created:** [June 2, 2020, 4:57pm UTC](https://community.hubspot.com/t/theme-bug-macros-between-multiple-css-files/21342 "2020-06-02T16:57:25Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![igcorreia](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/igcorreia/32/26131_2.png) [@igcorreia](https://community.hubspot.com/u/igcorreia)\
**Post date:** [June 2, 2020, 4:57pm UTC](https://community.hubspot.com/t/theme-bug-macros-between-multiple-css-files/21342/1 "2020-06-02T16:57:25Z")

</div>

Hi, I have the project organized like so:

```auto
📂 CSS
|__📂 MACROS
     |__📄 macros.css
|__📂 TYPOGRAPHY
     |__📄 types.css
|__📄 THEME.CSS

```

Inside the theme.css file, I load all macros:

`import .... macros.cssimport .... typhograpy.css`

the problem is that inside the file typography.css the macros won’t work.

This works with HTML files, I can import a macro in the HEADER of the HTML file and all imported files work with the same macros.

In CSS I need to import the macros in all CSS files. This is a pain.

EDIT: also tried include, none work

---

<div class="post-metadata">

**Author:** ![sharonlicari](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/sharonlicari/32/101479_2.png) [@sharonlicari](https://community.hubspot.com/u/sharonlicari)\
**Post date:** [June 9, 2020, 10:23am UTC](https://community.hubspot.com/t/theme-bug-macros-between-multiple-css-files/21342/2 "2020-06-09T10:23:43Z")

</div>

Hey @igcorreia

Thank you for the information provided.I’ll tag a few experts that can share their experience with you.

Hey @krishangtechn [@david\_eic](https://community.hubspot.com/t5/user/viewprofilepage/user-id/67318) @Chris-M any thoughts you would like to share with @igcorreia?

Thanks

Sharon

---

<div class="post-metadata">

**Author:** ![Chris-M](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/chris-m/32/61599_2.png) [@Chris-M](https://community.hubspot.com/u/Chris-M)\
**Post date:** [June 9, 2020, 2:58pm UTC](https://community.hubspot.com/t/theme-bug-macros-between-multiple-css-files/21342/3 "2020-06-09T14:58:09Z")

</div>

Hi @igcorreia,

@all - corrrect me if i’m wrong, but as far as i know, this isn’t possible with basic css.

The @import statement will drop all non css statements such as variables and macros.

You will need to include these on every css file.

If you code locally:

There is also the option to switch to SCSS / Sass which has simulare statements.

In SCSS/Sass you have to compile the files, which compile your macros and variable to basic css.

- Chris

---

<div class="post-metadata">

**Author:** ![ndwilliams3](https://avatars.discourse-cdn.com/v4/letter/n/c4cdca/32.png) [@ndwilliams3](https://community.hubspot.com/u/ndwilliams3)\
**Post date:** [June 10, 2020, 3:25pm UTC](https://community.hubspot.com/t/theme-bug-macros-between-multiple-css-files/21342/4 "2020-06-10T15:25:04Z")

</div>

macros have to be added directly to the css file calling the macro. So you would need to import macros.css into typhograpy.css.

---

<div class="post-metadata">

**Author:** ![igcorreia](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/igcorreia/32/26131_2.png) [@igcorreia](https://community.hubspot.com/u/igcorreia)\
**Post date:** [June 17, 2020, 1:44pm UTC](https://community.hubspot.com/t/theme-bug-macros-between-multiple-css-files/21342/5 "2020-06-17T13:44:17Z")

</div>

Yep, each CSS file that needs to use the macro, needs to import them.