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

Question

我最近已经开始在工作中结合使用SASS和Eclipse，一切都很好:通过Ant构建应用程序执行一个.bat，它运行一个.scss命令行，该命令行将所有相关的.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;
}

在这个测试中，_button-style.scss style.scss 包含webshop的主样式，_webshop-style包含任何按钮的样式，_webshop-style包含对style.scss.As的任何超限规则，您可以看到，在这个文件中存在来自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都不会尝试删除任何样式(根据所选输出样式，只删除空选择器和空白/注释)。Sass无法知道您是否正在用不同的选择器覆盖以前的声明(例如。.foo .bar和p.bar可能匹配相同的元素)，因此它按照您指定的方式写出内容。

如果您想在Sass中继续编写/使用重复的声明，则需要使用第三方工具(例如。把它们移除。