Nesting in Custom CSS

Feature Requests / Improvements
1

Be great to be able to nest the custom CSS rules in the editor, makes it way more efficient and much less complex and easier to read and write :slight_smile:

1 Like
2

I’m pretty new to Bricks but it looks like we can use native CSS nesting in the default editor.

So instead of:

%root% a:link, %root% a:visited {
	color: var(--white);
  text-transform: uppercase;
  font-weight: 700;
   transition: var(--transition);
}

%root% a:hover, %root% a:active {
  color: var(--primary);
}

We can write:

%root% a {
  
  &:link, &:visited {
    color: var(--white);
  	text-transform: uppercase;
  	font-weight: 700;
    transition: var(--transition);
  }
  
  &:hover, &:active {
    color: var(--primary);
  }
  
}

Not sure if there are any particular implications here, any more experienced users should feel free to chip in.

3

you can start coding nested CSS features right now nothing stoping us except browsers.

this feature is relatively new that is why it is not strong cross browser yet :wink:

here read

I say it needs couple year and then we can start coding nested.
I am not a big fan of it but anyway…

image
image994×288 26.8 KB

4

I use this and it’s great. A few times though lately I’ve noticed its buggy, adding extra classes doesn’t work and nested ones (%root%.class-here) sometimes don’t load.