SCSS变量类名称

// 定义全局变量
$primary-color: #3498db;
$secondary-color: #2ecc71;
$font-stack: 'Helvetica Neue', Helvetica, Arial, sans-serif;

body {
  font-family: $font-stack;
  color: $primary-color;
}

button {
  background-color: $secondary-color;
  color: white;
  padding: 10px 20px;
}

// 错误示例
$primary-color: #3498db;

body {
  color: $primay-color; // 拼写错误
}

// 正确示例
$primary-color: #3498db;

body {
  color: $primary-color;
}

// 错误示例
$primary-color: #3498db;

.container {
  $primary-color: #e74c3c; // 覆盖外部变量
  background-color: $primary-color;
}

// 正确示例
$primary-color: #3498db !default;

.container {
  $primary-color: #e74c3c;
  background-color: $primary-color;
}