css变量的使用

Posted on
2020-05-27 13:23 
张雪冬前端学习园地 
阅读(…) 
评论(…) 
编辑 
收藏

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-width: 768px) {

   body {

       --backColor: red;
   }
}


body {

  background: var(--backColor);
}



/* @supports是CSS3新引入的规则之一，主要用于检测当前浏览器是否支持某个CSS属性并加载具体样式. */


@supports (display: flex) {

   .div {

       color: red;
   }
}

 

版权声明：本文为zxuedong原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/zxuedong/p/12972286.html