【CSS扩展】VUE如何使用或修改element plus中自带的CSS全局变量来定义样式 |
您所在的位置:网站首页 › 样式中的更改样式在哪 › 【CSS扩展】VUE如何使用或修改element plus中自带的CSS全局变量来定义样式 |
目录 一、CSS声明全局变量 二、使用el plus 和 el ui的自带样式 1、element plus—— var.scss位置 2、element ui—— var.scss位置 三、修改el plus 和 el ui中的自定义样式变量(方法一致) 本萌新最近在写网页时使用到了element plus中自带的CSS全局样式定义,本文将从CSS声明全局变量的方法出发,记录如何使用并自定义修改element plus(vue3) 和 element ui(vue 2) 自带的样式。其中也包含了一些对SCSS语言的初探。请各位多多指教~ 一、CSS声明全局变量当我们在写CSS时,会遇到反复定义某些元素的同一属性的同一属性值,代码重复高,并且若是要统一修改该属性值也会显得繁琐。因此,我们CSS中也提供了方法,让我们可以像其他语言类型一样,将值统一储存在某一变量中再调用。 那么这里就要介绍 :root 和 var() 两大“金刚”了。这是最为基础和常用的组合。 :root 以伪类的形式,匹配了文档树中的根元素,通俗理解 :root 就对应 HTML元素 ,但会比HTML元素选择器优先级更高。不难理解,HTML作为我们其他元素的“爸爸”,所有CSS全局变量就应该声明在:root里面。var()函数的含义,就是取得自定义属性中的值,插入到我们写的样式表对应的属性中。举个栗子吧~ :root{ --button-color:#fff; --div-margin-left:10px; } div{ margin-left:var(--div-margin-left); } button{ background-color:var(--button-color); }*注意:自定义属性变量声明时应以 -- (双短横线)开头,作为与其他属性名称的区分,符合CSS规范 二、使用el plus 和 el ui的自带样式那么对于element 库中现成的一些变量我们如何使用呢?以颜色为例使用为例~ 首先我们需要找到element plus 和 element ui定义全局变量的文件在哪里,以便于使用查阅和自定义修改。 1、element plus—— var.scss位置\node_modules\element-plus\theme-chalk\src\common 文件夹下 \node_modules\element-ui\packages\theme-chalk\src\common 文件夹下 接下来以element plus为例简要看看var.scss怎么定义的: 截取了文件中关于color部分的定义,如下图: 了解到其如何定义之后,我们就将已经定义好的用于自己的样式中吧~ 我们在main.js中全局引入element-plus(方法不赘述),再在自己的vue界面中引入,引入格式如下: //随便写的例子,重点关注后面两行 .content { display: flex; align-items: center; justify-content: center; background: var(--el-color-primary-light-9); color: var(--el-color-primary); }*注意:我们找到对应的变量名例如$color-primary,但是在vue中使用需要加上 --el- ,即最终为--el-color-primary才会生效 三、修改el plus 和 el ui中的自定义样式变量(方法一致)官网教程如下: element-plus:主题 | Element Plus (element-plus.org) element-ui:组件 | Element 总结起来就是三步走: 在assets(静态资源)目录下创建自定义的element-variables.scss文件,并且在main.js引入在该行代码上方,写入自己定义、修改的变量内容!!!
希望对你有帮助~~~ |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |