精华内容
下载资源
问答
  • css全局变量
    2021-08-18 17:27:07

    设置

    <style lang="less" scope>
          :root{
                --themeColor:#00D98F;
          }
    </style>
    

    使用

    <style lang="less" scope>
          .test{
                background-color: var(--themeColor);
          }
    </style>
    

    通过JS改变

    document.documentElement.style.setProperty('--themeColor','值');
    
    更多相关内容
  • CSS 全局变量的使用

    千次阅读 2021-02-24 20:10:25
    为了统一页面风格在编写CSS样式文件时经常会大量复用相同的颜色或者字号,加重开发工作量的同时也不利于后期的维护,所以需要用到CSS全局变量。 声明全局变量 CSS全局变量的声明是在变量名称前加两个中横线--。 ...

    为了统一页面风格在编写CSS样式文件时经常会大量复用相同的颜色或者字号,加重开发工作量的同时也不利于后期的维护,所以需要用到CSS全局变量。

    声明全局变量

    CSS全局变量的声明是在变量名称前加两个中横线--

    body {
      --Color: #2C51CD;
      --BackGround: #B4D4FD;
    }

    上述代码中,body选择器中声明了Color和BackGround两个变量。而使用--是因为$被Sass占用了,@被Less占用了。

    变量的声明对大小写敏感。如:Color和color表示两个不同的变量。

    读取变量

    使用var()函数来读取变量。

    p {
      background: var(--Color);
    }

    var()函数还可以使用第二个参数,表示变量的默认值。如果该变量不存在,就会使用这个默认值。

    p {
      background: var(--Color, #2C51CD);
    }

    第二个参数不处理内部的逗号或空格,都视作参数的一部分。

    p {
      font-family: var(--fontF, "Roboto", "Helvetica");
      margin: var(--Margins, 15px 20px 25px);
    }

    var()函数还可以用在变量声明中

    body {
      --Color: #2C51CD;
      --BackGround: var(--Color);
    }

    变量只能作为属性值,不能作为属性名

    变量值的类型

    如果变量值是字符串,则可以与其他字符串拼接

    :root {
      --Hi: 'hello';
      --Name: var(--Hi)',world';
    }

    如果是数值,则不可以拼接

    :root {
      --pSizeVal: 20;
      --pSize: var(--pSizeVal)'px'; //无效
    }

    但可以通过calc()函数,将他们拼接起来

    :root {
      --pSizeVal: 20;
      --pSize: calc(var(--pSizeVal)*1px);
    }

    如果变量值带单位,则不能写成字符串形式

    :root {
      --pSize: '20px';
      margin-top: var(--pSize); //无效
    }
    
    :root {
      --pSize: 20px;
      margin-top: var(--pSize); //有效
    }

    作用域

    变量的作用域就是它所在的选择器的有效范围。

    <style>
      :root {
        --Color: blue;
      }
      div {
        --Color: green;
      }
      #alert {
        --Color: red;
      }
      * {
        color: var(--Color);
      }
    </style>
    
    <p>蓝色</p>
    <div>绿色</div>
    <div id="alert">红色</div>

    上面代码中,三个选择器都声明了--Color变量。不同元素读取这个变量的时候,会采用优先级最高的规则,因此三段文字的颜色是不一样的。

    所以一些通用的变量值,最好声明在--root{}内。

    展开全文
  • css全局变量的设置

    2021-01-06 09:45:34
    在JS中获取css中设置的全局主题颜色 //主题颜色 var themeColor = getComputedStyle(document.documentElement).getPropertyValue('--ThemeColor'); 改变主题颜色 document.documentElement.sty

    在css中设置一个主题颜色

    :root{
        /* 主题颜色 */
        --ThemeColor: #CEB88D;
    }
    

    使用:

    color:var(--ThemeColor)
    

    在JS中获取css中设置的全局主题颜色

    //主题颜色 
       var themeColor = getComputedStyle(document.documentElement).getPropertyValue('--ThemeColor');
    

    改变主题颜色

    document.documentElement.style.setProperty('--ThemeColor','red')
    
    展开全文
  • Vue修改主题&CSS全局变量

    千次阅读 2021-08-16 11:09:01
    使用CSS全局变量 用于统一修改主题色 定义: /*Vue写在App.vue的style里*/ :root { --theme-color: pink; } 使用: /*每个位置都可以这样使用,即颜色为pink*/ color: var(--theme-color); 动态修改: /*...

    Vue修改主题颜色

    使用CSS全局变量

    用于统一修改主题色

    • 定义:

      /*Vue写在App.vue的style里*/
      :root {
          --theme-color: pink;
      }
      
    • 使用:

      /*每个位置都可以这样使用,即颜色为pink*/
      color: var(--theme-color);
      
    • 动态修改:

      /*选中文档节点,好像全局变量是在html文档上的,所以可以这样动态修改*/
      document.documentElement.style.setProperty("--theme-color","yellow");
      

    Less变量:用@定义。Sass变量:用$定义

    Vue修改主题样式

    修改主题,除了颜色,可能也会改一些样式,如宽高布局

    • 方法:根据不同字段,动态引入不同CSS(Less)
    • 写在Vue.app里,使用require()引入不同规模主题样式

    修改主题遇到异步问题

    1. App.vue里,设置阀门,等需要哪套颜色的接口返回,再渲染页面

      <router-view  v-if="themeFlag" />
      
    2. 看情况,可以使用setTimeout

    通知各个组件修改主题

    • 选择Vuex状态共享
    展开全文
  • 原本我是只考虑了两个风格,然后在每个页面里做判断,后来考虑到后期可能会添加其他风格,而且这样写代码很乱还不容易维护,所以了解了一下样式的全局变量。 找了大半天less,sass的教程,功能很强大也很复杂,不...
  • 【前端】vue中使用element plus/ui的自定义全局变量样式,以及如何去修改做出自己的scss样式
  • css引入了变量,可以把反复使用的css属性值 定义成变量,然后通过变量名来引用它们 凡是css属性的标准值(比如说1px或者bold)可存在的地方,变量就可以使用 sass的变量名可以与css中的属性名和选择器名称相同,...
  • CSS变量为自定义属性,由自定义编辑设定值【--main--bg-color:#ddd;】,通过var()函数来获取值【color:var(--main-bg-...1、在css中设定全局变量和局部变量 2、.在js中获取和设置css变量 // 1.在js中获取css...
  • Css变量存储有两种应用方式,一种是全局变量和局部变量。 全局变量我们通过:root{} 存储 而局部变量设置在自己内部 比如特定的字体和背景颜色 可以这么理解设置在:rooot{}中的变量是任何变量都可以使用的 但是局部...
  • css全局变量声明

    千次阅读 2019-12-02 14:51:02
    :root css 伪类,匹配文档的根元素 , 可以用于声明全局 css 变量 CSS/CSS3 原生变量 var :root { --PC: @primary-color; } body { color: var(--PC); } 注意:作用域问题
  • 前端css定义全局变量样式并使用
  • 我想尝试将设计系统变量归结为两种类型: 全局变量和组件变量。 全局变量将使我们在组件间保持一致性。组件变量将给我们带来粒度和隔离。让我用一个相当简单的组件作为例子来告诉你怎么做。 全局变量 全系统变量是...
  • Vue 设置全局Css变量

    千次阅读 2021-11-30 11:51:54
    Vue -cli 创建的Vue 项目,由于功能需求和开发便利,需要将一些常用的css 值作为变量封装,但是在看了网上的好多文章,做了之后,一直报错 最后误打误撞,重启了项目之后,一切正常, 归咎于学识不够,我一直...
  • 这里在框架下使用为例子定义好全局css变量 :root 这个 伪类匹配文档树的根元素。对于 来说, 表示 元素,除了优先级更高之外,与 选择器相同。 自定义属性 (–*):CSS 变量 带有前缀–的属性名,比如–example–...
  • 在这个jfiddle中:CSSvar()正在使用javascript设置setProperty:// CSS::root {--footer-color: #2cba92 // default}footer {background-color: var(--footer-color)}// JS:const footer = document.querySelector('...
  • 在根元素下自定义一些变量的样式 */ :root{ border:1px solid blue;/* 设置样式 */ --bg-color:red;/* 设置自定义的样式 */ --font-size:30px; --height-min:100px; } 2.在最外层的组件入口引入即可: @...
  • } 恩,这样就行了~ 这个是实例方法 其他的属性 对象 可以参考 vue的官网 补充知识:Nuxt项目使用全局变量,函数,混合 当在Nuxt项目使用CSS预处理语言时,很有需要在全局添加变量,函数或者混合,这样子在项目的...
  • uniapp全局变量实现的四种方法

    千次阅读 2022-04-18 10:35:25
    定义一个专用的模块,用来组织和管理这些全局变量,在需要的页面引入。 注意:这种方式只支持多个vue页面或多个nvue页面之间公用,vue和nvue之间不公用。 示例如下: 在 uni-app 项目根目录下创建 common 目录,...
  • 在js中改变css中的变量

    千次阅读 2020-10-25 16:16:00
    1、在CSS中设置全局变量 :root{ --windowW:100px; --windowH:100px; } 2、在js修改CSS全局变量 //获取当前设备的宽高 var w = window.screen.availWidth; var h = window.screen.availHeight; //修改CSS中的...
  • 1.CSS全局变量 :root { --my-variable-name: #999999; } 2.js代码获取css全局变量 getComputedStyle(document.documentElement) .getPropertyValue('--my-variable-name'); // #999999 3.js代码设置css全局变量 ...
  • 定义全局变量 第一种方式: 全局变量模块文件:global.vue Global.vue文件: <script> const serverSrc='www.baidu.com'; const token='12345678'; const hasEnter=false; const userSite="中国钓鱼岛...
  • 在vue-cli 3中, 给stylus、sass样式传入共享的全局变量 在开发中有时,我们定义了大量的基础样式变量,例如: 大量的vue单文件组件会用到这些变量,每个组件都引人一次又太麻烦。全局引入是个不错的方法,于是,...
  • 小程序全局变量

    千次阅读 2021-11-11 19:02:15
    一,app.js 有globalData字段 二,其他页面 ver app =getApp() app.globalData.xxx 支持访问和修改 修改时会全局修改
  • 用局部变量覆盖全局变量 从上一页我们了解到,可以在整个文档中访问/使用全局变量,而局部变量只能在声明它的选择器内使用。 请看上一页中的例子: 实例 <!DOCTYPE html> <html> <head> <...
  • CSS变量(也被称作自定义属性或者级联变量)是由CSS开发者自定义的,它包含的值可以在整个文档中重复使用。通过两根连词线( -- )声明CSS变量(如:--footer-color: blue;),由var()函数获取值(如:background-...
  • 使用sass,stylus可以很方便的使用变量来做样式设计,其实css也同样可以定义变量,在小程序中由于原生不支持动态css语法,so,可以使用css变量来使用开发工作变简单。 基本用法 基础用法 <!--web开发中顶层变量的...
  • vite项目使用scss全局变量

    千次阅读 2021-04-14 10:30:54
    在 vite.config.js 中配置 css:{ preprocessorOptions: { scss: { additionalData: `@import "style/_style.scss";` } } } //-style.scss 中是 定义的全局变量
  • 主要介绍了微信小程序全局变量的设置、使用、修改过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • IE中CSS变量的解决方法?

    千次阅读 2021-08-04 06:52:04
    10 个答案:答案 0 :(得分:18)是的,有一种方法,就像你使任何css兼容一样:使用浏览器支持的特定css后备。body {--text-color: red;}body {color: red /* default supported fallback style */color: var(--text-...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 105,168
精华内容 42,067
关键字:

css全局变量