Question

我正在尝试将流行的SevenSpark Ubermenu转换为SCSS。我在很多项目中使用它，纯CSS版本是......笨重的。在SCSS中做这么大的事情虽然让我非常清楚我的缺点。

将所有这些压缩成单个声明的逻辑是什么？（为了简洁起见，我正在跳过它前面的定义）：

#megaMenu {
  ul {
    li.menu-item.ss-nav-menu-reg {
      li.menu-item.megaReg-with-sub {
        > a, span.um-anchoremulator {
          padding-right: 20px;
        }
      }
    }
    li.menu-item.mega-with-sub {
      > a, span.um-anchoremulator {
        padding-right: 20px;
      }
    }
    li.menu-item.ss-nav-menu-mega {
      > a, span.um-anchoremulator {
        padding-right: 20px;
      }
    }
  }
}

我一直认为必须有一种方法来兼顾＆符号和选择器，以便只需要指定一次填充。

原作如下：

#megaMenu ul li.menu-item.ss-nav-menu-reg li.menu-item.megaReg-with-sub > a, #megaMenu ul li.menu-item.ss-nav-menu-reg li.menu-item.megaReg-with-sub > span.um-anchoremulator, #megaMenu ul li.menu-item.mega-with-sub > a, #megaMenu ul li.menu-item.mega-with-sub > span.um-anchoremulator, #megaMenu ul li.menu-item.ss-nav-menu-mega > a, #megaMenu ul li.menu-item.ss-nav-menu-mega > span.um-anchoremulator { padding-right:20px; }

Answer 1

如何在其中一个嵌套选择器中使用逗号：

#megaMenu {
  ul {
    li.menu-item.ss-nav-menu-reg li.menu-item.megaReg-with-sub,
    li.menu-item.mega-with-sub,
    li.menu-item.ss-nav-menu-mega {
      > a, span.um-anchoremulator {
        padding-right: 20px;
      }
    }
  }
}

有没有办法更优雅地说明这一点SCSS？

1 个答案: