scss 实用技巧合集 (持续更新中...)

静静子~

已于 2022-11-11 12:01:25 修改

阅读量331

点赞数 1

文章标签： scss 前端

于 2022-11-11 11:44:51 首次发布

本文链接：https://blog.csdn.net/qq_36963245/article/details/127803041

版权

一、@mixin 、map 与 @each

@mixin 可以将公共的CSS提取出来，在需要的地方 @include 就可以引入
scss mixin用法

功能说明：有 primary、success、warning、danger 四种主题色，button 组件可配置 theme，根据不同的 theme 显示不同的背景色与 hover 背景色

<button :class="'button-' + theme"></button>

// 定义一个 theme 的 map，scss 中，$each 可遍历 map
$theme-colors: () !default;
$theme-colors: map.merge(
    (
        'primary': '#00aaff',
        'success': '#2dbcff',
        'warning': '#ffcd5d',
        'danger': '#ff7575'
    ),
    $theme-colors
);

// 遍历 theme 的 map， 定义相应的样式类
@each $theme, $value in $theme-colors {
     .button-#{$theme} {
         @include button-variant($value, rgba($value, 0.1));
    }
}

// 定义一个 mixin 函数，根据传入的值，动态定义样式
@mixin button-variant($bg-color, $hover-bg-color) {
    background: $bg-color;
    &:hover {
        background: $hover-bg-color;
    }
}