Question

我第一次使用SCSS（我已经使用LESS过去了）并使用了Foundation框架。我正在使用语义网格mixins，但是当我在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，我没有看到。你的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;
}

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

1 个答案: