CSS Variables(variable_before, variable_after)_dreamcoding

Before

    <style>

      .first-list {

        background-color: thistle;

        color: whitesmoke;

        margin-left: 8px;

      }

 

      .second-list {

        background-color: thistle;

        color: whitesmoke;

        margin-left: 16px;

      }

    </style>

After

    <style>

      :root {

        --background-color: thistle;

        --text-color: whitesmoke;

        --base: 8px;

      }

      .first-list {

        background-color: var(--background-color);

        color: var(--text-color, red);

        margin-left: var(--base);

      }

 

      .second-list {

        background-color: var(--background-color);

        color: var(--text-color, red);

        margin-left: calc(var(--base) * 2);

      }

 

      @media screen and (max-width: 768px) {

        :root {

          --background-color: salmon;

          --text-color: whitesmoke;

          --base: 4px;

        }

      }

    </style>

브라우저를 줄이다가 일정한 크기가 되면 색깔이 변한다