SASS Mixin Аргументы - PullRequest
       13

SASS Mixin Аргументы

3 голосов
/ 20 августа 2011

Я передаю несколько аргументов в миксине ниже. Я вызываю миксин из нескольких мест в моих файлах CSS; иногда нужно указывать все аргументы, а иногда только несколько. Ruby позволяет передавать необязательные аргументы, используя хэш. Существует ли такой эквивалент в SASS или это устранено тем фактом, что именованные аргументы могут передаваться в любом порядке, а аргументы со значениями по умолчанию могут быть опущены?

@mixin three-column-header-layout($background_color: #EEEEEE, $left_width: 25%, $mid_width: 50%, $right_width: 25%, $left_line_height: 40px, $mid_line_height: 40px, $right_line_height: normal, $column_height: 40px) {
  .wrapper {
    margin: 0 auto;
    width: 100%;
    overflow: hidden; 
  } 

  .middleCol {
    float: left;
    background: $background_color;
    height: $column_height;
    width: $mid_width;
    display: inline;
    line-height: $mid_line_height; 
  }

  .leftCol {
    background: $background_color;
    height: $column_height;
    width: $left_width;
    float: left;
    line-height: $left_line_height; 
  }

  .rightCol {
    background: $background_color;
    height: $column_height;
    width: $right_width;
    float: left; 
    line-height: $right_line_height;
  }
}

Ответы [ 2 ]

1 голос
/ 24 августа 2011

Единственная структура данных Sass на 3.1.7 - списки.

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

0 голосов
/ 15 октября 2014

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

$options:
  ( background_color: red
  , right_width: 30%
  , left_width: 20%
  );

.foo {
  @include three-column-header-layout($options...);
}

Обратите внимание, однако, что можно также указать аргументы, как это (это может быть функция 3.2):

.foo {
  @include three-column-header-layout($background_color: red, $right_width: 30%, $left_width: 20%)
}
...