Can The SASS Minifier Remove Duplicate Styles

boostrap theming -- How to remove duplicate styles?

It depends on what you @import. Looking at mytheme.scss, the entire Bootstrap SASS is imported, creating full duplicate code in the final CSS.

Instead you can pick specific SASS files to import and look at the option variables which also effects what CSS is generated. For example, setting $enable-grid-classes: false will prevent duplication of the entire grid system in the generated CSS.

gulp-clean-css cleaning / removing duplicated css when using @extend

I played around with this, and I think your setting is incorrect for 'noAdvanced':

Instead of:

.pipe(cleanCSS({compatibility: 'ie9', noAdvanced: true}))

Use:

.pipe(cleanCSS({compatibility: 'ie9', advanced: false}))

According to the docs:

advanced - set to false to disable advanced optimizations - selector &
property merging, reduction, etc.

https://github.com/jakubpawlowicz/clean-css#how-to-use-clean-css-api

This isn't going to leave you with 1 .foo selector with two font-size declarations tho, it's just not going to merge the two, so you'll end up having:

.foo {
    font-size:16px;
    width:95%
}
.foo {
    font-size:1rem;
    width:calc(100% - 10px)
}
.foo2{
    font-size:16px;
    font-size:1rem
}

This answers your issue however kind of defeats the purpose of using something like clean-css. I'm curious as to why you would want to leave both font-size declarations in your CSS when the first one will be overridden anyway.

SASS: Deleted styles from SASS still showing in generated CSS?

You can't delete markups using your scss file but you can override properties of markups. You can only remove markups by editing your html files. That said, any change made to the scss will indeed reflect into the css file, you are right on this.

How can I remove every other item from a Sass list?

The nth() function can only use specific number unlike nth-child in CSS.

One way of working around this is by manually querying the current iteration and appending things that don't match the current number to a new list.

$list: 1, red, banana, gold, potato;
$newList: ;
$i: 0;
@each $item in $list {
    $i: $i + 1;
    @if $i == 2 {
        $i: 0;
    }@else{
        $newList: append($newList, $item);
    }
}

@each $item in $newList {
    /* #{$item} */
}

Live Demo

---

Related Topics