SASS——让代码更简洁

Question

以下规则仅适用于#navmenu.someclass，因此此处不应影响#navmenu。

我有 2 个具有“事件”和“事件类别”类的特定导航菜单。共同的部分是'ul'和'li'然后'li a'不同。有没有一种方法可以合并下面的两个 sass 代码块，这样我就不必为 'ul' 和 'li' 重复规则。同样，#navmenu 不应受到影响，因为规则不适用于主导航菜单。

#navmenu.events {
    ul {
        list-style-type: none;
        list-style-image: none;
        li {
            display: inline;
        }
        li a {
            background: $p-dark;
            margin: 4px;
            padding: 5px 20px 5px 20px;
            color: white;
        }
    }
}

#navmenu.events-categories {
    ul {
        list-style-type: none;
        list-style-image: none;
        li {
            display: inline;
        }
        li a {
            margin: 1px;
            padding: 2px 5px 2px 5px;
        }
    }
}

Answer 1

您始终可以将公共代码移动到 placeholder 选择器并使用 @extend 指令。

%common {
  ul {
    list-style-type: none;
    list-style-image: none;
    li {
      display: inline;
    }
  }
}

#navmenu.events-categories, #navmenu.events {
  @extend %common;
}

#navmenu.events {
  ul {
    li a {
      background: $p-dark;
      margin: 4px;
      padding: 5px 20px 5px 20px;
      color: white;
    }
  }
}

#navmenu.events-categories {
  ul {
    li a {
      margin: 1px;
      padding: 2px 5px 2px 5px;
    }
  }
}

这将产生以下 CSS：

#navmenu.events-categories ul, #navmenu.events ul {
  list-style-type: none;
  list-style-image: none;
}
#navmenu.events-categories ul li, #navmenu.events ul li {
  display: inline;
}

#navmenu.events ul li a {
  background: red;
  margin: 4px;
  padding: 5px 20px 5px 20px;
  color: white;
}

#navmenu.events-categories ul li a {
  margin: 1px;
  padding: 2px 5px 2px 5px;
}