Несколько объявлений с тенью в Сассе

Я хотел бы создать Sass mixin для свойства box-shadow, но я столкнулся с некоторыми проблемами. Некоторые из существующих кодов выглядят следующим образом.

#someDiv {
  -moz-box-shadow:0 0 5px rgba(0,0,0,.25);
}

#someOtherDiv {
  -moz-box-shadow:0 0 5px rgba(0,0,0,.25) inset;
}

#theLastDiv {
  -moz-box-shadow: 0 0 5px rgba(0,0,0,.25), 0 1px 0 rgba(255,255,255,.2) inset;
}

Попытка бросить все это в 1 mixin становится проблематичной. Документация по использованию логики в mixins довольно скудна.

Я хотел бы создать некоторый mixin по строкам:

@mixin boxShadow($xOffSet, $yOffSet, $blur, $red, $green, $blue, $opacity, $inset : false) {
  @if $inset == true {
    -moz-box-shadow: #{$xOffSet}px #{$yOffSet}px #{$blur}px rgba($red,$green,$blue) inset;
  } @else {
    -moz-box-shadow: #{$xOffSet}px #{$yOffSet}px #{$blur}px rgba($red,$green,$blue);
  }
}

Это ошибка, потому что я думаю, что Sass не может оценить переменную $вставки.

В предыдущем примере показана только проблема, с которой я сталкиваюсь, когда она вставляется в рамку-тень, или нет. Другая проблема, с которой я сталкиваюсь, - это когда в одном элементе объявляется несколько теней. Обратитесь к #theLastDiv, описанному выше, если для справки.

