我最近开始使用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 回答
在任何情况下,Sass都不会尝试删除任何样式(只删除空选择器和空格/注释,具体取决于所选的输出样式) . Sass无法知道您是否使用不同的选择器覆盖先前的声明(例如
.foo .bar
和p.bar
可能匹配相同的元素),因此它会按照您指定的方式写出内容 .如果您想继续在Sass中编写/使用重复声明,则需要使用第三方工具(例如linter)来删除它们 .