vue中scss使用js的变量

halo14162025-05-09 21:00

一、前言

在项目开发中，很多时候会涉及到scss样式变量，正常定义方式 $primary-color: rgb(188, 0, 194);；使用时直接使用即可：color: $primary-color。但是，如果，这些变量是在js中定义的怎么办

二、实现

动态绑定：:style="{'--str-length': strLength}"

scss 中使用 v-bind(strLength) => strLength 是js变量

html 复制代码

<template>
    <div class="typing-demo-wrapper" :style="{'--str-length': strLength}">
      <div class="typing-demo">{{ text }}</div>
    </div>
</template>

<script lang="ts" setup>
const text = ref("你好；欢迎来到自定义布局页面。");
const strLength = text.value.length; // 计算字符串长度;
</script>

<style lang="scss" scoped>
.typing-demo-wrapper {
    height: 200px;  // 父元素的元素可按实际情况处理
    overflow: auto;

    /* 实现从左到右打字效果 */
    @keyframes typing {
      from {
        width: 0
      }
    }
    /* 实现鼠标闪烁效果 */
    @keyframes blink {
      50% {
        border-color: transparent
      }
    } 
    .typing-demo {
      font-family: monospace; /* 使用等宽字体，保证每个字的宽度一致 */      
      // width: 30ch; /* 设置宽度为字符串长度 */

      // 根据字符串长度设置宽度
      width: calc(var(--str-length) * 2ch); // 使用动态绑定的css变量，计算宽度
      // width: calc(v-bind(strLength) * 2ch); // 直接使用v-bind绑定js变量

      /* typing 3s 表示3秒内打完这15个字  blink  .5s表示0.5秒闪烁一下光标*/
      animation: typing 3s steps(v-bind(strLength)), blink .5s step-end infinite alternate;
      white-space: nowrap;
      overflow: hidden;
      /* 鼠标光标用右边的边框代替 */
      border-right: 2px solid red;
      font-size: 2em; 
    }
  }
</style>

文章仅为本人学习过程的一个记录，仅供参考，如有问题，欢迎指出！