css-theme 通过一套源码生成一份包含多套皮肤配置的样式文件

masturbator 发布于2019-08-29 17:02 / 2519人阅读

摘要：详见插件模式在通过等工具调用时，插入中间件。详见配置占位符描述每个变量在文件中对应的占位符主题列表该主题中每个变量对应的值使用该主题时顶层添加的是否将该主题作为默认主题，在未指定时默认展示该主题链接授权

css-theme

通过单一css文件生成多套主题，并合并入一个css文件中

特性

只加载一个css，通过切换rootClass瞬间切换主题

体积压缩，将多套css合并，去除冗余代码，避免文件体积膨胀

低侵入性，不改变现有开发模式，一处修改，全局生效

安装

$ npm i css-theme --save-dev

使用 css编写

在css中需要根据主题变化的地方使用占位符，占位符可以是任何字符串。
你也可以通过预处理器变量的方式向css文件注入这些占位符。

@dark: #theme1;
@light: #theme2;

.container {
  .text1 {
    font-size: 16px;
    color: #theme1;
    line-height: normal;
  }
  .text2 {
    font-size: 14px;
    color:  @dark;
    line-height: normal;
  }
  .text2 {
    font-size: 14px;
    color: @light;
    line-height: normal;
  }
}

gulp插件模式

在gulp任务中调用theme插件。详见 demo/gulp

var cssTheme = require("css-theme").gulp; // gulp-plugin
var themeConfig = require("./theme.config"); // configs

less({
  plugins:[new LessPluginTheme(themeConfig)]
})

less插件模式

在通过gulp/webpack等工具调用less时，插入theme中间件。详见 demo/less

var LessPluginTheme = require("css-theme").less; // less-plugin
var themeConfig = require("./theme.config"); // configs

gulp.task("default", function() {
  return gulp.src("./index.less")
    .pipe(less())
    .pipe(cssTheme(themeConfig))
    .pipe(gulp.dest("./dist"));
});

配置

placeholder: 占位符,描述每个变量在css文件中对应的占位符

list: 主题列表

list.targetMap: 该主题中每个变量对应的值

list.rootClass: 使用该主题时顶层添加的class

list.default: 是否将该主题作为默认主题，在未指定class时默认展示该主题

module.exports = {
  "placeholder": {
    "dark": "#theme1",
    "light": "#theme2"
  },
  "list": [
    {
      "default": false,
      "targetMap": {
        "dark": "#ff6a3a",
        "light": "#ffa284",
      },
      "rootClass": "skin_orange"
    },
    {
      "default": false,
      "targetMap": {
        "dark": "#fdd000",
        "light": "#ffd71c",
      },
      "rootClass": "skin_yellow"
    }
  ]
};

链接

Questions

Github

授权

MIT

GPU云服务器云服务器 php的文件包含通过堡垒机搭建的应用,需要配置ip是哪里的 php生成文件的函数 js的皮肤

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114057.html

css-theme 通过一套源码生成一份包含多套皮肤配置的样式文件

摘要：详见插件模式在通过等工具调用时，插入中间件。详见配置占位符描述每个变量在文件中对应的占位符主题列表该主题中每个变量对应的值使用该主题时顶层添加的是否将该主题作为默认主题，在未指定时默认展示该主题链接授权 css-theme 通过单一css文件生成多套主题，并合并入一个css文件中特性只加载一个css，通过切换rootClass瞬间切换主题体积压缩，将多套css合并，去除冗余代码...

tinylcy 2019-08-23 12:29 评论0 收藏0
Element 一套优雅的 Vue 2 组件库是如何开发的

摘要：今年的大会上，受到作者现场开源项目的感染，我们也在现场宣布开源这套基于开发的组件库。一个文件夹下有所有的官方插件，直到发现他们用了一个叫的工具。那么如何写样式同时单独发布的组件如何引用样式文件也是我们要解决的问题。 showImg(https://segmentfault.com/img/bVDD9H?w=2502&h=1222); 今年的 JSConf 大会上，受到 gridcont...

lscho 2019-08-20 11:21 评论0 收藏0
larkplayer: 插件化的 HTML5 播放器

摘要：是一款轻量级易扩展的播放器，是为解决一些中小型的视频业务场景。同时各插件由于是面向的播放器接口，插件不知道插件的存在，因此能极大地降低各插件功能间的耦合。 larkplayer 是一款轻量级 & 易扩展的 html5 播放器，是为解决一些中小型的视频业务场景。这些业务不一定需要大而全的解决方案，并且他们往往有自己的定制化需求。背景为什么要编写 larkplayer？（注意，这里面有...

lijy91 2019-08-02 16:05 评论0 收藏0
larkplayer: 插件化的 HTML5 播放器

摘要：是一款轻量级易扩展的播放器，是为解决一些中小型的视频业务场景。同时各插件由于是面向的播放器接口，插件不知道插件的存在，因此能极大地降低各插件功能间的耦合。 larkplayer 是一款轻量级 & 易扩展的 html5 播放器，是为解决一些中小型的视频业务场景。这些业务不一定需要大而全的解决方案，并且他们往往有自己的定制化需求。背景为什么要编写 larkplayer？（注意，这里面有...

linkin 2019-08-23 12:01 评论0 收藏0