/CSS/How to do addition or subtraction on CSS Variables?

How to do addition or subtraction on CSS Variables?

:root {
  --margin: 50px;
}

body {
  margin: 0 100px;
  border:1px solid;
}

.box-1 {
  background: red;
  height: 100px;
  width: 200px;
  margin-left: calc(-1 * var(--margin));
}

.box-2 {
  background: green;
  height: 100px;
  width: 200px;
  margin-left: calc(-1 * (-1 * var(--margin))); /* You can also nest calculation */
}

Source: stackoverflow.com

How to do addition or subtraction on CSS Variables?

:root {
  --margin: 50px;
  --margin--: calc(var(--margin) * -1));
 /* 
 while you may simply write like below
 but I love to use as above 
 coz, we'll only need to change value 
 in one place if needed
 */
 /* --margin--: -50px; */
}

.positive-margin {
  margin: var(--margin);
}
.negative-margin {
  margin-left: var(--margin--);
}

Source: stackoverflow.com

Similar codes

0 vote342 views2 answers
How to remove text style on td in angularjs
CSS
1 vote289 views1 answer
Javascript read me text
CSS
8 votes334 views3 answers
Background image fill div
CSS
32 votes340 views6 answers
Css font face
CSS
67 votes316 views6 answers
Center absolute
CSS
74 votes353 views6 answers
Flex css
CSS
113 votes301 views5 answers
Padding css
CSS
35 votes396 views3 answers
What does class="d-none d-md-block" mean in bootstrap?
CSS Bootstrap
5 votes317 views3 answers
Keep background image fixed during scroll using css
CSS
0 vote326 views1 answer
Adding diffent style in firefox css
CSS