Question

我有以下SCSS在身体内容中应用填充层，其中一些是响应式的：

body.single-post,
body.page-template-default {
  div.projects-menu-wrapper
  {
    padding-bottom: ($footer-logo-height + ($default-padding/2));
  }
  #primary {
    main {
      &:before {
        display: none;
      }
      &:after {
        display: none;
      }
      .main-wrapper {
        min-height: 400px;
        &:after {
          display: none;
        }
        .entry-content{
          padding: $default-padding ($default-padding*2);

          .content-body{
            padding: 0px ($default-padding*5);
            @media screen and (max-width: $table-width) {
              padding: 0px ($default-padding*3);
            }
            @media screen and (max-width: $ipad-2-width) {
              padding: 0px ;
            }
          }

        }
      }
    } [...]

现在我希望将相同的逻辑应用于＃footer-contact-us .content-area，以便CSS看起来像这样：

body.single-post #primary main .main-wrapper .entry-content .content-body,
body.page-template-default #primary main .main-wrapper .entry-content .content-body,
body.single-post #footer-contact-us .content-area {
    padding: 0px 150px;
}

我的第一个想法是添加“#primary，＃footer-contact-us”和“.entry-content，.content-area”和“.content-body，home-block-wrapper”---但是让我感到震惊的是，在每个分裂点都会产生不必要的css，比如

body.single-post＃页脚 -contact-us main .main-wrapper .entry-content .content-body - 这没什么意义

我还是SCSS的新手，所以我不确定是否有任何可用的东西可以实现。我想到了extend，但这就像在同一行上移动选择器并用逗号分隔它们一样，对吗？

SASS扩展了嵌套结构

0 个答案: