scss 中 height 动态赋值

不爱吃饭爱吃菜

已于 2023-04-25 16:02:12 修改

阅读量1.3k

点赞数 1

CC 4.0 BY-SA版权

文章标签： scss javascript 前端

于 2023-04-24 16:07:21 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_45288172/article/details/130345210

文章展示了如何在Vue组件中结合SCSS样式语言，动态计算并设置电池容量百分比的样式。通过`<style>`标签定义样式类`.percentage-battery-capacity`，并在`template`中利用`data`属性计算高度，以展示电池容量的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

style中：

<style lang="scss" scoped>
.percentage-battery-capacity {
  display: inline-block;
  position: absolute;
  bottom: 6px;
  left: 12px;
  width: 40%;
  height: var(--heightLine); //关键
  border-radius: 2px;
}
</style>

template中：

<span
    style="{ //关键
    '--heightLine':
    (data.percentageBatteryCapacity[temp] / 100) * 28 + 'px',
   }"
   style="background-color: #bb1717"
   class="percentage-battery-capacity"
></span>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

不爱吃饭爱吃菜

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

scss 的基本使用

weixin_45986657的博客

05-24

6246

CSS 生成时，变量会被它们的值所替代。如果你需要一个不同的值，只需要改变这个变量的值，则所有引用此变量的地方生成的值都会随之改变。但是当你的样式变得越来越复杂，你需要大段大段的重用样式的代码，独立的变量就没办法应付这种情况了。如果你发现自己在不停地重复一段样式，那就应该把这段样式构造成优良的混合器，尤其是这段样式本身就是一个逻辑单元，比如说是一组放在一起有意义的属性。属性和选择器嵌套是非常伟大的特性，因为它们不仅大大减少了你的编写量，而且通过视觉上的缩进使你编写的样式结构更加清晰，更易于阅读和开发。

sass/scss语法汇总

一只小绵羊

04-22

3478

sass/scss语法汇总

参与评论您还未登录，请先登录后发表或查看评论

动态改变scss样式变量

weixin_50238536的博客

09-08

2412

export {

移动端问题整理

Tomoe20的博客

09-18

215

1、字符串反转 const reverseStr = str =>{ if (!str) return; return str.split('').reverse().join(''); } reverseStr('acb');

动态生成element-plus的scss变量；SCSS中实现动态颜色变体生成

最新发布

i_am_a_div的博客

06-04

315

动态生成element-plus的scss变量；SCSS中实现动态颜色变体生成

CSS-动态计算高度

QQ1257871322的博客

09-04

2646

要在 CSS 中动态计算元素的高度，你可以使用几种方法，主要取决于你需要的具体效果和布局。

动态获取某元素的高度

weixin_44190794的博客

03-26

1510

let zjDiv = document.getElementById("rightBottom"); var BottomHeight = document.defaultView.getComputedStyle(zjDiv, null).height;

scss使用for循环遍历，动态赋值类名并配置不同颜色

weixin_42674490的博客

01-03

1583

需求：后端要传入不同的等级，前端通过等级展示不同的字体颜色，通过scss遍历更有利于动态修改颜色或者增删等级

CSS 使用 data里面的动态参数

weixin_50236740的博客

07-27

608

【代码】CSS 使用 data里面的动态参数。

& { &[topHeaderStatus='show'] { --top-header-height: 60px; } }scss中这种写法是什么意思

03-08

但变量在SCSS中是静态的，编译时确定，不能直接根据条件动态改变。所以，用户可能想根据不同的条件给变量赋予不同的值。接下来，我需要参考用户提供的引用内容。引用[2]提到定义变量的格式是$变量名: 数值;，但...

scss

03-15

除了简单的赋值外，SCSS 还能执行数值运算，增强样式的动态表现力。 ```scss .container { width: 100%; height: ($base-line-height * 5); // 计算高度 } ``` #### 继承机制借助 `@extend` 指令可以让某个选择...

Sass、Scss、Less和Stylus区别总结

efew212efe的博客

05-04

2146

Sass、Scss、Less、Stylus CSS 预处理器技术已经非常的成熟了，而且也涌现出了越来越多的 CSS 的预处理器框架。本文便总结下 Sass、Less CSS、Stylus这三个预处理器的区别和各自的基本语法。简言之可以理解scss是sass的一个升级版本，完全兼容sass之前的功能，又有了些新增能力。语法形式上有些许不同，最主要的就是sass是靠缩进表示嵌套关系，scss是花括号 //sass 太费眼了 .father width:100px; .son

css(scss)颜动态赋值(添加)颜色或背景色

anny_mei的博客

11-19

2804

因为我们项目有个主题换肤的功能,所以导航栏需要字体颜色变换,拿部分情况来讲效果图先动态给一个颜色变量然后再 <style lang="scss"> .mroeMeun { .el-submenu__title { // 引入颜色变量 color: #{"var(--title_color)"} !important; i { color: #{"var(--title_color)"} !important; } } } </s

vue中css样式中使用data里面的数据,动态设置元素高度

meimeib的博客

07-19

2990

需求 vue中css样式中使用data里面的数据,动态设置元素高度用法 <template> <div class="box" :style="{ '--heightLine': heightLine + 'px' }"></div> </template> <script> export default { data() { return { height:42 }; } }; </script>

【前端demo】动态赋值CSS

karshey的博客

09-04

1656

在这里，显然滑块的滑动是不能失去焦点才触发的（滑块滑动的时候box要同步移动），但颜色的选择可以（可以试一试，改变颜色是选择颜色之后再点击空白区域，方块颜色才会发生改变）。我们的目的是实现动态改变box的样式。这里的root是从html标签开始的整个文档树（DOM树）。对于radius，四个角一起变化的最大值是50%。将CSS变量直接赋值在文档树开头的style，就。因此，如果想改变box的样式，只需改变。拼接直接形成CSS变量，然后直接赋值。注意，这里root中的变量名（注意，颜色的赋值是不用加。

CSS获取当前可视屏幕的高度

chenchuwai的博客

06-26

6393

vw （viewpoint width），视窗宽度，1vw=视窗宽度的1% vh （viewpoint height），视窗高度，1vh=视窗高度的1% calc() 函数用于动态计算长度值。支持 "+", "-", "*", "/" 运算，使用标准的数学运算优先级规则。例子：height:calc(100vh-42px)；注意：运算符前后都需要保留一个空格，100vh = 视窗高度的100% ...

scss动态生成类名、样式值

qq_36959274的博客

10-22

5606

常常会有需求根据不同的状态给元素设置不同的颜色值，类似状态标签等等如图的标签用scss的同学,可以用@each指令完成一系列样式的设置代码如下： $colors: ( blue: #008fff, grey: #909299, orange: #fa8c16, red: #fe5951, green: #2ac66a, ); .status { .label { &:before { content: ""; display

【uniapp】通过css动态设置scroll-view高度

weixin_42306796的博客

11-21

3292

通过css设置动态设置scroll-view高度