zoukankan      html  css  js  c++  java
  • css变量的使用

    css变量的使用

    1.介绍我们也可以在css中定义变量,和less、sass一样,通过--来定义变量

    div {
    
        /*  开始定义变量 */
    
        --color: red;
    
        /* 通过var()函数来使用变量,第二个参数指定默认值  */
    
        color: var(--color, green)
    }
    
    
    /* 也可以将变量定义到跟部中,这样所有的选择器都可以使用 */
    
    :root {
    
        --color: red;
    
        --foo: 20px;
    }
    
    div {
    
        color: var(--color)
    
        font-size: var(--foo)
    }
    
    p {
    
        color: var(--color)
    
        font-size: var(--foo)
    }
    
    
    
    /* 使用乘除加减计算px,此时必须使用calc()函数 */
    
    
    div {
    
    
        --foo: 20;
    
        font-size: calc(var(--foo) * 6px);
    }
    
    
    
    /*  定义响应式的变量  */
    
    @media screen and (max- 768px) {
    
       body {
    
           --backColor: red;
       }
    }
    
    
    body {
    
      background: var(--backColor);
    }
    
    
    
    /* @supports是CSS3新引入的规则之一,主要用于检测当前浏览器是否支持某个CSS属性并加载具体样式. */
    
    
    @supports (display: flex) {
    
       .div {
    
           color: red;
       }
    }
  • 相关阅读:
    CVS使用经验谈(zz from chinaunix.net)
    登黄山
    登黄山之二
    Dennis Ritchie 去世
    观迎客松
    从程序员角度看ELF
    再次回到这里
    异步时钟下跨时钟域信号处理
    Fedora14下的Novas和Synopsys
    Oralce导入\导出
  • 原文地址:https://www.cnblogs.com/zxuedong/p/12972286.html
Copyright © 2011-2022 走看看