0

我是第一次使用 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; }

4

1 回答 1

2

我最近才开始使用 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;
}
于 2013-02-26T18:18:02.457 回答