@mixin boxShadow($declarations : 2, $xOffSet1, $yOffSet1, $blur1, $red1, $green1, $blue1, $opacity1 $xOffSet2, $yOffSet2, $blur2, $red2, $green2, $blue2, $opacity2) {
  @if $declarations == 1 {
    -moz-box-shadow: #{$xOffSet}px #{$yOffSet}px #{$blur}px rgba($red,$green,$blue);
  } @else if $declarations == 2 {
    -moz-box-shadow: #{$xOffSet1}px #{$yOffSet1}px #{$blur1}px rgba($red1,$green1,$blue1), #{$xOffSet2}px #{$yOffSet2}px #{$blur2}px rgba($red2,$green2,$blue2);
  }

Иногда элемент имеет одну коробчатую тень, а в других случаях он должен отделять тени. Я ошибаюсь, что Сасс не обладает способностью расшифровать эту логику, и для достижения этого потребуются отдельные Mixins (один для элементов с одной теневой коробкой, другой для mixins с двумя тенями коробок).

И чтобы усложнить этот вопрос, как описывается выше проблема непрозрачности? Хотелось бы получить некоторые отзывы об этом. Дайте мне знать, если я ошибаюсь, или то, как я думаю о проблеме, является недостатком в целом. Спасибо!

Ответы

Ответ 1

Я предпочитаю хранить базовый параметр CSS без запятых: 0 0 1px rgba(0, 0, 0, .5) а не с запятыми: 0, 0, 5, 0, 0, 0, .25.

Это мое решение:

@mixin box-shadow($shadow1, $shadow2:false, $shadow3:false, $shadow4:false, $shadow5:false) {
 $params: $shadow1;
  @if $shadow2 
    { $params: $shadow1, $shadow2; }
    @if $shadow3 != false
      { $params: $shadow1, $shadow2, $shadow3; }
      @if $shadow4 != false
        { $params: $shadow1, $shadow2, $shadow3, $shadow4; }
        @if $shadow5 != false
          { $params: $shadow1, $shadow2, $shadow3, $shadow4, $shadow5; }

  -webkit-box-shadow: $params;
     -moz-box-shadow: $params;
          box-shadow: $params;

}

@include box-shadow(-1px -1px 2px rgba(0, 0, 0, .05), 0 1px 1px white inset), ...

Ответ 2

Вы можете использовать переменную аргумент следующим образом:

// Box shadows
@mixin box-shadow($shadow...) {
  -webkit-box-shadow: $shadow;
     -moz-box-shadow: $shadow;       
          box-shadow: $shadow;
}

Это позволяет вам иметь запятые в переданном аргументе. поэтому вы можете передать все тени, которые вы хотите.

Пример использования:

@include box-shadow(2px 2px 2px rgba(#ccc, .8), -2px -2px 2px rgba(#ccc, 0.8)) ;

Перейдите в цветовые переменные следующим образом:

$shadow-color: red;  // could also be a #F9F8F6 type color
@include box-shadow(0 2px 2px rgba($shadow-color, .9));

ОБНОВЛЕНИЕ

$shadow-color: red;  // could also be a hex (like #F9F8F6) type color
@include box-shadow(0 2px 2px rgba($shadow-color, .9));

Если вы не видели аргументы с elipsis, допускающие переменное количество аргументов до (т.е. splats), проверьте эту ссылку: http://sass-lang.com/documentation/file.SASS_CHANGELOG.html#variable_keyword_arguments

Ответ 3

Вы можете использовать коллекции и иметь только один параметр:

@mixin box-shadow($params) {
  -webkit-box-shadow: $params;
  -moz-box-shadow: $params;
  box-shadow: $params;
}

$shadows: 0px 0px 5px rgba(0, 0, 0, 0.25), 0px 1px 0px #000 inset;

.myclass { 
   @include box-shadow($shadows);
}

Ответ 4

Я добавил немного логики для обработки описанных вами случаев. Вот mixin:

@mixin boxShadow($xOffSet, $yOffSet, $blur, $red, $green, $blue, $opacity, $inset : false, $two : false, $xOffSet2 : 0, $yOffSet2 : 0, $blur2 : 0, $red2 : 0, $green2 : 0, $blue2 : 0, $opacity2 : 0, $inset2 : false) {
  @if $inset {
    @if $two {
        @if $inset2 {
            -moz-box-shadow: #{$xOffSet}px #{$yOffSet}px #{$blur}px rgba($red,$green,$blue, $opacity) inset, #{$xOffSet2}px #{$yOffSet2}px #{$blur2}px rgba($red2,$green2,$blue2, $opacity2) inset;
        } @else {
            -moz-box-shadow: #{$xOffSet}px #{$yOffSet}px #{$blur}px rgba($red,$green,$blue, $opacity) inset, #{$xOffSet2}px #{$yOffSet2}px #{$blur2}px rgba($red2,$green2,$blue2, $opacity2);
        }
    } @else {
        -moz-box-shadow: #{$xOffSet}px #{$yOffSet}px #{$blur}px rgba($red,$green,$blue, $opacity) inset;
    }
  } @else {
    @if $two {
        @if $inset2 {
            -moz-box-shadow: #{$xOffSet}px #{$yOffSet}px #{$blur}px rgba($red,$green,$blue, $opacity), #{$xOffSet2}px #{$yOffSet2}px #{$blur2}px rgba($red2,$green2,$blue2, $opacity2) inset;
        } @else {
            -moz-box-shadow: #{$xOffSet}px #{$yOffSet}px #{$blur}px rgba($red,$green,$blue, $opacity), #{$xOffSet2}px #{$yOffSet2}px #{$blur2}px rgba($red2,$green2,$blue2, $opacity2);
        }
    } @else {
        -moz-box-shadow: #{$xOffSet}px #{$yOffSet}px #{$blur}px rgba($red,$green,$blue, $opacity);
    }
  }
}

Миксин принимает 17 параметров. Извините за то, что у вас так много, но SASS не обрабатывает массивы или объекты. В любом случае 10 необязательны. Это:

$xOffSet - смещение x первой тени
$yOffSet - смещение y второй тени
$blur - размытие первой тени
$red - красное значение первой тени
$blue - синее значение первой тени
$green - зеленое значение первой тени
$opacity - непрозрачность первой тени
$inset (Необязательно) - True или False. Указывает, должна ли первая тень быть вставкой (по умолчанию установлено значение false)
$two (необязательно) - True или False - True, если вы хотите определить две границы (по умолчанию - false)
$xOffSet2 (необязательно) - смещение x второй тени
$yOffSet2 (необязательно) - смещение y второй тени
$blur2 (необязательно) - размытие второй тени
$red2 (необязательно) - красное значение второй тени
$blue2 (Необязательно) - синее значение второй тени
$green2 (Необязательно) - зеленое значение второй тени
$opacity2 (Необязательно) - непрозрачность второй тени
$inset2 (необязательно) - True или False. Указывает, должна ли вторая тень быть вставлена (по умолчанию установлено значение false)

Вы можете установить свои стили следующим образом:

#someDiv {
    @include boxShadow(0, 0, 5, 0, 0, 0, .25);
}
#someOtherDiv {
    @include boxShadow(0, 0, 5, 0, 0, 0, .25, true);
}

#theLastDiv {
    @include boxShadow(0, 0, 5, 0, 0, 0, .25, false, true, 0, 1, 0, 255, 255, 255, .2, true);
}

Что генерирует следующий CSS:

/* line 9, ../src/screen.scss */
#someDiv {
  -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.25);
}

/* line 12, ../src/screen.scss */
#someOtherDiv {
  -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.25) inset;
}

/* line 16, ../src/screen.scss */
#theLastDiv {
  -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.25), 0px 1px 0px rgba(255, 255, 255, 0.2) inset;
}

Ответ 5

Компас-код может стоить изучение:

Однако они, похоже, также используют некоторые помощники на стороне сервера.

@mixin box-shadow(
  $shadow-1 : default,
  $shadow-2 : false,
  $shadow-3 : false,
  $shadow-4 : false,
  $shadow-5 : false,
  $shadow-6 : false,
  $shadow-7 : false,
  $shadow-8 : false,
  $shadow-9 : false,
  $shadow-10: false
) {
  @if $shadow-1 == default {
    $shadow-1 : -compass-space-list(compact(if($default-box-shadow-inset, inset, false), $default-box-shadow-h-offset, $default-box-shadow-v-offset, $default-box-shadow-blur, $default-box-shadow-spread, $default-box-shadow-color));
  }
  $shadow : compact($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10);
  @include experimental(box-shadow, $shadow,
    -moz, -webkit, not -o, not -ms, not -khtml, official
  );
}