CODEWITHSUNDEEP
csssass
Herr_Schwabullek
Herr_Schwabullek

Reputation: 790

Swap color and background-color with sass/css

For a responsive layout I am trying to switch the color with the background-color and vice versa on defined occasions.

What's the cleanest way to swap the values of the color and background-color when using sass? Pure CSS doesn't work in this case, does it?

Something like

p {
@media … {
[swap currentTextColor and currentBgColor]
}
}

Upvotes: 1

Views: 339

Answers (1)

Dan Gamble
Dan Gamble

Reputation: 4155

You could create a mixin:

@mixin swapColors($textColor, $bgColor) {
  background-color: $bgColor;
  color: $textColor;

  @media ... {
    background-color: $textColor;
    color: $bgColor;
  } 
}

.tree {
  @include swapMobile(red, black);
}

Besides from that i'm not aware of anything built in that could do such a thing.

Upvotes: 1

Related Questions