将变量从mixin声明内部传递到附加的内容块中？ [英] Passing a variable from inside a mixin declaration into the attached content block?

问题描述

在Ruby中，您可以轻松地将方法内部的变量传递到附加的代码块中：

In Ruby, you can easily pass a variable from inside a method into the attached code block:

def mymethod
  (1..10).each { |e| yield(e * 10) } # Passes a number to associated block
end

mymethod { |i| puts "Here comes #{i}" } # Outputs the number received from the method

接收到的数字在SASS mixin中执行相同的操作：

I would like to do the same thing in SASS mixin:

=my-mixin
  @for $i from 1 to 8
    .grid-#{$i}
      @content

+my-mixin
  color: nth("red green blue orange yellow brown black purple", $i)

此代码无法正常工作，因为$ i在mixin声明，无法在使用mixin的外部看到。 ：（

This code won't work because $i is declared inside the mixin declaration and cannot be seen outside, where the mixin is used. :(

所以...我如何利用在mixin声明中声明的变量？

So... How do i leverage variables declared inside the mixin declaration?

当我工作时在具有网格框架和媒体查询的情况下，我非常需要此功能。目前，每次需要时，我都必须复制mixin声明中的内容，这违反了DRY规则。

When i work with a grid framework and media queries, i need this functionality badly. Currently i have to duplicate what's inside the mixin declaration every time i need it, violating the DRY rule.

UPD 2013-01-24

这是一个真实的例子。

我有一个mixin，它循环遍历断点并为每个断点应用一次提供的代码：

I have a mixin that cycles through breakpoints and applies the provided code once for every breakpoint:

=apply-to-each-bp
  @each $bp in $bp-list
    +at-breakpoint($bp) // This is from Susy gem
      @content

当我使用这个mixin时，我必须在@content中使用这个$ bp值。可能是这样的：

When i use this mixin i have to use this $bp value inside @content. It could be like this:

// Applies to all direct children of container
.container > *
  display: inline-block

// Applies to all direct children of container,
// if container does not have the .with-gutters class
.container:not(.with-gutters) > *
  +apply-to-each-bp
    width: 100% / $bp

// Applies to all direct children of container,
// if container has the .with-gutters class
.container.with-gutters  > *
  +apply-to-each-bp
    $block-to-margin-ratio: 0.2
    $width: 100% / ($bp * (1 + $block-to-margin-ratio) - $block-to-margin-ratio)
    width: $width
    margin-right: $width * $block-to-margin-ratio

    &:nth-child(#{$bp})
      margin-right: 0

但是这是行不通的，因为$ bp的值在@content内不可用。

But this won't work, because the value of $bp is not available inside @content.

在调用mixin之前声明变量无济于事，因为@content是

Declaring the variable before calling the mixin won't help, because @content is parsed once and before the mixin is parsed.

相反，每次需要时，我都要做两个丑陋的大腿：

Instead, EACH time i need that, i have to do two ugly thighs:

1. 声明一个临时混合，


2. 写一个循环，违反了DRY原理：

// Each of the following mixins is mentioned in the code only once.
=without-gutters($bp)
  width: 100% / $bp

=with-gutters($bp)
  $block-to-margin-ratio: 0.2
  $width: 100% / ($bp * (1 + $block-to-margin-ratio) - $block-to-margin-ratio)
  width: $width
  margin-right: $width * $block-to-margin-ratio

  &:nth-child(#{$bp})
    margin-right: 0

// Applies to all direct children of container
.container > *
  display: inline-block

// Applies to all direct children of container,
// if container does not have the .with-gutters class
.container:not(.with-gutters) > *
  @each $bp in $bp-list
    +at-breakpoint($bp) // This is from Susy gem
      +without-gutters($bp)

// Applies to all direct children of container,
// if container has the .with-gutters class
.container.with-gutters  > *
  @each $bp in $bp-list  // Duplicate code! :(
    +at-breakpoint($bp)  // Violates the DRY principle.
      +with-gutters($bp)

所以，问题是：有没有办法做到这种Ruby风格？

So, the question is: is there a way to do this Ruby-style?

推荐答案

因此Sass当前不可用。

So this is currently unavailable in Sass.

Sass发行队列中有一个相关的票证： https://github.com/nex3/sass/issues/871 它处于计划状态，但至少要等到Sass 4.0才能实现。

There's a relevant ticket in the Sass issue queue: https://github.com/nex3/sass/issues/871 It's in the planned state but will probably not make it until at least Sass 4.0.

这篇关于将变量从mixin声明内部传递到附加的内容块中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！