sass变量+函数，简化代码工作量-Toy模板网

这篇具有很好参考价值的文章主要介绍了sass变量+函数，简化代码工作量。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

scss

$buttonColor: (
    primary: (
        color: var(--yakit-primary-5),
        hoverColor: var(--yakit-primary-4),
        focusShow: 0 0 10px var(--yakit-primary-2),
        backColor:#fff
    ),
    success: (
        color: var(--yakit-success-5),
        hoverColor: var(--yakit-success-4),
        focusShow: 0 0 10px var(--yakit-success-2),
        backColor:#fff
    ),
    warning: (
        color: var(--yakit-warning-5),
        hoverColor: var(--yakit-warning-4),
        focusShow: 0 0 10px var(--yakit-warning-2),
        backColor:#fff
    ),
    danger: (
        color: var(--yakit-danger-5),
        hoverColor: var(--yakit-danger-4),
        focusShow: 0 0 10px var(--yakit-danger-2),
        backColor:#fff
    )
);
$keys: map-keys($buttonColor);
$max: length($keys);
@for $i from 1 through $max {
    $name: nth($keys, $i);
    $btn: map-get($buttonColor, $name);
    .button-test-#{$name} {
        border: 1px solid;
        padding: 6px 8px;
        color: map-get($btn, "color");
        border-radius: 4px;
        background-color:map-get($btn, "backColor");
        &:hover {
            color: map-get($btn, "hoverColor");
        }
        &:focus,
        &:active {
            box-shadow: map-get($btn, "focusShow");
        }
    }
}

生成的css

.button-test-primary {
  border: 1px solid;
  padding: 6px 8px;
  color: var(--yakit-primary-5);
  border-radius: 4px;
  background-color: #fff;
}

.button-test-primary:hover {
  color: var(--yakit-primary-4);
}

.button-test-primary:focus, .button-test-primary:active {
  box-shadow: 0 0 10px var(--yakit-primary-2);
}

.button-test-success {
  border: 1px solid;
  padding: 6px 8px;
  color: var(--yakit-success-5);
  border-radius: 4px;
  background-color: #fff;
}

.button-test-success:hover {
  color: var(--yakit-success-4);
}

.button-test-success:focus, .button-test-success:active {
  box-shadow: 0 0 10px var(--yakit-success-2);
}

.button-test-warning {
  border: 1px solid;
  padding: 6px 8px;
  color: var(--yakit-warning-5);
  border-radius: 4px;
  background-color: #fff;
}

.button-test-warning:hover {
  color: var(--yakit-warning-4);
}

.button-test-warning:focus, .button-test-warning:active {
  box-shadow: 0 0 10px var(--yakit-warning-2);
}

.button-test-danger {
  border: 1px solid;
  padding: 6px 8px;
  color: var(--yakit-danger-5);
  border-radius: 4px;
  background-color: #fff;
}

.button-test-danger:hover {
  color: var(--yakit-danger-4);
}

.button-test-danger:focus, .button-test-danger:active {
  box-shadow: 0 0 10px var(--yakit-danger-2);
}