Question

Я хотел бы создать миксин Sass для свойства 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 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 не может оценить переменную $ inset.

Предыдущий пример только демонстрирует проблему, с которой я сталкиваюсь, когда речь идет о вставке теней или нет. Другая проблема, с которой я сталкиваюсь, заключается в том, что для одного элемента объявляется несколько теней. Обратитесь к описанному выше #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);
  }

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

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

Will · Answer 1 · 24 октября 2012

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

// 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));

UPDATE

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

В случае, если вы не видели аргументы с разрешающей способностью переменной переменной, которые перед изменением количества аргументов (т. Е. Сплатс), проверяются по этой ссылке: http://sass -lang.com / documents / file.SASS_CHANGELOG.html# variable_keyword_arguments

raymondralibi · Answer 2 · 22 июля 2011

Я предпочитаю оставить основной параметр 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), ...

Jason · Answer 3 · 20 августа 2012

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

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

Adam · Answer 4 · 24 марта 2011

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

@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 (необязательно) - верно или неверно. Указывает, должна ли быть вставлена первая тень (по умолчанию false)
$ two (Необязательно) - True или False - True, если вы хотите задать две границы (по умолчанию false)
$ xOffSet2 (необязательно) - смещение x второй тени
$ yOffSet2 (Необязательно) - смещение по y второй тени
$ blur2 (необязательно) - размытие второй тени
$ red2 (необязательно) - значение красного для второй тени
$ blue2 (необязательно) - значение синего для второй тени
$ green2 (необязательно) - значение зеленого цвета второй тени
$ opacity2 (необязательно) - непрозрачность второй тени
$ inset2 (необязательно) - верно или неверно. Указывает, должна ли быть вставлена вторая тень (по умолчанию 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;
}

hakunin · Answer 5 · 01 января 2013

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

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

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

Несколько объявлений box-shadow в Sass

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

Ответы [ 5 ]

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Несколько объявлений box-shadow в Sass

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

Ответы [ 5 ]

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Похожие темы