SCSS - 如何代表CSS</p> <pre><code>.wrapper .widecolumn { width: 983px; } </code></pre> <p>可以在SCSS被repersented

Question

嵌套類作爲

.wrapper { 
    .widecolumn { 
     width: 983px; 
    } 
} 

，但怎麼能代表這個？：

.wrapper.widecolumn { 
    width: 983px; 
} 

Answer 1

wrapper.widecolumn { 
    width: 983px; 
} 

很好（假設這裏的包裝是一個示例標籤）。如果你只是關心築巢，用&像這樣：

wrapper { 
    &.widecolumn { 
     width: 983px; 
    } 
} 

的&表示父對象，所以你也可以做聰明的事情一樣

wrapper { 
    &.widecolumn { 
     width: 983px; 
    } 
    &:hover { 
     color: red; 
    } 
    body.mycoolclass & { 
     font-weight: bold; 
    } 
} 

Answer 2

你也可以做

.wrapper { 
 
    
 
    &__widecolumn { 
 
     width: 983px; 
 
    } 
 
    
 
}

當你能做到這一點，那麼你可以簡單地使用這就像這樣：

<div class="wrapper__widecolumn"> 
 

 
    <!-- This Column will be 983px --> 
 

 
    
 
</div>