Сасс, как правильно называть миксин?

Я только начал использовать SASS, и я пытаюсь выяснить, как создать box shadow mixin...

Я скопировал этот mixin из другого сообщения переполнения стека..

@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...")
6
sass

5 ответов

плохой синтаксис.

использовать @include box-shadow(0, 1px, 1px, rgba(0, 0, 0, 0.075), inset);

(отредактировано в 2014, чтобы включить изменения в синтаксис Sass, сделанные за последние несколько лет)

17

Я новичок в Sass, и принятый ответ не сработал для меня; порядок значений выглядит неправильно,и значения также требуют запятых после каждого. Я использовал следующее:

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

Я думаю, вы должны включить некоторые значения по умолчанию:

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

Я также исправил порядок опций: горизонтальная обычно появляется перед вертикальной.

4

в 2016 году, похоже, что вещи снова изменились от принятых ответов. Referecing Compass документация и вот примеры:, в файле 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);

0

для' Silverback ' примером может быть:

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

Он включает в себя забытые запятые, которые прокомментировал "пиксель 67".

-1