/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 vote234 views2 answers
Not clickable css
CSS
0 vote200 views1 answer
Compass font awesome
CSS
0 vote195 views2 answers
Easyui datagrid header field color
CSS
4 votes194 views2 answers
Bootstrap icons sdn
CSS
2 votes144 views1 answer
Xpath vs css selector
CSS
1 vote198 views1 answer
How to make font awesome responsive bootstrap
CSS
0 vote195 views1 answer
CSS - The Class Selectors - Element
CSS
0 vote178 views1 answer
Body css margin, background, font-family, hei
CSS
0 vote285 views1 answer
Width clamp css
CSS
0 vote217 views1 answer
ForEach In a forEach method, we pass each food type within that iteration into the callback. A for loop needs you to access the array using a temporary i variable.
CSS