Why do some items show a red highlight in my stylesheet?

[hashackelford]

I'm somewhat a newbie to CSS, and am trying to work with a piece of code I grabbed from somewhere else. When I put the code into my stylesheet, some of the items show up with a red highlight. I thought the red would mean that there is an error, but interestingly, the stylesheet says that there are no errors. (See screenshot below)

Any help on what this means or how to fix it would be much appreciated! Thank you!

[Jsum · Accepted solution]

@hashackelford, you are using nesting css which is a characteristic of CSS pre-processor language such as less, sass, or scss. These languages are essentially css except that they have some unique, and very useful, features not available in css. The only snag is that it is "pre-processor" meaning that it needs to be processed to convert it into actual css that the browser can read. the browser doesn't understand nesting css, and it is definitely not a built in feature of hubspot. 

You should refactor the css to avoid nesting css rules. 

also, @include and other directives are not going to work in regular css. You'll want to refactor for that as well.