小編給大家分享一下css-theme通過(guò)源碼生成一份包含多套皮膚配置樣式文件的方法，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

為丹鳳等地區(qū)用戶提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù)，及丹鳳網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、外貿(mào)營(yíng)銷網(wǎng)站建設(shè)、丹鳳網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！

                                                         本篇文章給大家?guī)?lái)的內(nèi)容是關(guān)于css-theme如何通過(guò)源碼生成一份包含多套皮膚配置的樣式文件，有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)你有所幫助。

css-theme

通過(guò)單一css文件生成多套主題，并合并入一個(gè)css文件中

特性

只加載一個(gè)css，通過(guò)切換rootClass瞬間切換主題

體積壓縮，將多套css合并，去除冗余代碼，避免文件體積膨脹

低侵入性，不改變現(xiàn)有開(kāi)發(fā)模式，一處修改，全局生效

安裝

$ npm i css-theme --save-dev

使用css編寫

在css中需要根據(jù)主題變化的地方使用占位符，占位符可以是任何字符串。
你也可以通過(guò)預(yù)處理器變量的方式向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任務(wù)中調(diào)用theme插件。詳見(jiàn) demo/gulp

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

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

less插件模式

在通過(guò)gulp/webpack等工具調(diào)用less時(shí)，插入theme中間件。詳見(jiàn) 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: 占位符,描述每個(gè)變量在css文件中對(duì)應(yīng)的占位符

list: 主題列表

list.targetMap: 該主題中每個(gè)變量對(duì)應(yīng)的值

list.rootClass: 使用該主題時(shí)頂層添加的class

list.default: 是否將該主題作為默認(rèn)主題，在未指定class時(shí)默認(rèn)展示該主題

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'
    }
  ]
};

看完了這篇文章，相信你對(duì)css-theme通過(guò)源碼生成一份包含多套皮膚配置樣式文件的方法有了一定的了解，想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道，感謝各位的閱讀！

網(wǎng)站標(biāo)題：css-theme通過(guò)源碼生成一份包含多套皮膚配置樣式文件的方法-創(chuàng)新互聯(lián)
標(biāo)題URL：http://weahome.cn/article/coijes.html