How to Use Variable in CSS

How to use variable in CSS?

For that you need to use Less or Sass which are CSS Dynamic languages.

here's some comparison between both technologies.

Using CSS variable in CSS rotate function

You should use either attributes or CSS for styling.

As you can see from the two examples styling can either be defined as part of the SVG or in a separate stylesheet.

When using CSS variables/values need to specify that it is a number of degrees (like 20deg).

:root {
  --armangle: 20deg;
}

<svg viewBox="0 0 3 3" width="200" height="200">
  <style>
    path {
      transform: rotate(var(--armangle));
    }
  </style>
  <path d="M 0 0 L 0 1 L 1 1 L 1 0 Z" stroke="#442200"
    stroke-width=".1" fill="none" transform-origin="32.5% 60%"/>
</svg>

How can I change CSS variable on button click?

You are trying to change the value of one variable with another variable.

You will need getComputedStlye():

:root{
    --in: inset 25px 25px 60px red;
    --out: inset -25px -25px 60px green;
}
.color_1{
    background-color: blue;
    border-radius: 200px;
    height: 300px;
    width: 300px;
    box-shadow: var(--out);
}

<body>
<section>
<button class="color_1">

</button>

<script>
    const btn = document.querySelector('button')
    const state = '--out'
    btn.addEventListener('click', _ =>{  document.documentElement.style.setProperty(state, getComputedStyle(document.documentElement).getPropertyValue('--in'));
    });
</script>

</section>
</body>

How to use JavaScript variable in CSS style?

var color = "#00f";$("#button").click(function(){  $("div").css({"border": "5px solid " + color});});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><button id="button">Add Border</button><div>Hi, I am a div</div>

How to Use Variable in CSS

How to use variable in CSS?

Using CSS variable in CSS rotate function

How can I change CSS variable on button click?

How to use JavaScript variable in CSS style?

Related Topics

Leave a reply