What are some examples of SCSS mixins?

What are some examples of SCSS mixins?

SCSS mixins are reusable blocks of styles. Here are a few examples:

1. Flexbox Mixin:

   @mixin flexbox($direction: row, $justify: center, $align: center) {
       display: flex;
       flex-direction: $direction;
       justify-content: $justify;
       align-items: $align;
   }
   

2. Border Radius Mixin:

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

3. Media Query Mixin:

   @mixin respond-to($breakpoint) {
       @if $breakpoint == mobile {
           @media (max-width: 600px) {
               @content;
           }
       }
   }
   

Would you like to see how to use these mixins in a project?

Yes, can you show me how to use the Flexbox mixin?

Sure! Here's how you can use the Flexbox mixin in your SCSS:

.container {
    @include flexbox(row, space-between, stretch);
    height: 100vh;
}

.item {
    @include flexbox(column, center, center);
    width: 100px;
    height: 100px;
}

This will create a flex container with items spaced between and stretched vertically. Do you need more examples?

That’s great! Can you explain how the Media Query mixin works?

Absolutely! The Media Query mixin allows you to write responsive styles easily. Here's how you can use it:

.container {
    @include respond-to(mobile) {
        flex-direction: column;
    }
}

In this example, when the screen width is 600px or less, the flex direction of the container will change to column. Would you like to know more about other mixins?