如何在Sass中根据字符串长度条件设置元素的font-size属性

首先明确：SCSS 是预编译语言，无法直接读取运行时 DOM 内的字符串实际长度，需结合场景选择实现方式： #

场景1：静态内容，编译阶段可预知字符串长度 #

可通过 SCSS 自定义类名规则，提前为不同长度的内容绑定对应样式：

// 定义mixin批量生成长度对应的样式
@mixin fontSizeByLength($maxLength: 200) {
  font-size: 3vw; // 默认字号
  @for $length from 31 through $maxLength {
    &.id-length-#{$length} {
      font-size: 2vw;
    }
  }
}

// 调用mixin
div.id-box {
  @include fontSizeByLength();
}

使用时直接给对应 div 加类名即可，比如长度为32的内容加类id-length-32。 #

场景2：动态内容，运行时才会确定字符串长度 #

需要先通过 JS 把字符串长度写入元素的自定义属性，再用 SCSS 匹配属性设置样式：

1. JS 侧代码，写入长度属性：

const idBox = document.querySelector('.id-box');
const idLength = idBox.textContent.trim().length;
idBox.dataset.length = idLength;

2. SCSS 侧代码，匹配属性设置样式：

div.id-box {
  font-size: 3vw; // 默认字号
  // 匹配长度大于30的元素
  @for $length from 31 through 200 {
    &[data-length="#{$length}"] {
      font-size: 2vw;
    }
  }
}

如果不需要SCSS统一管理规则，也可以直接在JS里完成判断设置，对应逻辑和需求一致：

const targetId = document.getElementById('target-id');
if (targetId.textContent.length > 30) {
  targetId.style.fontSize = '2vw';
}

内容的提问来源于stack exchange，提问作者Rom-888