由于一些原因,公司项目不能使用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();
}

Logo

前往低代码交流专区

更多推荐