如何配置变量，如颜色、填充，、页边距和更多在项目中使用原始码的scss？

// _variables.scss

// 颜色变量
$primary-color: #3498db;
$secondary-color: #2ecc71;
$background-color: #ecf0f1;

// 填充变量
$padding-small: 10px;
$padding-medium: 20px;
$padding-large: 30px;

// 页边距变量
$margin-small: 10px;
$margin-medium: 20px;
$margin-large: 30px;

// main.scss

@import 'variables';

// _styles.scss

body {
  background-color: $background-color;
  color: $primary-color;
  padding: $padding-medium;
}

h1 {
  color: $secondary-color;
  margin-bottom: $margin-large;
}

// _mixins.scss

@mixin margin($size) {
  margin: $size;
}

@mixin padding($size) {
  padding: $size;
}

// main.scss

@import 'variables';
@import 'mixins';

// _styles.scss

.container {
  @include padding($padding-medium);
}

.button {
  @include margin($margin-small);
}

sass main.scss main.css