语义网格混合创建了大量选择器

Question

我第一次使用SCSS（我过去使用过LESS），并使用Foundation框架。我使用语义网格混合，但当我在Chrome检查器中查看它们时，我发现它会创建大量选择器。这正常吗？

下面是一个例子。

.top_bar .information_for_agencies, .top_bar .registration, header[role="banner"] .branding, header[role="banner"] .branding .logo, header[role="banner"] .branding .tagline, header[role="banner"] div[role="navigation"], footer[role="contentinfo"] section, body.full_width div[role="main"] article[role="article"], body.full_width div[role="main"] article[role="article"] header img.top_masthead, body.full_width div[role="main"] article[role="article"] div.content img.top_left, body.full_width div[role="main"] article[role="article"] div.content img.top_right, body.full_width div[role="main"] article[role="article"] div.content figure.left_align, body.full_width div[role="main"] article[role="article"] div.content figure.right_align, body.full_width div[role="main"] article[role="article"] div.content figure.full_width, body.full_width div[role="main"] article[role="article"] footer img.bottom_masthead, body.two_columns div[role="main"] article[role="article"], body.two_columns div[role="main"] article[role="article"] header img.top_masthead, body.two_columns div[role="main"] article[role="article"] div.content img.top_left, body.two_columns div[role="main"] article[role="article"] div.content img.top_right, body.two_columns div[role="main"] article[role="article"] div.content figure.left_align, body.two_columns div[role="main"] article[role="article"] div.content figure.right_align, body.two_columns div[role="main"] article[role="article"] div.content figure.full_width, body.two_columns div[role="main"] article[role="article"] footer img.bottom_masthead, body.two_columns div[role="main"] aside[role="complementary"], body.three_columns div[role="main"] section.adverts, body.three_columns div[role="main"] article[role="article"], body.three_columns div[role="main"] article[role="article"] header img.top_masthead, body.three_columns div[role="main"] article[role="article"] div.content img.top_left, body.three_columns div[role="main"] article[role="article"] div.content img.top_right, body.three_columns div[role="main"] article[role="article"] div.content figure.left_align, body.three_columns div[role="main"] article[role="article"] div.content figure.right_align, body.three_columns div[role="main"] article[role="article"] div.content figure.full_width, body.three_columns div[role="main"] article[role="article"] footer img.bottom_masthead, body.three_columns div[role="main"] aside[role="complementary"], body.homepage div[role="main"] header h1, body.homepage div[role="main"] .hero_container .video_holder, body.homepage div[role="main"] .hero_container form, body.homepage div[role="main"] .hero_container form .personal_details label, body.homepage div[role="main"] .hero_container form .form_actions label, body.homepage div[role="main"] .hero_container form .form_actions .input_action, body.homepage div[role="main"] .reasons ul li, body.homepage div[role="main"] .testimonials h4, body.homepage div[role="main"] .testimonials ul blockquote, body.homepage div[role="main"] .register form, body.homepage div[role="main"] .register form .personal_details label, body.homepage div[role="main"] .register form .extra_info label { position: relative; min-height: 1px; padding: 0 15px; }

Answer 1

我最近刚开始使用带有sass的foundation，但我没有看到这一点。你的app.scss、_settings.scss和config.rb文件是什么样子的？你是否广泛使用@extend？当您使用@extend时，它会组合具有类似属性的选择器。所以，如果你有：

.TestMe {
  color: blue;
  background: white;
  margin: 10px;
  width: 200px; }
.hello {
  @extend .TestMe
  width: 100px; }

将合并到此css：

.TestMe, .hello {
  color: blue;
  background: white;
  margin: 10px;
  width: 200px;
}
.hello {
  width: 100px;
}