語義網格mixin創建大規模選擇器

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

我剛開始用最近與青菜的基礎，我沒有看到這一點。你的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; 
}