css-theme 通過一套原始碼生成一份包含多套皮膚配置的樣式檔案

WoodenSail發表於2018-10-23
CSS原始碼

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

相關文章