WeUI v2.3.0 解读04
返回
根据 gulp.js 文件内容可知，样式文件从 src/style/weui.less 开始
gulp.task('build:style', function() {
var banner = [
'/*!',
' * WeUI v<%= pkg.version %> (<%= pkg.homepage %>)',
' * Copyright <%= new Date().getFullYear() %> Tencent, Inc.',
' * Licensed under the <%= pkg.license %> license',
' */',
'',
].join('\n');
gulp
.src('src/style/weui.less', option)
.pipe(sourcemaps.init())
.pipe(
less().on('error', function(e) {
console.error(e.message);
this.emit('end');
}),
)
.pipe(postcss([autoprefixer(['iOS >= 7', 'Android >= 4.1']), comments()]))
.pipe(convertCssVar())
.pipe(header(banner, { pkg: pkg }))
.pipe(sourcemaps.write())
.pipe(gulp.dest(dist))
.pipe(browserSync.reload({ stream: true }))
.pipe(
nano({
zindex: false,
autoprefixer: false,
svgo: false,
}),
)
.pipe(
rename(function(path) {
path.basename += '.min';
}),
)
.pipe(gulp.dest(dist));
});
阅读 weui.less 文件
发现都是 @import (导入文件语句) - 整合整个项目style文件
依次按顺序加载
文件依次加载顺序
|1. src/style/base/reset.less
| |1. src/style/base/fn.less
| | |1. src/style/base/theme/index.less
| | | |1. src/style/base/theme/fn.less
| | | | |1. src/style/base/theme/vars/light.less
| | | | | ===> 明亮主题 色彩定义
| | | | |2. src/style/base/theme/vars/dark.less
| | | | | ===> 黑白主题 色彩定义 (让我想起了，前一阵 微信要适配 ios 黑白主题的事情)
| | | | |3. 本文件内的内容(src/style/base/theme/fn.less)
| | | | | ===> 声明样式函数块儿
| | | | | a. 黑白模式
| | | | | b. 设置颜色 (多态)
| | | |2. 本文件内的内容(src/base/theme/fn.less)
| | | | ===>
| | | | a. body 默认采用 明亮主题
| | | | b. @media 判断 黑白模式
| | | | c. DOM attr 判断 黑白模式
| | |2. src/style/base/mixin/moble.less
| | |3. src/style/base/mixin/setOnepx.less
| | |4. src/style/base/mixin/setArrow.less
| | |5. src/style/base/mixin/text.less
| | |6. src/style/base/variable/global.less
| | |7. src/style/base/variable/color.less
| | |8. src/style/base/variable/weui-tab.less
| | |9. src/style/base/variable/weui-cell.less
| | |10. src/style/base/variable/weui-button.less
| | |11. src/style/base/variable/weui-msg.less
| | |12. src/style/base/variable/weui-grid.less
| | |13. src/style/base/variable/weui-progress.less
| | |14. src/style/base/variable/weui-dialog.less
|2. 本文件内的内容 (src/style/base/fn.less)
===>
a. html => text-size-adjust
b. body => line-height / font-family
c. * => margin / padding
d. a,img => border
e. a => text-decoration / setTapColor()
f. input,textarea => caret-color
g. -webkit-input-placeholder => color
