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

Question

我最近开始在工作中与SASS结合使用SASS，并且所有工作都很有效： 通过Ant构建应用程序执行 .bat ，它运行 Ruby命令行，将任何相关的 .scss 文件编译为 .css < / em>文件。 然而，我们注意到的一件事是可能存在重复。当然，一般的 .css 否决规则适用（最后一个），但是具有相同语句的x-amount是非常多余的。看看以下编译 .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 的任何否决。如您所见， 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中继续编写/使用重复声明，则需要使用第三方工具（例如linter）将其删除。