Question

以下规则仅适用于＃navmenu.someclass，因此仅#navmenu不应在此处受到影响。

我有2个特定的navmenus，分别具有“事件”和“事件类别”类。共同的部分是“ ul”和“ li”，然后“ li a”不同。有没有一种方法可以合并下面的两个sass代码块，因此我不必重复“ ul”和“ li”的规则。同样，＃navmenu不应受到影响，因为规则不适用于主要的navmenu。

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.android.support:appcompat-v7:27.1.1'
    implementation 'com.android.support.constraint:constraint-layout:1.1.2'
    implementation 'com.google.firebase:firebase-auth:16.0.3'
    implementation 'com.android.support:support-v4:27.1.1'
    implementation 'de.hdodenhof:circleimageview:2.2.0'
    implementation 'com.google.firebase:firebase-database:16.0.1'
    implementation 'com.google.firebase:firebase-core:16.0.3'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.2'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
    implementation 'com.android.support:design:27.1.1'
}

Answer 1

您始终可以将通用代码移至placeholder选择器并使用@extend指令。

%common {
  ul {
    list-style-type: none;
    list-style-image: none;
    li {
      display: inline;
    }
  }
}

#navmenu.events-categories, #navmenu.events {
  @extend %common;
}

#navmenu.events {
  ul {
    li a {
      background: $p-dark;
      margin: 4px;
      padding: 5px 20px 5px 20px;
      color: white;
    }
  }
}

#navmenu.events-categories {
  ul {
    li a {
      margin: 1px;
      padding: 2px 5px 2px 5px;
    }
  }
}

这将导致以下CSS：

#navmenu.events-categories ul, #navmenu.events ul {
  list-style-type: none;
  list-style-image: none;
}
#navmenu.events-categories ul li, #navmenu.events ul li {
  display: inline;
}

#navmenu.events ul li a {
  background: red;
  margin: 4px;
  padding: 5px 20px 5px 20px;
  color: white;
}

#navmenu.events-categories ul li a {
  margin: 1px;
  padding: 2px 5px 2px 5px;
}

SASS-使代码更简洁

1 个答案: