css - 使用 sass/css 交换颜色和背景颜色

Question

对于响应式布局，我尝试在定义的场合使用背景颜色切换颜色，反之亦然。

使用 sass 时交换颜色值和背景颜色值的最简洁方法是什么？纯 CSS 在这种情况下不起作用，是吗？

有点像

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

Answer 1

你可以创建一个mixin:

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

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

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

除此之外，我不知道有什么内置的东西可以做这样的事情。