css冗余是因为你没用继承和占位符

 //variables
$js: '../js/';
$img: '../img/';
$icons-sprite-path: '../img/';
$base-width: 1000px;
//a random id
$version: unique-id();
//top
$top-background: #f5f5f5;
$top-bottom-background: #595959;
$top-bottom-highlight-background: #cc0000;
$top-border-color: #383838;
$highlight-background: #d33737;
$table-th-background: #e5e5e5;
//button
$button-default-background: #9c9c9c;
$button-primary-background: #0776b7;
$button-lesser-background: #c4deed;
$button-danger-background: #e85151;
$button-blue-background: #a8dbf9;
$button-gray-background: #eee;
@mixin inline-block() {
display: inline-block;
*display: inline;
*zoom: 1;
}

//wrapper
@mixin wrapper($width: $base-width) {
    width: $width;
    min-width: $width;
    margin: 0 auto;
}

类似这样，到时候修改起来就很方便了。

使用 SASS 只是为了提高编写 CSS 的效率，能够重复使用很多相同的样式，而且定义好变量之后，以后如果要个性的话也能够很方便，只需要个性一个变量的值，其他用到的地方就会都改变啦～