Vue+Less实现全局字体大中小切换
由于一些原因,公司项目不能使用sass,只好使用less了。在遇到切换全局字体大小这一需求时发现网上基本没有关于less的案例,在看了下less的文档后发现还是主要功能还是有的,可以实现字体大小切换。废话少说新建minxin.less文件代码如下:@import "./variable";.add-size(){[data-size="0"] & {font-size:@font_size
·
由于一些原因,公司项目不能使用sass,只好使用less了。在遇到切换全局字体大小这一需求时发现网上基本没有关于less的案例,在看了下less的文档后发现还是主要功能还是有的,可以实现字体大小切换。废话少说
新建minxin.less文件
代码如下:
@import "./variable";
.add-size(){
[data-size="0"] & {
font-size:@font_size_14;
}
[data-size="1"] & {
font-size:@font_size_15;
}
[data-size="2"] & {
font-size:@font_size_16;
}
}
新建variable文件
@font_size_14:14px;
@font_size_15:15px;
@font_size_16:16px;
js控制大小代码:
window.document.documentElement.setAttribute(‘data-size‘, size);//用0,1,2来控制就好
在样式里引用mixin.less
@import “xxx/xxx/mixin”;
.fontSzi{
.add-size();
}
更多推荐
已为社区贡献3条内容
所有评论(0)