Sass список разделителей и написание чистого @mixin - PullRequest
Новая
       29

Sass список разделителей и написание чистого @mixin

0 голосов
/ 19 апреля 2019

У меня есть @mixin, который позволяет мне селекторы пространства имен. Код ниже: 

@mixin pre-assign($value) {
  $pre: $value !global;
}

@include pre-assign('foo');

@function str-replace($string, $search, $replace: '') {
  $index: str-index($string, $search);

  @if $index {
    @return str-slice($string, 1, $index - 1) + $replace +
      str-replace(
        str-slice($string, $index + str-length($search)),
        $search,
        $replace
      );
  }

  @return $string;
}

@mixin pre($value) {
  $result: '';

  $result: str-replace($value, '.', '.#{$pre}-');

  #{$result} {
    @content;
  }
}

Я могу использовать @mixin следующим образом: 

// declaration
@include pre('.bar + .baz') {
  display: none;
}

// output
.foo-bar + .foo-baz {
  display: none;
}

Я хочу привести порядок передачи селекторов в @mixin и опустить кавычки, чтобы не передавать селекторы в виде строковых значений: 

@include pre(.bar + .baz) {
  display: none;
}

Однако, когда я пытаюсь это сделать, я сталкиваюсь со следующей ошибкой:

ОШИБКА в ./lib/all.scss (./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./lib/all.scss)

Сборка модуля не удалась (из ./node_modules/sass-loader/lib/loader.js):

@include pre(.bar + .baz) { ^

Неверный CSS после "@include pre (": ожидаемое выражение (например, 1px, жирный), было ".p - compact) {"

Я подозреваю, что это как-то связано с $list_separator, но я не уверен, как этого добиться. Кто-нибудь знает, как этого добиться?

Ответы [ 2 ]

1 голос
/ 06 мая 2019

Если вы действительно чувствуете необходимость не использовать строки, вы можете поместить своих операторов в карту; ДЕМО

КОД 

$operators: (
  adjacent: '+',
  general: '~',
  universal: '*',
  child: '>',
  descendent: ' '
);

@mixin namespace($list...) {
  $selector: '';

  @each $arg in $list {
    $index: index($list, $arg);
    $val: if($index % 2 == 1, '.#{$pre}-#{$arg}', map-get($operators, $arg));
    $selector: $selector + $val;
  }

  #{$selector} {
    @content
  }
}

ИСПОЛЬЗОВАНИЕ 

@include namespace(cool, adjacent, stuff) {
  color: green;
}

@include namespace(cool, general, stuff) {
  color: green;
}
1 голос
/ 06 мая 2019

Да, операторы должны быть строками. Но вы можете передавать селекторы без строк. DEMO

код 

$pre: ?;

@mixin namespace($args...) {
  $selector: '';

  @each $val in $args {
    $index: index($args, $val);
    $selector: $selector + if($index % 2 == 1, '.#{$pre}-#{$val}', ' #{$val} ');
  }

  #{$selector} {
    @content
  }
}

Использование 

@include namespace(cool, '+', stuff) {
  color: green;
}

@include namespace(stuff, '~', things) {
  color: red;
}

@include namespace(stuff, '*:not(.lame)', things) {
  color: red;
}
...