时间戳

首页 > 解决方案 > 样式组件中的@at-root SASS 指令

css - 样式组件中的@at-root SASS 指令

问题描述

是否可以@at-root在样式组件（SC）中使用来自 SASS 的指令？

SC 支持 SASS 的一些语法https://styled-components.com/docs/faqs#can-i-nest-rules我看到一些信息表明 SC 包含一些 SASS 轻量级解析器引擎。那么，是否可以在 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;
}

有关http://sassbreak.com/getting-back-to-our-roots/的更多信息@at-root

标签： csssassstyled-components

解决方案

推荐阅读