我怎样才能简化这个SASS声明？

Question

我该如何简化这个SASS，以便我只写一次.question-sector-answer？如果父div具有.question-row和.question-review的类别，我需要对.question-sector-answer应用不同的样式。这目前似乎很笨拙，我敢肯定可以简化，并使其更加优雅：

.question-row { 
    border-bottom: 1px solid #ddd; 
    &.question-review { 
    .question-sector-answer { 
     padding-top: 30px; 
    } 
    } 
    .question-sector-answer { 
    padding: 15px; 
    } 
} 

Answer 1

我看不出如何简化它。您需要为不同父母下的.question-sector-answer使用2种不同的款式。由于在css中访问父选择器是不可能的，所以你别无选择，只能做你所做的事情（好吧，在SASS中你可以 - 见下文）。虽然总是把我的个人偏好之上，更具体的人更通用选择在底部，像这样：

.question-row { 
    border-bottom: 1px solid #ddd; 
    .question-sector-answer { 
    padding: 15px; 
    } 
    &.question-review { 
    .question-sector-answer { 
     padding-top: 30px; 
    } 
    } 
} 

因此，在上海社会科学院，你可以在特定的方式使用它与&访问家长选择，但我不认为你可以重新使用它你的风格，最好我能想出是这样的，但它看起来比你原来做的方式丑陋，但欢迎您与它玩：

.question-row { 
    border-bottom: 1px solid #ddd; 
} 
.question-sector-answer 
{ 
    .question-row & { 
    padding-top: 15px; 
    } 
    .question-row.question-review & 
    { 
    padding: 30px; 
    } 
} 

你可以阅读更多关于访问父代选择器的信息&here

Answer 2

.question-row { 
    border-bottom: 1px solid #ddd; 
} 
    .question-sector-answer { 
    padding: 15px; 
    .question-review & { 
     padding-top: 30px; 
    } 
    } 

解嵌套在这里做两件事：（1）创建terser，更灵活的CSS和（2）允许父&选择器。为了弥补OOP的减少，我们稍微缩进以暗示征服。但是在SASS中，如果不是完全必要的，你希望避免嵌套的诱惑，因为OOP的嵌套往往会产生比解决问题更多的问题。