Sass变量和Mixin的灵活运用与示例代码

Sass是一种CSS预处理器，能够增强CSS的功能。其中，变量和Mixin是Sass中强大的功能，能够简化样式表的编写，提高代码的可维护性和重用性。变量允许定义可重复使用的值，Mixin则允许定义可重用的样式代码块。

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

// 定义Mixin
@mixin button-styles($bg-color, $text-color) {
  background-color: $bg-color;
  color: $text-color;
  padding: 10px 20px;
  border-radius: 5px;
  &:hover {
    opacity: 0.8;
  }
}

// 使用Mixin创建不同样式的按钮
.button-primary {
  @include button-styles($primary-color, #fff);
}

.button-secondary {
  @include button-styles($secondary-color, #000);
}

免责申明：文章和图片全部来源于公开网络，如有侵权，请通知删除 server@dude6.com