Using @include vs @extend in Sass?

Question

In Sass, I cannot tell the difference between using @include with mixin and using @extend with a placeholder class. Aren't they the same thing?

Answer 1

Extensions do not allow customization, but they create very efficient CSS.

 %button background-color: lightgrey &:hover, &:active background-color: white a @extend %button button @extend %button 

Result:

 a, button { background-color: lightgrey; } a:hover, button:hover, a:active, button:active { background-color: white; } 

With mixins, you get duplicate CSS, but you can use arguments to change the result for each use.

 =button($main-color: lightgrey, $active-color: white) background-color: $main-color border: 1px solid black border-radius: 0.2em &:hover, &:active background-color: $active-color a +button button +button(pink, red) 

Results in:

 a { background-color: lightgrey; border: 1px solid black; border-radius: 0.2em; } a:hover, a:active { background-color: white; } button { background-color: pink; border: 1px solid black; border-radius: 0.2em; } button:hover, button:active { background-color: red; } 

Please follow this consistent set of code examples to find out how to make your code cleaner and easier to maintain using efficient extensions and mixins: http://thecodingdesigner.com/journal/balancing-ideal-sass-and-ideal-css

Please note that SASS, unfortunately, does not allow the use of extensions inside media queries (and the corresponding example from the link above is incorrect). In a situation where you need to expand based on media queries, use mixin:

 =active display: block background-color: pink %active +active #main-menu @extend %active // Active by default #secondary-menu @media (min-width: 20em) +active // Active only on wide screens 

Result:

 #main-menu { display: block; background-color: pink; } @media (min-width: 20em) { #secondary-menu { display: block; background-color: pink; } } 

Duplication is inevitable in this case, but you should not care about it, because gzip compression in the web server will take care of this.

PS Note that you can declare placeholder classes in media queries.

Update 2014-12-28 . It expands the possibilities of creating more compact CSS than mixins, but this advantage decreases when CSS is gzipped. If your server serves CSS with gzipped (it really should!), Then the extensions give you almost no benefit. Therefore, you can always use mixers! More on this here: http://www.sitepoint.com/sass-extend-nobody-told-you/

Answer 2

A good approach is to use both methods - create a mixin that will allow you to make many settings and then make extensions for the general configurations of this mixin. For example (SCSS syntax):

 @mixin my-button($size: 15, $color: red) { @include inline-block; @include border-radius(5px); font-size: $size + px; background-color: $color; } %button { @include my-button; } %alt-button { @include my-button(15, green); } %big-button { @include my-button(25); } 

This allows you to call the my-button mix button over and over again. It also means that you don’t need to remember the settings for regular buttons, but you still have the opportunity to make a super unique one-time button that you must select.

I take this example from a blog post I wrote recently. Hope this helps.

Answer 3

In my opinion, this is pure evil and should be avoided. That's why:

considering scss:

 %mystyle {color: blue;} .mystyle-class {@extend %mystyle} //basically anything not understood by target browser (such as :last-child in IE8): ::-webkit-input-placeholder {@extend %mystyle} 

The following css will be created:

 .mystyle-class, ::-webkit-input-placeholder { //invalid in non-webkit browsers color: blue; } 

When the browser does not understand the selector, it cancels the entire line of selectors. This means that your precious mistyle class is no longer blue (for many browsers). What does this really mean? If at any time you use the extension where the browser may not understand the selector, any other use of the extension will be invalidated. This behavior also allows malicious nesting:

 %mystyle {color: blue;} @mixin mystyle-mixin {@extend %mystyle; height: 0;} ::-webkit-input-placeholder {@include mystyle-mixin} //you thought nesting in a mixin would make it safe? .mystyle-class {@extend %mystyle;} 

Result:

 ::-webkit-input-placeholder, .mystyle-class { //invalid in non-webkit browsers color: blue; } ::-webkit-input-placeholder { height: 0; } 

Tl; dr: @extend works fine as long as you never use it with special browser selectors. If you do, it will suddenly destroy styles wherever you use it. Try relying on mixins instead!

Answer 4

Use mixins if it accepts a parameter in which the compiled output will change depending on what you pass to it.

 @include opacity(0.1); 

Use the extension (using a placeholder) for any static repeatable style blocks.

 color: blue; font-weight: bold; font-size: 2em;