CSS中使用高寬變量是一項非常有用的技巧，可以幫助我們更加方便地定義和管理元素的尺寸。

:root {
--width: 200px;
--height: 100px;
}
.box {
width: var(--width);
height: var(--height);
}

如上所示，我們在:root偽類中添加了兩個變量：--width和--height。我們可以根據需求修改這些變量的值，而不用在多個元素中一個一個地修改width和height屬性。

在.box類中，我們使用var()函數調用了這兩個變量，從而將寬度和高度應用到元素上。這樣，如果我們需要對元素的尺寸進行調整，只需要修改這兩個變量的值即可。

使用高寬變量還能幫助我們實現響應式設計。例如，在mobile設備上，我們可以重新定義這些變量的值，使元素在不同的屏幕尺寸下擁有不同的寬度和高度。

@media screen and (max-width: 600px) {
:root {
--width: 100px;
--height: 50px;
}
}

如上所示，我們使用@media查詢，當屏幕寬度小于600px時，重新定義了--width和--height變量的值。這樣，我們可以實現在mobile設備上的優秀布局。

總之，使用高寬變量可以幫助我們更好地管理和修改元素的尺寸，同時也可以實現響應式設計。這是一項非常實用的技巧，值得我們掌握和運用。