Question

我使用以下LESS mixins来生成用于比迪烟使用的css。

.ltr(@ltrRules) {
  body[dir="ltr"] & ,
  body[dir="rtl"] *[dir="ltr"] & , 
  body[dir="rtl"] *[dir="ltr"]&    { @ltrRules(); }
}

.rtl (@rtlRules) {
  body[dir="rtl"] & , 
  body[dir="ltr"] *[dir="rtl"] & , 
  body[dir="ltr"] *[dir="rtl"]&    { @rtlRules(); }
}

.bidi(@ltrRules,@rtlRules) {
  .ltr(@ltrRules);
  .rtl(@rtlRules);
}

以后会像这样使用：

// padding
// ------------------------------------------
.padding-start(@p) { 
  .bidi(
   { padding-left: @p } ,
   { padding-right: @p }
  )
}

.padding-end(@p) { 
  .bidi(
   { padding-right: @p } ,
   { padding-left: @p }
  )
}

这样我最终写道：

div.myclass { 
   .padding-start(10px) 
}

如果div处于从左到右的上下文中，或者如果div位于“{1}”中，我会得到一组规则div.myclass与padding-left:10px一起设置从右到左的背景。

我现在正尝试将此转换为SCSS，我必须执行以下操作：

padding-right:10px

但我还有几个问题：

1）如果我取消注释rtl和ltr mixins中的中间选择器，则会出现以下错误：@mixin ltr { body[dir="ltr"] & , //body[dir="rtl"] *[dir="ltr"]& body[dir="rtl"] *[dir="ltr"] & { @content } } @mixin rtl { body[dir="rtl"] & , //body[dir="ltr"] *[dir="rtl"]& body[dir="ltr"] *[dir="rtl"] & { @content} } /* @mixin bidi($ltrRules,$rtlRules) { @include ltr(@include ltrRules); @include rtl(@include rtlRules); } */ @mixin bidi-padding-start($p) { @include ltr { padding-left: $p; } @include rtl { padding-right: $p; } } 我可以没有这个规则而生活，但我宁愿不......我希望它能够编译

Invalid CSS after "[dir="ltr"]": expected "{", was "&".  "&" may only be used at the beginning of a compound selector.

成：

.myclass {
   @include padding-start(10px)
}

2）我无法找到实现body[dir="rtl"] .myclass , body[dir="ltr"] *[dir="rtl"] .myclass , body[dir="ltr"] *[dir="rtl"].myclass的方法，因为我无法找到将两个内容块传递给mixin的方法。

请有人帮助完成这次迁移

Answer 1

目前，SASS的功能仅限于将@content块传递到@mixin。在github issue上有一个功能请求讨论，但它已经关闭，看起来它从未实现过。

在该讨论中，某人suggested a workaround与@extend有效合作。它的工作原理是使用%placeholders来引用临时规则集。但是，它看起来有点hacky，需要针对更复杂的规则集进行测试，并进行更深层次的嵌套。

@mixin ltr {
  body[dir="ltr"] & ,
//body[dir="rtl"] *[dir="ltr"]&      
  body[dir="rtl"] *[dir="ltr"] & { @content }
}


@mixin rtl {
  body[dir="rtl"] & , 
//body[dir="ltr"] *[dir="rtl"]&    
  body[dir="ltr"] *[dir="rtl"] & { @content}
}

@mixin bidi {
  @content;
  @include ltr {
    @extend %ltr !optional;
  }

  @include rtl {
    @extend %rtl !optional;
  }
}

@mixin padding-end($p) {
  @include bidi {
    @at-root { 
      %ltr {
        padding-right: $p;
      }
      %rtl {
        padding-left: $p;
      }
    }
  }
}

.test {
  @include padding-end(5px);
}

对于未来的开发者而言可能更具可读性的另一个选项可能只是明确地调用两个mixins来代替bidi。可以编写脚本来进行此迁移。

@mixin padding-end($p) { 
    @include rtl {
        padding-left: $p;
    }

    @include ltr {
        padding-right: $p;
    }
}

将较少的mixins转换为scss

1 个答案: