如何避免 SCSS/SASS 中的重复条目？

Question

我最近开始在工作中将 SASS 与 Eclipse 结合使用，一切正常： 通过 Ant 构建应用程序会执行一个 .bat，它运行一个 Ruby 命令行，它将任何相关的 .scss 文件编译成 .css 文件。 然而，我们注意到的一件事是可能存在重复。诚然，一般的 .css 否决规则适用（最后一个在前），但相同语句的 x 数量是非常多余的。看看下面这个编译.css代码的例子（不是很完美，我只是测试一下）

/* line 2, ../../../sass/common/style.scss */
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
/* line 8, ../../../sass/common/style.scss */
nav li {
  display: inline-block;
}
/* line 9, ../../../sass/common/style.scss */
nav li {
  display: inline-block;
}
/* line 11, ../../../sass/common/style.scss */
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

/* line 1, ../../../sass/webshop/_button-style.scss */
div:hover {
  padding: 12px 12px;
}

/* line 5, ../../../sass/webshop/_button-style.scss */
img {
  padding: 12px 24px;
}

/* line 2, ../../../sass/webshop/_webshop-style.scss */
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
/* line 8, ../../../sass/webshop/_webshop-style.scss */
nav li {
  display: inline-block;
}
/* line 9, ../../../sass/webshop/_webshop-style.scss */
nav li {
  display: inline-block;
}
/* line 11, ../../../sass/webshop/_webshop-style.scss */
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

/* line 18, ../../../sass/webshop/_webshop-style.scss */
div:hover {
  padding: 12px 12px;
}

在此测试中，style.scss 包含网上商店的主要样式，_button-style.scss 包含所有按钮，_webshop-style 包含 style.scss 的任何 overrules。如您所见，style.scss 和 _webshop-style 存在重复项。 scss 出现在这个文件中，这是我们宁愿避免的。这可以避免吗？如果是：如何？如果否：是否有解决方法/手动方法来避免这种情况？

注意：_button-style.css 对这个问题/问题并不重要。它只是在这里向您完整展示我在做什么。

为了进一步参考，这里有一些重要的文件：

配置：

require 'compass/import-once/activate'
require "sass-globbing"
# Require any additional compass plugins here.

# Set this to the root of your project when deployed:
#http_path = "/"
css_dir = "../webapp/static/css"
sass_dir = "common"
add_import_path = "../webshop/"
images_dir = "images"
javascripts_dir = "javascripts"

style.scss：

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }
  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

@import "../webshop/_*";

_webshop-style.scss：

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }
  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

div:hover {
  padding: 12px 12px;
}

Answer 1

在任何情况下，Sass 都不会尝试删除任何样式（仅删除空选择器和空格/cmets，具体取决于所选的输出样式）。 Sass 无法知道您是否使用不同的选择器覆盖先前的声明（例如，.foo .bar 和 p.bar 可能匹配相同的元素），因此它会完全按照您指定的方式写出。

如果您想继续在 Sass 中编写/使用重复声明，则需要使用 3rd 方工具（例如 linter）来删除它们。