如何用scss的mixin产生不同主题样式

Question

想达成的效果如下

body {
    @include themed(){
      color: t(#fff, #000)
      border-color: t(#000, #fff)
    };
}

编译出

.light body{
    color: #fff;   
    border-color: #000;
}

.dark body{
    color: #000;   
    border-color: #fff;
}

有大神知道这具体该怎么写吗? 我研究了好久

Answer 1

@mixin theme($color, $borderColor) {
    color: $color;
    border-color: $borderColor;
}

body {
    &.light {
        @include theme(#000,#fff)
    }
    &.dark {
        @include theme(#fff, #000)
    }
}

mixin中把变更的属性定义好，值通过变量传入，然后include调用