Is it possible to use @at-root directive from SASS in styled-components (SC)?
SC supports some syntax from SASS https://styled-components.com/docs/faqs#can-i-nest-rules I saw some info that SC includes some SASS light weigh parser engine. So, is it possible to write something like code below in SC?
.btn {
background: #ededed;
border: 1px solid #555;
color: #555;
padding: 1em 2em;
font: {
family: 'Open Sans Condensed', sans-serif;
size: 1rem;
}
@at-root a#{&} { /* THIS DIRECTIVE */
text-decoration: none;
}
}
//compiles to
.btn {
background: #ededed;
border: 1px solid #555;
color: #555;
padding: 1em 2em;
font-family: "Open Sans Condensed", sans-serif;
font-size: 1rem;
}
a.btn { /* INTO THIS CSS CODE */
text-decoration: none;
}
More info about @at-root http://sassbreak.com/getting-back-to-our-roots/