重拾CSS，前端样式精读-函数（颜色，计算，图像和图形）

/* 定义一个颜色函数，用于颜色的变化 */
@function color-variation($amount: 10%) {
  @return color-mod(#0066cc + $amount, saturate $amount, lighten $amount);
}
 
/* 使用颜色函数 */
body {
  color: color-variation(20%);
  background-color: color-variation(-20%);
}
 
/* 定义一个计算函数，用于计算宽度 */
@function calculate-width($base-width) {
  @return $base-width * 2;
}
 
/* 使用计算函数 */
.some-selector {
  width: calculate-width(50px); // 结果为 100px
}
 
/* 定义一个图片函数，用于生成不同尺寸的图片 */
@function image-size($image, $width: 100px, $height: 100px) {
  @return url('../img/#{$image}?w=#{$width}&h=#{$height}');
}
 
/* 使用图片函数 */
.logo {
  background-image: image-size('logo.png', 200px, 100px);
}
 
/* 定义一个图形函数，用于创建矩形 */
@function rectangle($width, $height) {
  width: $width;
  height: $height;
  background-color: #333;
}
 
/* 使用图形函数 */
.rectangle-box {
  // 这里我们不是返回一个值，而是将这个mixin应用到.rectangle-box上
  @include rectangle(100px, 50px);
}

这个例子展示了如何在CSS中定义和使用函数来处理颜色、计算、图片处理和图形绘制。这些函数可以用于简化代码和提高样式表的灵活性。