5

SASS 用の有効な box-shadow @mixin を見つけようとしています。

私の CodePen: http://codepen.io/leongaban/pen/nCDos


stackoverflow で、この質問を見つけ、それとその回答を正確に使用しましたが、まだ次のエラーが発生しています。

ここに画像の説明を入力

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

.login_window {
    width: 200px; height: 100px; background: red;

    @include box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.5));
}

どのように書きますか？

4

4 に答える 4

0

柔軟性を高めるために、スプレッド ( https://www.w3schools.com/cssref/css3_pr_box-shadow.asp )という別の引数を追加することをお勧めします。

@mixin box-shadow($top, $left, $blur, $spread, $color, $inset: false) {
  @if $inset {
    -webkit-box-shadow: $top $left $blur $spread $color inset;
    -moz-box-shadow: $top $left $blur $spread $color inset;
    box-shadow: $top $left $blur $spread $color inset;
  } @else {
    -webkit-box-shadow: $top $left $blur $spread $color;
    -moz-box-shadow: $top $left $blur $spread $color;
    box-shadow: $top $left $blur $spread $color;
  }
}

これで、あらゆる種類のボックス シャドウを実際に生成できる mixin ができました。

于 2018-11-16T10:28:58.410 に答える