Define variables in css

Define variables in css

Defined variables can be divided into a variety of situations:

1, the definition of global variables

:root {
  --borderColor: #ccc;
}

2, an element in the definition of variables

.look{
  --borderColor: #ccc;
}

3, under the definition of a media query variables

@media screen and (min-width: 1025px) { 
    :root { 
        --borderColor: #ccc;
　　 }
}

use:

.has-border-table > tr > td {
  border-right: 1px solid var(--borderColor);
}

less defined variables

definition:

@bg-color : #d9d9d9;

use:

.has-border-table > tr > td {
  border-right: 1px solid var(@bg-color);
}

sass defined variables

definition:

$bg-color : #d9d9d9;

use:

.has-border-table > tr > td {
  border-right: 1px solid var($bg-color);
}