使用SASS制作GUI外观

时间:2013-10-19 11:49:31

标签: css sass mixins skin

我正在构建一个HTML5 App,需要用户使用不同的皮肤。我很想听听SASS最好的解决方法。我是SASS的新手,这个解决方案有效但必须有更好的方法。该方法适用于我确定不需要的额外课程。

我的想法是编译并发送两个css文件,然后让用户选择一个选择标记。

有什么建议吗?

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

“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;
    }
  }
}

0 个答案:

没有答案