<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
* {
	box-sizing: border-box;
}

$width: 600px;
$halfWidth: $width / 2;

:root {
	--halfWidth: $width / 2;
}

.box1 {
	width: $halfWidth;
	height: 200px;
	background-color: red;
	margin: 3em;
}

.box2 {
	width: var(--halfWidth); // this isn’t valid
	height: 200px;
	background-color: blue;
	margin: 3em;
}

.box3 {
	// --halfWidth: calc($wrapper / 2); would not be valid
	--halfWidth: calc(600px / 2);
	width: var(--halfWidth);
	height: 200px;
	background-color: mediumPurple;
	margin: 3em;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.