How to avoid duplicate entries in SCSS/SASS? - css

Question

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

Answer 1

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.
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.