首页 文章

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

提问于
浏览
0

我最近开始使用SASS与Eclipse结合工作,并且一切正在运行:通过Ant构建应用程序执行.bat运行Ruby命令行,该命令行将任何相关的.scss文件编译为.css文件 . 然而,我们注意到的一件事是可能存在重复 . 当然,一般的.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的重复项,这是我们宁愿避免的事情 . 这可以避免吗?如果是:怎么样?如果否:是否有解决方法/手动方法来避免这种情况?

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.

有关进一步参考,请参阅以下重要文件:

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

1 回答

  • 2

    在任何情况下,Sass都不会尝试删除任何样式(只删除空选择器和空格/注释,具体取决于所选的输出样式) . Sass无法知道您是否使用不同的选择器覆盖先前的声明(例如 .foo .barp.bar 可能匹配相同的元素),因此它会按照您指定的方式写出内容 .

    如果您想继续在Sass中编写/使用重复声明,则需要使用第三方工具(例如linter)来删除它们 .

相关问题