CODEWITHSUNDEEP
sassscss-mixins
sk01
sk01

Reputation: 282

Is there a way to write style that will always come after mixins are included?

I am facing a problem with the SCSS mixins whereby I have to repeat the same code to get the work done. I have the following SCSS code:

@mixin column($count, $size) { // Can not make any change in this code.
  width: getWidth($count, $size);
  margin-left: 3%;
  margin-right: 3%;
}

@mixin desktop {
  @media screen and (min-width: 1024px) {
    @content;
  }
}

@mixin tablet {
  @media screen and (min-width: 768px) and (max-width: 1023px) {
    @content;
  }
}

@function getWidth($count, $size) {
  @return 50; // For example purpose only.
}

.c {
  @include desktop {
    @include column(10, large);
  }

  @include desktop {
    @include column(11, large);
  }

  margin: 0 auto;
}

which is compiled into:

.c {
  margin: 0 auto;
}

@media screen and (min-width: 1024px) {
  .c {
    width: 50;
    margin-left: 3%;
    margin-right: 3%;
  }
}

@media screen and (min-width: 1024px) {
  .c {
    width: 50;
    margin-left: 3%;
    margin-right: 3%;
  }
}

The problem here is that margin is overwritten by the mixins. Or I have to repeat the same code(duplicate code) like below:

.c {
  @include desktop {
    @include column(10, large);
    margin: 0 auto; // Duplicate
  }

  @include desktop {
    @include column(11, large);
    margin: 0 auto; // Duplicate
  }

  margin: 0 auto;
}

to get:

.c {
    margin: 0 auto;
  }

  @media screen and (min-width: 1024px) {
    .c {
      width: 50;
      margin-left: 3%;
      margin-right: 3%;
      margin: 0 auto;
    }
  }

  @media screen and (min-width: 1024px) {
    .c {
      width: 50;
      margin-left: 3%;
      margin-right: 3%;
      margin: 0 auto;
    }
  }

Is there any better way to remove this duplicate code so that I have to write code only once?

Upvotes: 1

Views: 21

Answers (1)

Loi Nguyen Huynh
Loi Nguyen Huynh

Reputation: 9928

Try this to see if the @media query comes after makes you happy.

.c {
  @include desktop {
    @include column(10, large);
  }
  @include desktop {
    @include column(11, large);
  }
  & {
    margin: 0 auto;
  }
}

Upvotes: 1

Related Questions