資訊專欄INFORMATION COLUMN
摘要：詳見插件模式在通過等工具調(diào)用時，插入中間件。詳見配置占位符描述每個變量在文件中對應(yīng)的占位符主題列表該主題中每個變量對應(yīng)的值使用該主題時頂層添加的是否將該主題作為默認(rèn)主題，在未指定時默認(rèn)展示該主題鏈接授權(quán)
css-theme
通過單一css文件生成多套主題，并合并入一個css文件中
特性只加載一個css，通過切換rootClass瞬間切換主題
體積壓縮，將多套css合并，去除冗余代碼，避免文件體積膨脹
低侵入性，不改變現(xiàn)有開發(fā)模式，一處修改，全局生效
安裝$ npm i css-theme --save-dev使用 css編寫
在css中需要根據(jù)主題變化的地方使用占位符，占位符可以是任何字符串。
你也可以通過預(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插件。詳見 demo/gulp
var cssTheme = require("css-theme").gulp; // gulp-plugin
var themeConfig = require("./theme.config"); // configs
less({
plugins:[new LessPluginTheme(themeConfig)]
})
less插件模式
在通過gulp/webpack等工具調(diào)用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文件中對應(yīng)的占位符
list: 主題列表
list.targetMap: 該主題中每個變量對應(yīng)的值
list.rootClass: 使用該主題時頂層添加的class
list.default: 是否將該主題作為默認(rèn)主題，在未指定class時默認(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"
}
]
};
鏈接
Questions
Github
授權(quán)MIT
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/114057.html
摘要：詳見插件模式在通過等工具調(diào)用時，插入中間件。詳見配置占位符描述每個變量在文件中對應(yīng)的占位符主題列表該主題中每個變量對應(yīng)的值使用該主題時頂層添加的是否將該主題作為默認(rèn)主題，在未指定時默認(rèn)展示該主題鏈接授權(quán) css-theme 通過單一css文件生成多套主題，并合并入一個css文件中 特性 只加載一個css，通過切換rootClass瞬間切換主題 體積壓縮，將多套css合并，去除冗余代碼...
摘要：今年的大會上，受到作者現(xiàn)場開源項目的感染，我們也在現(xiàn)場宣布開源這套基于開發(fā)的組件庫。一個文件夾下有所有的官方插件，直到發(fā)現(xiàn)他們用了一個叫的工具。那么如何寫樣式同時單獨發(fā)布的組件如何引用樣式文件也是我們要解決的問題。 showImg(https://segmentfault.com/img/bVDD9H?w=2502&h=1222); 今年的 JSConf 大會上，受到 gridcont...
摘要：是一款輕量級易擴展的播放器，是為解決一些中小型的視頻業(yè)務(wù)場景。同時各插件由于是面向的播放器接口，插件不知道插件的存在，因此能極大地降低各插件功能間的耦合。 larkplayer 是一款輕量級 & 易擴展的 html5 播放器，是為解決一些中小型的視頻業(yè)務(wù)場景。這些業(yè)務(wù)不一定需要大而全的解決方案，并且他們往往有自己的定制化需求。 背景 為什么要編寫 larkplayer？（注意，這里面有...
摘要：是一款輕量級易擴展的播放器，是為解決一些中小型的視頻業(yè)務(wù)場景。同時各插件由于是面向的播放器接口，插件不知道插件的存在，因此能極大地降低各插件功能間的耦合。 larkplayer 是一款輕量級 & 易擴展的 html5 播放器，是為解決一些中小型的視頻業(yè)務(wù)場景。這些業(yè)務(wù)不一定需要大而全的解決方案，并且他們往往有自己的定制化需求。 背景 為什么要編寫 larkplayer？（注意，這里面有...
閱讀 2949·2021-10-28 09:32
閱讀 2980·2021-10-11 10:57
閱讀 3125·2021-10-08 10:05
閱讀 2606·2021-09-28 09:36
閱讀 2221·2019-08-30 15:55
閱讀 2276·2019-08-30 15:44
閱讀 2401·2019-08-30 14:02
閱讀 3082·2019-08-29 17:16
