SASS - Mixed (Mixin)

Copyright Notice: Copyright, without permission prohibited reproduced! https://blog.csdn.net/weixin_43031412/article/details/91412760

---

• SASS - Introduction
• SASS - environment to build
• SASS - use program Sass
• SASS - Syntax
• SASS - variable
• SASS- local file (Partial)
• SASS - Mixed (Mixin)
• SASS - @extend (inherited) Directive
• SASS - Operators
• SASS - Functions
• SASS - Output format

---

mixin can be reused a set of CSS statement. mixin help to reduce duplication of code, just declare once and can be referenced in the file.

As can be seen, a mixin similar variables, except that the stored value of a variable, a mixin css store a set of declarations. mixin can pass parameters.

To create a mixin, you can use @mixin instructions:

@mixin mixin-name() {
    /* css 声明 */
}

Once you create a mixin, you can refer to it, using the @includename of the command followed by a mixin:

...
@include mixin-name();
...

for example

Mixin is a common use of browser vendors prefix.

When the browser vendors to add new non-standard CSS properties, usually marked with the manufacturer prefix indicates that the feature is only valid on a particular browser.

For example, -webkit-border-radiusthe browser Chrome and effective in Safari, while -mozilla-border-radiuseffective in Firefox.

For such properties, usually contain all the corresponding characteristic statement browser for compatibility with these browsers, where you can use minxin to achieve:

@mixin border-radius() {
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    border-radius: 8px;
}

aside { 
    border: 1px solid orange;
    @include border-radius(); 
    }

After the compiler will output the following css content:

aside {
  border: 1px solid orange;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  border-radius: 8px; }

mixin parameters

Parameters can be passed to the mixin, css statement mixin will be more flexible.

Example:

@mixin border-radius($radius) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    -ms-border-radius: $radius;
    border-radius: $radius;
}

aside { 
    border: 1px solid orange;
    @include border-radius(7px); 
    }

After the compiler will output the following css content:

aside {
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  -ms-border-radius: 7px;
  border-radius: 7px; }

sass mixin is a very useful feature.