如何为 CSS 阴影创建 @mixin答案

【问题标题】：How to create a @mixin for CSS dropshadow如何为 CSS 阴影创建 @mixin
【发布时间】：2021-12-30 20:29:29
【问题描述】：

我无法为投影创建 @mixin。我想要的常规CSS中的阴影如下

-webkit-box-shadow: 0px 2px 3px 2px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 2px 3px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0px 2px 3px 2px rgba(0, 0, 0, 0.2);

我创建的@mixin就是这样

@mixin box-shadow(
    $top, $left, $blur, $size, $color) {
}

然后为了使用它，我将以下内容添加到我的 scss 文件中

@include box-shadow(0, 2px, 3px, 2px, rgba(0, 0, 0, 0.2));

但是，它被破坏了，因为一旦 SCSS 被编译，我看不到任何阴影 CSS 被应用。

【问题讨论】：

您好，您能提供我们生成的 CSS 文件吗？

标签： css sass scss-mixins

【解决方案1】：

试试这个：Fiddle

@mixin box-shadow($top, $left, $blur, $size, $color) {
   -webkit-box-shadow: $top $left $blur $size $color;
   -moz-box-shadow: $top $left $blur $size $color;
   box-shadow: $top $left $blur $size $color;
}

.box{
  width:150px;
  height:150px;
  background:blue;
  @include box-shadow(2px,2px,5px,0, rgba(0,0,0,0.6));
}

【讨论】：

这个答案对我有用。谢谢你和所有帮助过的人:)
接受有用的答案。只需点击下方的绿色标志上下投票即可。

【解决方案2】：

看起来你没有在你的 mixin 中声明 box-shadow 规则。

应该是这样的：

@mixin box-shadow($top, $left, $blur, $size, $color) {
  box-shadow: $top $left $blur $size $color
}

根据需要添加供应商前缀。

fiddle

【讨论】：

【解决方案3】：

我用这个

/* BOXSHADOW */
@mixin boxshadow(@x: 0, @y: 0, @blur: 0, @spread: 0, @rgba: rgba(0, 0, 0, 1.0)) {
  -webkit-box-shadow: @x*@rem @y*@rem @blur*@rem @spread*@rem @rgba;
  -moz-box-shadow:    @x*@rem @y*@rem @blur*@rem @spread*@rem @rgba;
  box-shadow:         @x*@rem @y*@rem @blur*@rem @spread*@rem @rgba;
}

@include boxshadow(0, 0, 10, -5, rgba(220, 220, 220, 1.0));

【讨论】：

Ekks .. 谢谢，但这似乎真的很糟糕:(

【解决方案4】：

您可以尝试使用Compass。它为最常见的 CSS 规则提供了很多 mixin，包括 box-shadow。它还在使用其 mixins 时透明地添加跨浏览器前缀。

【讨论】：