如何SCSS

Question

添加一个“修改”类的元素鉴于这种SCSS

.root { 

    color: red; 

    &-child { 
    color: blue; 

    small & { 
     font-size: 80%; 
    } 

    } 

} 

这是CSS，我得到：

.root { 
    color: red; 
} 
.root-child { 
    color: blue; 
} 
small .root-child { 
    font-size: 80%; 
} 

我想在small风格.root-child不同所以我需要的规则是：

small.root-child { 
    font-size: 80%; 
} 

（注意small之后没有空格）

我该怎么做？

Answer 1

您可以使用@at-root这样的：

SCSS

.root { 

    color: red; 

    &-child { 
    color: blue; 

     @at-root { 
     small#{&} { 
      font-size: 80%; 
     } 
     } 

    } 

} 

编译：

.root { 
    color: red; 
} 
.root-child { 
    color: blue; 
} 
small.root-child { 
    font-size: 80%; 
} 

Answer 2

您需要使用@at-root，这将删除您的选择器中的空格，以及它将是一个有效的语法，所以没有问题，当你尝试编译。

.root { 
    color: red; 

    &-child { 
    color: blue; 

    @at-root small#{&} { 
     font-size: 80%; 
    } 
    } 
}