SASS - Mixins

    // MIXINS 
    Similar to functions, something that can be reused for different tags. They define styles

    @mixin flexCenter {
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .main {
        @include flexCenter;}



    //WITH ARGUMENTS, 
    @mixin flexCenter($direction) {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: $direction;
      }

    .main {
        @include flexCenter(column);}

    // MIXINS 2
    @mixin theme($light-theme: true) {
        @if $light-theme {
          background: lighten($primary-color, 100%);
          color: darken($text-color, 100%);
        }
      }

    .light {
    @include theme($light-theme: false);
    }

    // MIXINS 3
    $mobile: 800px;
    
    @mixin mobile {
        @media (max-width: $mobile) {
          @content;
        }
      }

    .main {
        @include mobile {
        flex-direction: column;
      }}