css - 使用 SASS 制作 GUI 皮肤

Question

我正在构建一个需要用户应用不同皮肤的HTML5 应用程序。我很想听到用 SASS 解决这个问题的最佳方法。我是 SASS 的新手，这个解决方案有效，但必须有更好的方法。该方法适用并且我确定不需要额外的类。

我的想法是编译并发布两个 css 文件，然后让用户选择一个 select 标签。

有什么建议吗？

这是我现在正在使用的一些示例代码：

“mixin”_skin.scss

$skin: default-skin; // Default skin
//$skin: dark-skin; //  Dark skin

.default-skin { // Default Skin
    @import 'skins/_default-skin';
}

.dark-skin { // Dark Skin
    @import 'skins/dark-skin';
}

// Applying the Skins

html {
  @if $skin == default-skin {
    @extend .default-skin;
  } @else if $skin == dark-skin {
    @extend .dark-skin;
  } @else {
    @extend .default-skin;
  }
}

默认皮肤局部

.nav{
  background: $gray-light;
  button{
    color: $white;
    &:active{
      color: $gray-lighter;
    }
  }
}

而且皮肤偏黑

.nav{
  background: $gray-darker;
  button{
    color: $black;
    &:active{
      color: $gray-dark;
    }
  }
}