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;
   }
}