@at-root SASS directive in styled-components

Viewed 185

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/

0 Answers
Related