CMS Development

benji_thecroc
Colaborador | Partner nivel Gold
Colaborador | Partner nivel Gold

Issue with Minified CSS and {# comment syntax

resolver

Hi,

 

So I've come across a slight pain in the butt. We tend to develop our templates locally in order to use SCSS and task processors such as Gulp, it's just so much easier and efficient to do this rather than straight into the HubSpot design tools editor. We then copy the minified code and paste it into the relevant CSS/JS file for use in HubSpot.

 

I've just come accross the issue where there's a conflict in HubL and CSS syntax where if an ID selector is within a media query this can cause a comment to be opened and not closed, meaning I have to manually find that conflict and add a space or a return after the opening bracket. e.g...

 

@media(min-width:576px){#letsTalkModal...

 

I'm just wondering why the use of HubL comment syntax is used in CSS when it can clearly cause a conflict and standardardised CSS comments can just be used as per normal? Is there a case to be made for removing HubL comment syntax for CSS file types in HubSpot Design Manager?

 

Thanks,

Benji

1 Soluciones aceptada
prosa
Solución
Colaborador líder

Issue with Minified CSS and {# comment syntax

resolver

are you using the code in the header of the page instead of a css file? or the css section in the modules?

 

you can modify your gulp config to replace {# with { # after you are done with the build. that may save time

If this post helped you resolve your issue, please consider marking it as the solution. Thank you for supporting our HubSpot community.

Ver la solución en mensaje original publicado

2 Respuestas 2
prosa
Solución
Colaborador líder

Issue with Minified CSS and {# comment syntax

resolver

are you using the code in the header of the page instead of a css file? or the css section in the modules?

 

you can modify your gulp config to replace {# with { # after you are done with the build. that may save time

If this post helped you resolve your issue, please consider marking it as the solution. Thank you for supporting our HubSpot community.
benji_thecroc
Colaborador | Partner nivel Gold
Colaborador | Partner nivel Gold

Issue with Minified CSS and {# comment syntax

resolver

Using it in a CSS file type within the design manager as it's a global style sheet.

0 Me gusta