案例一：导航菜单颜色
假设我们需要为一个网站的不同部分设置相同的背景色，我们可以使用CSS预处理器的变量来定义这个颜色。这样只需要修改一次变量值即可更新所有地方的颜色。
.nav { background-color: $primary-color; }
.header { background-color: $primary-color; }
如果我们要将背景色改为深蓝色，只需要修改一次变量即可：$primary-color: #333;
案例二：字体大小与行间距
在页面中，我们经常需要为标题、正文等不同元素设置不同的字体大小和行间距。通过定义一组相关的变量，可以轻松地调整整个网站的风格。
$body-font-size: 16px;
$header-font-size: $body-font-size + 4px;
.body-text { font-size: $body-font-size; line-height: 1.5; }
.header-text { font-size: $header-font-size; line-height: 1.2; }
通过这种方式，如果需要统一调整字体大小，只需修改一个变量即可实现。
案例三：响应式设计中的媒体查询
在进行响应式设计时，我们经常需要为不同的屏幕尺寸设置不同的样式。这时可以使用变量来定义不同尺寸下的宽度和间距等值。
$md-screen: 768px;
@media (min-width: $md-screen) { .container { width: calc(100% - 2rem); }
这样，当屏幕宽度达到或超过768px时，容器的宽度会根据变量自动调整。
总结
通过上述案例可以看出，合理使用CSS预处理器的变量不仅可以提高代码效率，还能增强项目的可维护性和扩展性。关键在于：定义清晰的命名规范、避免过度复杂化。