/**
 * 示例SCSS文件
 * 这个文件展示了如何在项目中使用SCSS
 */

// 变量定义
$primary-color: #3498db;
$secondary-color: #e74c3c;
$base-font-size: 16px;

// Mixins
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

@mixin transition($property: all, $duration: 0.3s, $timing: ease) {
  transition: $property $duration $timing;
}

// 嵌套规则
.scss-example {
  color: $primary-color;
  font-size: $base-font-size;
  @include flex-center;
  @include transition;
  
  // 嵌套选择器
  &__title {
    font-weight: bold;
    font-size: $base-font-size * 1.5;
  }
  
  &__content {
    margin-top: 10px;
    
    // 进一步嵌套
    p {
      line-height: 1.5;
    }
  }
  
  // 伪类
  &:hover {
    color: $secondary-color;
    transform: scale(1.1);
  }
}