面试题：CSS预处理器SASS/SCSS混合的复杂应用

Question

假设要实现一个响应式的按钮样式，不同屏幕尺寸下按钮有不同的字体大小、内边距和边框半径。请使用SASS/SCSS的混合（Mixin）功能来创建一个可复用的按钮样式模块，在不同媒体查询条件下调用该混合并设置合适的参数。

Answer 1

// 定义一个混合（Mixin）
@mixin button-style($font-size, $padding, $border-radius) {
  font-size: $font-size;
  padding: $padding;
  border-radius: $border-radius;
}

// 定义按钮基础样式
.button {
  background-color: blue;
  color: white;
  border: none;
  cursor: pointer;

  // 小屏幕
  @media (max-width: 600px) {
    @include button-style(14px, 8px 16px, 4px);
  }

  // 中等屏幕
  @media (min-width: 601px) and (max-width: 992px) {
    @include button-style(16px, 10px 20px, 6px);
  }

  // 大屏幕
  @media (min-width: 993px) {
    @include button-style(18px, 12px 24px, 8px);
  }
}