css-theme 通過一套源碼生成一份包含多套皮膚配置的樣式文件

tinylcy 發布于2019-08-23 12:29 / 1256人閱讀

摘要：詳見插件模式在通過等工具調用時，插入中間件。詳見配置占位符描述每個變量在文件中對應的占位符主題列表該主題中每個變量對應的值使用該主題時頂層添加的是否將該主題作為默認主題，在未指定時默認展示該主題鏈接授權

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的皮膚

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/98609.html

css-theme 通過一套源碼生成一份包含多套皮膚配置的樣式文件

摘要：詳見插件模式在通過等工具調用時，插入中間件。詳見配置占位符描述每個變量在文件中對應的占位符主題列表該主題中每個變量對應的值使用該主題時頂層添加的是否將該主題作為默認主題，在未指定時默認展示該主題鏈接授權 css-theme 通過單一css文件生成多套主題，并合并入一個css文件中特性只加載一個css，通過切換rootClass瞬間切換主題體積壓縮，將多套css合并，去除冗余代碼...

masturbator 2019-08-29 17:02 評論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