如何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%; 
    } 
    } 
}