How to Use @mixin

Fundamental 43 views
0
0 Flares 0 Flares ×

Mixins are defined using the @mixin directive, which takes a block of styles that can then be included in another selector using the @include directive.

Step 1 – Define @mixin

@mixin circle {
     width: 50px;
     height: 50px;
     border-radius: 100%;
}

Step 2 – Usage with @include

.box {
     @include circle;
     background: #fc0;
}

Output (magic)

.box {
  width: 50px;
  height: 50px;
  border-radius: 100%;
  background: #fc0;
}

Arguements

The real power of mixins comes when you pass them arguments. Arguments are declared as a parenthesized, comma-separated list of variables. Each of those variables is assigned a value each time the mixin is used.

Step 1 – Define @mixin

@mixin circle($size) {
     width: $size;
     height: $size;
     border-radius: 100%;
}

Step 2 – Usage with @include

.box {
     @include circle(100px);
     background: #fc0;
}

Output (more magic)

.box {
  width: 100px;
  height: 100px;
  border-radius: 100%;
  background: #fc0;
}

For Reference:

Useful Sass Mixin Snippets

Provided by: Web Creator Box
Tagged with:
Posted in Sass

Discuss:

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

No Trackbacks.

Login

Register | Lost your password?
0 Flares Twitter 0 Facebook 0 Google+ 0 0 Flares ×