简化SCSS中的匹配元素

Question

我拥有的HTML DOM结构有点重复。有没有什么好的做法来重构我的sass规则？

HTML：

<div name="OpportunityDetailView" class="actor-wrapper"><div name="OpportunityDetailView" class="detail-view expansion-bottom-normal">...</div></div>

<div name="ApplicationDetailView" class="actor-wrapper"><div name="ApplicationDetailView" class="detail-view expansion-bottom-normal">...</div></div>

<div name="ProfileDetailView" class="actor-wrapper"><div name="ProfileDetailView" class="detail-view expansion-bottom-normal">...</div></div>

SCSS案例1：

div[name="OpportunityDetailView"] > div[name="OpportunityDetailView"],
div[name="ApplicationDetailView"] > div[name="ApplicationDetailView"],
div[name="ProfileDetailView"] > div[name="ProfileDetailView"],
{
 css rules...
}

SCSS案例2：

.section {
  div[name="Business_Image_Url__c"],
  div[name="Name"],
  div[name="Account_Name__c"],
  div[name="Business_Type__c"],
  div[name="Region_Province__c"] {
    .label{
      display: none !important;
    }
  }

Answer 1

如果我没有遗漏某些内容，您似乎可以使用分配给元素的类来实现您的目标：

案例1：

.actor-wrapper {
  .detail-view {
    //css code goes here
  }
}

请为案例2提供一些标记。

如果所有div[name]元素共享同一个类，那么您可以按该类对它们进行分组，如上例所示。