CSS预处理器中的变量和函数有什么作用

当然，以下是一个简单的示例，展示了在Sass（一种流行的CSS预处理器）中如何使用变量和函数。

变量示例
scss
// 定义变量  
$primary-color: #333;  
$font-stack:    Helvetica, sans-serif;  
$font-size:     16px;  
  
// 使用变量  
body {  
  color: $primary-color;  
  font: $font-size/1.5 $font-stack;  
}  
  
h1 {  
  color: lighten($primary-color, 10%); // 使用内置的颜色函数  
}
编译后的CSS代码：

css
body {  
  color: #333;  
  font: 10.66667px/1.5 Helvetica, sans-serif;  
}  
  
h1 {  
  color: #595959;  
}
函数示例
Sass 提供了一些内置函数，如颜色函数、字符串函数和数学函数等。此外，你也可以自定义函数。以下是一个使用内置数学函数的例子和一个自定义函数的例子。

内置函数示例
scss
// 使用内置的数学函数计算宽度  
$width: 100px;  
$margin: 20px;  
  
.container {  
  width: $width - $margin; // 使用减法函数  
  padding: $margin / 2;    // 使用除法函数  
}
编译后的CSS代码：

css
.container {  
  width: 80px;  
  padding: 10px;  
}
自定义函数示例
scss
// 自定义一个函数，用于计算带有em单位的字体大小  
@function em($pixels, $context: 16px) {  
  @return $pixels / $context * 1em;  
}  
  
body {  
  font-size: 16px; // 上下文字体大小  
}  
  
h1 {  
  font-size: em(24px); // 使用自定义函数计算em值  
}
编译后的CSS代码：

css
body {  
  font-size: 16px;  
}  
  
h1 {  
  font-size: 1.5em;  
}
请注意，为了使用Sass或任何CSS预处理器，你需要安装相应的工具链（例如，对于Sass，你需要安装Node.js和npm，然后使用npm安装Sass）。然后，你可以使用命令行工具将Sass代码编译成CSS代码，或者在开发过程中使用实时编译工具（如Webpack的sass-loader）。

在开发过程中，预处理器还提供了诸如嵌套规则、混合（mixin）、扩展/继承等更多高级功能，这些功能可以进一步提高CSS代码的可维护性和可重用性。