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就可以实现换肤了。但这个在小程序里 做不了。
032019-06-05 -
黄黑红
提问者
2019-06-02
npm amd 那些打包啥的是不是可以实现?学完这个学一下那些。哪个简单?
00
相似问题