css标签嵌套---css主题

来源:5-10 组件只能继承极少数全局样式

黄黑红

2019-06-02

七月老师:

老师,讲到全局样式时,我把代码改写了。我把所有文字相关的单独写了样式,这样我统一改主题时就可以只改全局样式文件就好了。比如我把所有的正常字体都改大一号,就可以把css的font_m 和font_s调整一下就行。或者调整整体配色为绿色,那我就把fc_light改为浅绿色,

但这样写的麻烦是每个css涉及文字的时候都要有文字的另外一个或几个标签。有没有别的办法能简写。

下面是示例代码和我想象的写法:

/*-----index.wxml-----*/
……
<view class='form'>
	<view>
		<text class='lable font_s fc_light'>姓名:</text>
		<input class='data'></input>
	</view>
	<view>
		<text class='lable font_s fc_light'>年龄:</text>
		<input class='data'></input>
	</view>
	<view>
		<text class='lable font_s fc_light'>手机号码:</text>
		<input class='data fc_alert'></input>
	</view>
</view>
……

/*-----index.wxxs-----*/
.lable{
	width:100rpx;
	height: 32rpx;
}

.data{
	width:100%
	height:32rpx;
}
……

/*-----app.wxxs-----*/

.font_m{
	font-size: 32rpx;
}

.font_s{
	font-size: 40rpx;
}

fc_light{
	color:#999999;
}

fc_alert{
	color:red;
}
……

有没有类似这样的写法:

1 类似函数写法
.lable{
	.fc_light{};
}

2 一个css引用或者注入到另一个css
.lable{} <=.fc_light{};
.lable{
	require(../../app.wxxs | .fc_light{})
}
.lable{
	include(../..app.wxxs | .fc_light{})
}

3 在此位置直接加上这个标签
.lable{
	+.fc_light{};
}

4 面向对象方式
 .lable extends .fc_light{}{}

这样就可以在一个标签里引用另一个标签,这样页面上就一个标签,不用写好长一堆了。

我刚开始写前端,在七月老师指点下才明白怎么把这么多元素给他们归位。但写起来不顺手。我对前端涉猎不深,搜了一下也没搜到结果。主流的主题是怎么实现的(比如jQuery就可定制主题),或者都无解那咱可不可以试着用js动态实现这个或者用别的方式实现,没准下一个流行框架就会把支持css嵌套或者叫css继承作为框架的一个标配。

谢谢!

cas

写回答

2回答

7七月

2019-06-03

如果你要实现类似换皮肤的功能,那其实是CSS文件完整替换。就是说你有多个css文件,里面css的名字都相同,加载不同的css就可以实现换肤了。但这个在小程序里 做不了。

0
3
黄黑红
回复
7七月
嗯,我就准备这么干!谢谢老师!
2019-06-05
共3条回复

黄黑红

提问者

2019-06-02

npm amd 那些打包啥的是不是可以实现?学完这个学一下那些。哪个简单?

0
0

纯正商业级微信小程序应用实战,全方位小程序特性讲解

真实数据的高质量小程序项目,学会直接工作

4782 学习 · 2125 问题

查看课程