在 CSS 中寫表達式可以讓我們更加簡便地控制元素的樣式。下面就是一些方法：

/* 方法一 */
/* 計算值 */
height: calc(100% - 20px);
/* 三目運算符 */
color: var(--primary-color, red);
/* 方法二 */
/* JS 表達式 */
width: calc(50% + #{200});
background: #{'url(' + image.src + ')'};

方法一是 CSS 原生支持的，使用 calc() 函數和 var() 函數實現，其中 calc() 函數可將各種算術表達式作為值，var() 函數則用于獲取自定義屬性的值。比如在以上代碼中，height 會被設置為占容器高度的 80%，即 100% 減去 20px 的高度；color 的取值，將會是頁面中 --primary-color 變量的值，如果該變量未定義或為空，則使用默認值 red。

方法二則是利用 Sass 或其他預處理器的功能，將 JS 代碼嵌入樣式中。其中 #{...} 的語法用于將表達式輸出到 CSS 文件中，可以將 Sass 中的變量或函數與 JS 結合起來使用。比如，width 的計算結果就是 50% 加上 200px 的值；background 利用 JS 拼接字符串實現，將一個動態圖片地址替換原本的固定值。