如何避免在SCSS / SASS中重复条目？ [英] How to avoid duplicate entries in SCSS/SASS?

问题描述

我最近开始使用SASS与Eclipse在工作，一切正在工作peachy：
通过Ant构建应用程序执行一个 .bat ，它运行一个 Ruby命令行，其将任何相关的 .scss 文件编译成 .css 文件。
我们注意到的一件事是，可以有重复。批准后，一般的 .css 覆盖规则适用（最后一个），但具有相同语句的x-amount是相当冗余的。看看下面的编译示例 .css 代码（它不完美，我只是测试一些东西）

I have recently started working with SASS in combination with Eclipse at work, and everything's working peachy: Building an application through Ant executes a .bat which runs a Ruby command line which compiles any relevant .scss files into .css files. One thing we've noticed however is that there can be duplicates. Granted, the general .css overrule rules apply (last one first), but having x-amount of the same statement is quite redundant. Take a a look at the following example of compiles .css code (it's not perfect, I was merely testing something)

/* 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.scss /strong>。如您所见，在此文件中存在来自 style.scss 和 _webshop-style.scss 的重复，这是我们希望避免的。这可以避免吗？如果是：如何？如果没有：是否有解决方法/手动方法来避免这个问题？

In this test style.scss contains the main styling for the webshop, _button-style.scss for any buttons present and _webshop-style contains any overrules for style.scss.As you can see, there are duplicates from style.scss and _webshop-style.scss present in this file, which is something we'd rather avoid. Can this be avoided? If yes: How?; If no: Is there a workaround/manual method to avoid this?

注意：_button-style.css对这个问题/问题。

NOTE: _button-style.css is of no importance to this question/problem. It's just here to show you in a complete way what I'm doing.

如需进一步参考，请参阅以下重要文件：

For further reference, here's some important files:

config：

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;
}

推荐答案

Sass不会尝试移除任何样式，在任何情况下（只有空选择器和空格/注释被删除，取决于所选的输出样式）。 Sass无法知道你是否使用不同的选择器重写之前的声明（例如 .foo .bar 和 p.bar 可能匹配相同的元素），因此它按照您指定的方式写入内容。

Sass will not attempt to remove any styling, ever, under any circumstance (only empty selectors and whitespace/comments are removed, depending on the chosen output style). Sass has no way of knowing if you are overriding previous declarations with a different selector (eg. .foo .bar and p.bar might match the same element), so it writes things out exactly as you specified.

如果您想继续在Sass中编写/将需要使用第三方工具（例如linter）来删除它们。

If you want to continue writing/using duplicate declarations in your Sass, you will need to use a 3rd party tool (eg. linter) to remove them.

这篇关于如何避免在SCSS / SASS中重复条目？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！