0

I have just started using SCSS for the first time. I'm noticing that the resulting CSS is somewhat less optimised than it would be if I had written it by hand. For example, I am using mixins for style duplication, like this:

@mixin button {
    border-radius: 4px 20px 20px 4px;
    -moz-border-radius: 4px 20px 20px 4px;
}
.enquire {
    .live-chat {
        @include button;
        background: #21a649;
    }
    .enquire-now {
        @include button;
        background: #33b1ff;
    }
}

Then all I need on the button is the single class, "enquire-now", and all the styles are included in that one class in the CSS.

If I had written this by hand, however, I would have used 2 classes, like this:

.button {
    border-radius: 4px 20px 20px 4px;
    -moz-border-radius: 4px 20px 20px 4px;
}
.enquire .live-chat {
    background: #21a649;
}
.enquire .enquire-now {
    background: #33b1ff;
}

And then on the element, used "button enquire-now"

So by using the mixin, I am minimising the classes used in my HTML and making it pleasant to write, but am making my actual CSS file much longer! This seems somewhat counterproductive... Have I missed something?

What's the point of mixins, if doing the old fashioned way actually produces a smaller CSS file?

4

3 回答 3

4

Use the @extend directive to have easier to maintain code, and prevent duplication of styles:

%button {
    border-radius: 4px 20px 20px 4px;
    -moz-border-radius: 4px 20px 20px 4px;
}
.enquire {
    .live-chat {
        @extend %button;
        background: #21a649;
    }
    .enquire-now {
        @extend %button;
        background: #33b1ff;
    }
}

Which compiles to this:

.enquire .live-chat, .enquire .enquire-now {
border-radius: 4px 20px 20px 4px;
-moz-border-radius: 4px 20px 20px 4px;
}
.enquire .live-chat {
background: #21a649;
}
.enquire .enquire-now {
background: #33b1ff;
}
于 2012-10-18T02:09:53.963 回答
1

Its a trade off. You get eaiser to author, more maintainable CSS in trade for it being more verbose. And as i found out recently there is this pesky thing in IE were you cant have more than a certain number of selectors in a single CSS file and then it also has a limit on the number of CSS files. So for large site keeping our selector count down might be just as if not more important than the size of the file(s). Especially since you can mitigate the filesize issue by minifiying and then serving compressed (gzipped) versions.

于 2012-10-18T00:52:03.417 回答
0

Indeed use @extend instead: Sass Extend Reference

于 2012-10-18T12:58:15.593 回答