首页 > 其他分享 >不能直接在 CSS 变量中写计算,针对于 Scss 项目

不能直接在 CSS 变量中写计算,针对于 Scss 项目

时间:2023-01-25 02:11:06浏览次数:44  
标签:Scss 变量 100px CSS 计算 中写 表达式

不论是在 Scss 还是在 CSS 中,给 CSS 变量(自定义变量)直接写计算,都不会生效。例如:

* {
  --text-size: calc(100px * 1);
}

打开浏览器查看计算的样式表中,并没有计算得到 100px,而是:

image

在 CSS 中还不好解决,不过现在都是大前端,Scss 都不陌生,这里仅针对于 Scss 项目的解决方案。在 Scss 中有一个插值表达式 #{},该表达式功能很强,把要计算的表达式放入插值表达式就可以解决上诉问题:

* {
  --text-size: #{calc(100px * 1)};
}

打开浏览器查看样式表,正确显示100px

image

标签:Scss,变量,100px,CSS,计算,中写,表达式
From: https://www.cnblogs.com/Enziandom/p/17066619.html

相关文章

  • CSS font-display 控制字体加载和替换
    在编写网站的时候,或多或少都会用到一些网络上的字体,CSS3中虽然加入了对WebFonts(网络字体)的支持,但是浏览器对它们的加载和默认处理方式会极大的影响网站的性能和用户体验......
  • 在React中,怎么用tailwind css(就叫顺丰吧 :D 。。。)封装Button组件
    我的目的想用tailwindcss来快速封装Button组件,而不是从更大型的UI库导入一个Button组件(那样就太大材小用)。几个工具从这抄的样式在学习怎么形成规范化的组件额,仅......
  • css
    一.基础认知1.1.css介绍css:cascadingstylesheets:层叠样式表用于修饰HTML标签命令1.2css的引入方式内嵌式:css写在style标签中,style标签写在head标签中,写在title标签......
  • SVG Animation & CSS stroke-dasharray & stroke-dashoffset All In One
    SVGAnimation&CSSstroke-dasharray&stroke-dashoffsetAllInOnehttps://maxwellito.github.io/vivus/https://github.com/maxwellito/vivus#vivusjshttps://de......
  • 「HTML+CSS」--自定义加载动画【029】
    前言Hello!小伙伴!首先非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出~哈哈自我介绍一下昵称:海轰标签:程序猿一只|C++选手|学生简介:因C语言结识编程,随后转入计算......
  • 「HTML+CSS」--自定义加载动画【031】
    前言Hello!小伙伴!首先非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出~哈哈自我介绍一下昵称:海轰标签:程序猿一只|C++选手|学生简介:因C语言结识编程,随后转入计算......
  • 【动画消消乐】HTML+CSS 自定义加载动画:清新折叠方块效果 063(附源码及原理详解)
    前言Hello!小伙伴!非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出~自我介绍ଘ(੭ˊᵕˋ)੭昵称:海轰标签:程序猿|C++选手|学生简介:因C语言结识编程,随后转入计算机专......
  • 【动画消消乐】HTML+CSS 自定义加载动画:怦然心跳 066
    前言Hello!小伙伴!非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出~ 自我介绍ଘ(੭ˊᵕˋ)੭昵称:海轰标签:程序猿|C++选手|学生简介:因C语言结识编程,随后转入计算......
  • 8、CSS权威指南--第四章(p121)值和单位
     4.1关键字、字符串和其他文本值样式表中的一切都是文本,但是有些类型的值表示的是字符串本省,而不是数字或颜色等。表示字符串本身的值有URL和让人难以置信的图像。4......
  • css inset属性
    inset属性说明如下:​​inset​​​属性用作定位元素的​​top​​​、​​right​​​、​​bottom​​​、​​left​​​这些属性的简写。类似于​​margin​​​和......