草庐IT

【CSS扩展】VUE如何使用或修改element plus中自带的CSS全局变量来定义样式

音仔小瓜皮 2023-04-12 原文

目录

一、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() 两大“金刚”了。这是最为基础和常用的组合。

  1. :root 以伪类的形式，匹配了文档树中的根元素，通俗理解 :root 就对应 HTML元素 ，但会比HTML元素选择器优先级更高。不难理解，HTML作为我们其他元素的“爸爸”，所有CSS全局变量就应该声明在:root里面。
  2. 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 文件夹下

2、element ui—— var.scss位置

\node_modules\element-ui\packages\theme-chalk\src\common  文件夹下

接下来以element plus为例简要看看var.scss怎么定义的：

截取了文件中关于color部分的定义，如下图：

  • !default代表变量默认值
  • map.deep-merge（$map1,$map2） ，将两个变量声明的属性和属性值合并在一起，此处即将$type中定义的各个状态（success、warning 等等）对应的颜色值map和原生color的map合并起来
  • 紧接着在color的基础上定义具体的color样式，就有了$color-white  $color-primary等等
  • map.get（$map，key）方法用于像对象一样，根据键值获得map中对应的属性值。上图就是用'white'  'black'  这种键值获取到前面$colors中'white'  'black'所对应的颜色值。

了解到其如何定义之后，我们就将已经定义好的用于自己的样式中吧~

我们在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引入

  • 按照第二大点中所介绍的路径找到var.scss位置，查看库里定义了哪些变量、哪些可以修改、代码如何等等，在原变量基础上修改内容。
  • 然后，在自定义scss文件中先导入原本的var.scss代码，使用语句为：

 在该行代码上方，写入自己定义、修改的变量内容！！！

 

希望对你有帮助~~~

CSSelementxffxff0cvue.js前端

