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

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

成都創(chuàng)新互聯(lián)長期為數(shù)千家客戶提供的網(wǎng)站建設服務，團隊從業(yè)經(jīng)驗10年，關注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為弓長嶺企業(yè)提供專業(yè)的網(wǎng)站設計、成都網(wǎng)站設計，弓長嶺網(wǎng)站改版等技術服務。擁有十余年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。

本篇文章給大家?guī)淼膬热菔顷P于css-theme如何通過源碼生成一份包含多套皮膚配置的樣式文件，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

css-theme

通過單一css文件生成多套主題，并合并入一個css文件中

特性

只加載一個css，通過切換rootClass瞬間切換主題

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

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

安裝

$ npm i css-theme --save-dev

使用

css編寫

在css中需要根據(jù)主題變化的地方使用占位符，占位符可以是任何字符串。
你也可以通過預處理器變量的方式向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'
    }
  ]
};

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

新聞名稱：css-theme通過源碼生成一份包含多套皮膚配置樣式文件的方法
轉載注明：http://bm7419.com/article18/goccdp.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供面包屑導航、品牌網(wǎng)站建設、域名注冊、動態(tài)網(wǎng)站、商城網(wǎng)站、網(wǎng)站策劃

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內容