# HubL doesn't parse in CSS files?

**URL:** <https://community.hubspot.com/t/hubl-doesnt-parse-in-css-files/23316>\
**Category:** CMS Development\
**Created:** [July 23, 2020, 3:12pm UTC](https://community.hubspot.com/t/hubl-doesnt-parse-in-css-files/23316 "2020-07-23T15:12:40Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![balibriant](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/balibriant/32/77566_2.png) [@balibriant](https://community.hubspot.com/u/balibriant)\
**Post date:** [July 23, 2020, 3:12pm UTC](https://community.hubspot.com/t/hubl-doesnt-parse-in-css-files/23316/1 "2020-07-23T15:12:40Z")

</div>

I’m working on a module right now which requires me to use different CSS rules according to which fields of the module are being used. My plan was to use HubL for a basic if/else control structure in the CSS file.

I thought I would be able to do this based on the fact that there are several examples of using HubL with CSS in the HubL documentation itself. For example, [HubL Syntax](https://developers.hubspot.com/docs/cms/hubl), where the following example, among others, is shown:

```auto
{% set primaryColor = '#F7761F' %} {# defines variable and assigns HEX color #}

a {
 color: {{ primaryColor }}; {# prints variable HEX value #}
}

```

But as soon as I tried to do it, I got a warning that “HubL in your CSS or JavaScript won’t be parsed, except for the module\_asset\_url function” and, indeed, the HubL didn’t parse, it came through to the client side still sitting in the CSS file.

This is the relevent section of my module.css file:

```auto
{% if module.hero_section.webinar_form %}

.hero-section-module .hero-text{
 text-align: left;
 padding: 2em 2em 0em;
 margin: 0 auto;
}

.hero-section-module .hero-text h1{
 margin-top: 0.75rem;
}

.hero-form {
 max-width: 450px;
 padding: 1em 2em 2em;
}

.hs_recaptcha {
 display: none;
}

.hs_cos_wrapper_type_form form .hs-button {
 margin: 0 auto 0;
 max-width: 100%;
}

.hs_cos_wrapper_type_form .actions {
 text-align: left;
}

.hs_cos_wrapper.form-title {
	display: none;
}

.end-text {
 font-size: 0.8em;
 padding-top: 1em;
}

{% else %}

.hero-section-module .hero-text{
 text-align: left;
 max-width: 1230px;
 padding: 8rem 40px;
 margin: 0 auto;
}

.hero-section-module .hero-text h1{
 margin-top: 0.75rem;
}

{% endif %}

```

So I’m a bit confused. Can HubL be used with CSS or not? If not, why not, and why does the documentation include several examples of using HubL with CSS?

If yes, how?

---

<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:** [July 23, 2020, 3:58pm UTC](https://community.hubspot.com/t/hubl-doesnt-parse-in-css-files/23316/2 "2020-07-23T15:58:21Z")

</div>

Hello @balibriant,

since, the module.css will be pasted to it own css file, it doesn’t know about your module items like the hero\_section.webinar\_form.

But you can put CSS on the Hubl + HTML section, like that:

```auto
{% if module.hero_section.webinar_form %}
<style>
.hero-section-module .hero-text{
 text-align: left;
 padding: 2em 2em 0em;
 margin: 0 auto;
}

.hero-section-module .hero-text h1{
 margin-top: 0.75rem;
}

.hero-form {
 max-width: 450px;
 padding: 1em 2em 2em;
}

.hs_recaptcha {
 display: none;
}

.hs_cos_wrapper_type_form form .hs-button {
 margin: 0 auto 0;
 max-width: 100%;
}

.hs_cos_wrapper_type_form .actions {
 text-align: left;
}

.hs_cos_wrapper.form-title {
	display: none;
}

.end-text {
 font-size: 0.8em;
 padding-top: 1em;
}

{% else %}

.hero-section-module .hero-text{
 text-align: left;
 max-width: 1230px;
 padding: 8rem 40px;
 margin: 0 auto;
}

.hero-section-module .hero-text h1{
 margin-top: 0.75rem;
}
</style>
{% endif %}

```

- Chris

---

<div class="post-metadata">

**Author:** ![SandyG1](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/sandyg1/32/77083_2.png) [@SandyG1](https://community.hubspot.com/u/SandyG1)\
**Post date:** [July 26, 2020, 1:29pm UTC](https://community.hubspot.com/t/hubl-doesnt-parse-in-css-files/23316/3 "2020-07-26T13:29:50Z")

</div>

Another way to add styles into your module.html file is by using

**{% require\_css %}** and **{% end\_require\_css %}**

This can make your output html cleaner. For example:

```auto
{% require_css %}/* name will get the name of the module row (this is unique) */
 <style id="{{ name ~ '__styles'}}">/* create a class using an ID dynamically based on the module row name */
 {{ '#EXAMPLEIDSELECTOR--target_' ~ name }} {
 color: {{ module.primaryColor.color }}
 }
 </style>
{% end_require_css %}

```

This code then appears in your **HEAD** having created a new class for each row

your row then needs to match with it’s ID and that’s easily done like so:

```auto
<div id="{{'EXAMPLEIDSELECTOR--target_' ~ name }}">
...
...
...
...

</div>

```

This way is cleaner html, but most of the time it doesn’t matter which way it’s done 🙂  
ps, I learnt this from reading HubSpots code on their modules. You learn a lot from them 🙂

Sandy