有关【CSS扩展】VUE如何使用或修改element plus中自带的CSS全局变量来定义样式的更多相关文章

  1. ruby - 如何使用 Nokogiri 的 xpath 和 at_xpath 方法 - 2

    我正在学习如何使用Nokogiri，根据这段代码我遇到了一些问题:require'rubygems'require'mechanize'post_agent=WWW::Mechanize.newpost_page=post_agent.get('http://www.vbulletin.org/forum/showthread.php?t=230708')puts"\nabsolutepathwithtbodygivesnil"putspost_page.parser.xpath('/html/body/div/div/div/div/div/table/tbody/tr/td/div

  2. ruby - 如何从 ruby​​ 中的字符串运行任意对象方法？ - 2

    总的来说，我对ruby​​还比较陌生，我正在为我正在创建的对象编写一些rspec测试用例。许多测试用例都非常基础，我只是想确保正确填充和返回值。我想知道是否有办法使用循环结构来执行此操作。不必为我要测试的每个方法都设置一个assertEquals。例如:describeitem,"TestingtheItem"doit"willhaveanullvaluetostart"doitem=Item.new#HereIcoulddotheitem.name.shouldbe_nil#thenIcoulddoitem.category.shouldbe_nilendend但我想要一些方法来使用

  3. ruby - 使用 RubyZip 生成 ZIP 文件时设置压缩级别 - 2

    我有一个Ruby程序，它使用rubyzip压缩XML文件的目录树。gem。我的问题是文件开始变得很重，我想提高压缩级别，因为压缩时间不是问题。我在rubyzipdocumentation中找不到一种为创建的ZIP文件指定压缩级别的方法。有人知道如何更改此设置吗？是否有另一个允许指定压缩级别的Ruby库？ 最佳答案 这是我通过查看ruby​​zip内部创建的代码。level=Zlib::BEST_COMPRESSIONZip::ZipOutputStream.open(zip_file)do|zip|Dir.glob("**/*")d

  4. ruby - 为什么我可以在 Ruby 中使用 Object#send 访问私有(private)/ protected 方法？ - 2

    类classAprivatedeffooputs:fooendpublicdefbarputs:barendprivatedefzimputs:zimendprotecteddefdibputs:dibendendA的实例a=A.new测试a.foorescueputs:faila.barrescueputs:faila.zimrescueputs:faila.dibrescueputs:faila.gazrescueputs:fail测试输出failbarfailfailfail.发送测试[:foo,:bar,:zim,:dib,:gaz].each{|m|a.send(m)resc

  5. ruby-on-rails - 使用 Ruby on Rails 进行自动化测试 - 最佳实践 - 2

    很好奇，就使用ruby​​onrails自动化单元测试而言，你们正在做什么？您是否创建了一个脚本来在cron中运行rake作业并将结果邮寄给您？git中的预提交Hook？只是手动调用？我完全理解测试，但想知道在错误发生之前捕获错误的最佳实践是什么。让我们理所当然地认为测试本身是完美无缺的，并且可以正常工作。下一步是什么以确保他们在正确的时间将可能有害的结果传达给您？ 最佳答案 不确定您到底想听什么，但是有几个级别的自动代码库控制:在处理某项功能时，您可以使用类似autotest的内容获得关于哪些有效，哪些无效的即时反馈。要确保您的提

  6. ruby - 在 Ruby 中使用匿名模块 - 2

    假设我做了一个模块如下:m=Module.newdoclassCendend三个问题:除了对m的引用之外，还有什么方法可以访问C和m中的其他内容？我可以在创建匿名模块后为其命名吗(就像我输入“module...”一样)？如何在使用完匿名模块后将其删除，使其定义的常量不再存在？ 最佳答案 三个答案:是的，使用ObjectSpace.此代码使c引用你的类(class)C不引用m:c=nilObjectSpace.each_object{|obj|c=objif(Class===objandobj.name=~/::C$/)}当然这取决于

  7. ruby - 使用 ruby​​ 和 savon 的 SOAP 服务 - 2

    我正在尝试使用ruby​​和Savon来使用网络服务。测试服务为http://www.webservicex.net/WS/WSDetails.aspx?WSID=9&CATID=2require'rubygems'require'savon'client=Savon::Client.new"http://www.webservicex.net/stockquote.asmx?WSDL"client.get_quotedo|soap|soap.body={:symbol=>"AAPL"}end返回SOAP异常。检查soap信封，在我看来soap请求没有正确的命名空间。任何人都可以建议我

  8. python - 如何使用 Ruby 或 Python 创建一系列高音调和低音调的蜂鸣声？ - 2

    关闭。这个问题是opinion-based.它目前不接受答案。想要改进这个问题？更新问题，以便editingthispost可以用事实和引用来回答它.关闭4年前。Improvethisquestion我想在固定时间创建一系列低音和高音调的哔哔声。例如:在150毫秒时发出高音调的蜂鸣声在151毫秒时发出低音调的蜂鸣声200毫秒时发出低音调的蜂鸣声250毫秒的高音调蜂鸣声有没有办法在Ruby或Python中做到这一点？我真的不在乎输出编码是什么(.wav、.mp3、.ogg等等)，但我确实想创建一个输出文件。

  9. ruby-on-rails - 如何验证 update_all 是否实际在 Rails 中更新 - 2

    给定这段代码defcreate@upgrades=User.update_all(["role=?","upgraded"],:id=>params[:upgrade])redirect_toadmin_upgrades_path,:notice=>"Successfullyupgradeduser."end我如何在该操作中实际验证它们是否已保存或未重定向到适当的页面和消息？ 最佳答案 在Rails3中，update_all不返回任何有意义的信息，除了已更新的记录数(这可能取决于您的DBMS是否返回该信息)。http://ar.ru

  10. ruby-on-rails - 'compass watch' 是如何工作的/它是如何与 rails 一起使用的 - 2

    我在我的项目目录中完成了compasscreate.和compassinitrails。几个问题:我已将我的.sass文件放在public/stylesheets中。这是放置它们的正确位置吗？当我运行compasswatch时，它不会自动编译这些.sass文件。我必须手动指定文件:compasswatchpublic/stylesheets/myfile.sass等。如何让它自动运行？文件ie.css、print.css和screen.css已放在stylesheets/compiled。如何在编译后不让它们重新出现的情况下删除它们？我自己编译的.sass文件编译成compiled/t

随机推荐