6

SASSを使い始めたばかりで、ボックスシャドウミックスインを作成する方法を見つけようとしています...

このミックスインを別のスタックオーバーフローポストからコピーしました。

@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};
    }

しかし、私は自分のフォーマット方法が正確にわかりません@include

これは私の@includeのためにこれまでに持っているものです

@include box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);

そして、これは私の出力エラーです...

error(Line 1003: Invalid CSS after "...lude box-shadow": expected "}", was ": inset 0 1px 1...")
4

5 に答える 5

17

構文が正しくありません。

使用する@include box-shadow(0, 1px, 1px, rgba(0, 0, 0, 0.075), inset);

（2014年に編集され、過去数年間に行われたSassの構文への変更が含まれています）

于 2012-05-03T16:14:48.390 に答える
9

私はSassを初めて使用し、受け入れられた答えは私にはうまくいきませんでした。値の順序が間違っているように見え、値の後にコンマも必要です。私は以下を使用しました：

@include box-shadow(0, 1px, 1px, rgba(0, 0, 0, 0.075), inset);
于 2013-07-28T04:48:36.970 に答える
4

私はあなたがいくつかのデフォルトを含めるべきだと思います：

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

そうすれば、同じコードを使用する場合に毎回オプションを設定する必要はありません。

.your-selector {
    @include box-shadow();
}

オプションの順序も修正しました。通常、水平は垂直の前に表示されます。

于 2014-09-29T11:45:32.363 に答える
0

2016年には、受け入れられた回答から状況が再び変わったようです。ここでコンパスのドキュメントと例を参照すると、SCSSファイルで次のことが機能します。

@include box-shadow(rgba(0, 0, 0, 0.075)0 0 3px 1px inset);

その影は非常に薄いので、実際に使用しました：

@include box-shadow(rgba(0, 0, 0, 0.75)0 0 3px 1px inset);

複数のシャドウの場合： 各シャドウをコンマで区切ります。

@include box-shadow(rgba(0, 0, 0, 0.75)0 0 3px 1px inset, rgba(blue, 0.4) 0 0 5px 5px);

于 2016-03-16T20:59:01.537 に答える
-1

「シルバーバック」の例は次のとおりです。

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

'pixel67'がコメントした忘れられたコンマが含まれています。

于 2014-05-08T20:28:02.200 に答える