在Web開發中，經常需要對價格進行計算。對于每個商品的價格，我們可以使用單價、數量和總價來進行表示。其中，單價指每個商品的價格，數量指購買的數量，總價指購買了這么多數量的商品的總價格。

在CSS中，我們可以使用計算屬性對單價、數量和總價進行計算。其中，計算屬性是一種特殊的CSS屬性，可以根據其他屬性的值來計算出一個新的值。

.price {
/* 定義單價為100元 */
--unit-price: 100;
/* 定義數量為5個 */
--quantity: 5;
/* 計算總價 */
--total-price: calc(var(--unit-price) * var(--quantity));
}
.price::before {
/* 在元素前面顯示總價 */
content: '總價為：' var(--total-price) '元';
}

在上面的代碼中，我們首先定義了單價和數量的值，然后使用calc()函數計算出總價的值。

接著，我們使用::before偽元素，在元素前面顯示出總價的值。

在實際應用中，我們可以根據不同的商品，設置不同的單價和數量來計算出不同的總價。