SASS, Jaki jest prawidłowy sposób wywoływania mixin?

Question

Właśnie zaczął używać SASS i próbuję dowiedzieć się, jak stworzyć mixin shadow box ...

skopiowałem ten wstawek z innym stanowisku przepełnienie stosu ..

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

Jednak ja nie jestem pewien dokładnie, jak sformatować @include

to, co mam tak daleko do mojego @include

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

I to jest mój błąd wyjścia ...

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

Answer 1

Bad składnia.

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

(Edytowane w 2014 roku w celu uwzględnienia zmian składni Sass' wykonana w ciągu ostatnich kilku lat)

Answer 2

Jestem nowy Sass i zaakceptowane odpowiedź nie działa na mnie; kolejność wartości wygląda źle, a wartości również wymagają przecinków po każdym. Użyłem następujących czynności:

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

Answer 3

Dla '' Silverback przykład byłoby:

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

Obejmuje ono zapomniane przecinki, że 'piksel 67' skomentował.

Answer 4

myślę, że należy to niektóre domyślne:

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

W ten sposób, nie trzeba ustawić opcje za każdym razem, gdy chcesz użyć tego samego kodu:

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

I poprawiono również kolejność opcji: pozioma normalnie pojawia się przed pionem.

Answer 5

W 2016 r. Wygląda na to, że rzeczy zmieniły się ponownie z zaakceptowanych odpowiedzi. Referecing dokumentację kompas i examples here dodaje zadziała w pliku SCSS:

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

że cień jest bardzo słaby, więc faktycznie wykorzystane:

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

Dla wielu cieni: Oddziel każdy cień przecinkiem.

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