css变量使用

monstkl

于 2024-05-21 23:34:10 发布

阅读量462

点赞数 5

分类专栏： css 文章标签： css tensorflow 前端

本文链接：https://blog.csdn.net/weixin_43390711/article/details/139104625

版权

css 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

命名规范

双横线加字母开头，由字母、数字、破折号和短横线组成
使用有意义的名称
使用小写字母和连接符（–primary-color）
为了避免与其他变量冲突，使用命名空间（–space-primary-color）

定义

在根元素（:root）中定义，以便全局使用

:root {
  --primary-color: #ff0000;
  --font-size: 16px;
}

使用

使用 var() 函数将变量包裹起来。变量可以在任何可以使用 CSS 属性值的地方使用

.element {
  color: var(--primary-color);
  font-size: var(--font-size);
}

变量值是一个字符串，可以与其他字符串拼接

<!DOCTYPE html>
<html>

<style>
  :root {
    --primary-content: 'hello';
  }
  .box:after {
    content: '标题 : ' var(--primary-content)
  }
</style>
<body>
  <div class="box"></div>
</body>
</html>

变量值是数值，使用 calc() 函数,将变量的值乘以 1 像素

<!DOCTYPE html>
<html>

<style>
  :root {
    --primary-num: 40;
  }
  .box {
    padding-top: calc(var(--primary-num) * 1px);
  }
</style>

变量值带有单位,不能写成字符串

<!DOCTYPE html>
<html>

<style>
  :root {
    --border-radius-box1: '20px';  //错
    --border-radius-box2: 20px;   // 正确
  }

修改（变量的值可以在 CSS 中动态修改）

使用伪类（:hover、:focus等）来修改变量的值

.element:hover {
  --primary-color: #00ff00;
}

通过JavaScript来修改变量的值（用户切换主题）

document.documentElement.style.setProperty('--primary-color', '#00ff00');

最佳实践

在vue的入口文件import进来写了根元素写了css变量的文件，各个组件可用

index.css:
:root{--font-size: 16px;}
--------------------------------------
index.js：
import './index.css';

monstkl

关注

5
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
css变量使用

在根元素（:root）中定义，以便全局使用:root {
复制链接

扫一扫

专栏目录

css变量使用

命名规范

定义

使用

修改（变量的值可以在 CSS 中动态修改）

最佳实践

“相关推荐”对你有帮助么？