mixin宣言の内側から変数を添付されたコンテンツブロックに渡しますか？ Rubyでは

Question

、あなたは簡単に付属のコード・ブロックにメソッドの内部から変数を渡すことができます。

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のミックスインで同じことをしたいと思います：

​​

このコードウォン$ iはmixin宣言の中で宣言され、mixinが使われているところでは見えないので、うまくいきません。 :(

だから... ...どのように私はミックスイン宣言内で宣言された変数を利用していますか？

私はグリッドフレームワークとメディアクエリを使用する場合、私はひどく、この機能を必要としています。現在、私は内部で何複製する必要がありミックスイン宣言私はDRY原則に違反し、それを必要とするたびに。

UPDここでは2013年1月24日

は実際の例です。

私はmixiのを持っていますブレークポイントを循環は、すべてのブレークポイントのために一度提供されたコードを適用し、N：

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

私は@content内でこの$のBP値を使用する必要があり、このミックスインを使用

。

// 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の中で利用できないので、これは機能しません。

mixinを呼び出す前に変数を宣言することは役に立ちません。なぜなら、@ contentは一度解析され、mixinが解析される前です。

代わりに、私は2つの醜い太ももをしなければならない、という私が必要とするたび： ：

1. は
2. はDRY原則に違反し、サイクルを書き、アドホックのmixinを宣言します

   // 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スタイルを行う方法はありますか？

Answer 1

これは現在、Sassでは利用できません。

Sass発行キューには、関連チケットがあります。https://github.com/nex3/sass/issues/871予定されている状態ですが、少なくともSass 4.0以上になるとは限りません。

Answer 2

Sassの変数はスコープです。彼らは、彼らがで作成されたブロック内でのみ表示しているあなたは、変数が両方の内側とミックスインの外にアクセスできるようにしたい場合は、それがグローバルスコープで定義する必要があります。限り、あなたのように

$var: 0; 

@mixin test { 
    $var: $var + 1; 
    color: red; 
} 

.test { 
    $var: 5; 
    @include test; 
    @debug $var; // DEBUG: 6 
} 

$varの状態は非常に長い間気にしないでください。これはあなたの目的のためにうまくいくはずです。

たとえば、@contentが最初に処理されたように見えるため、これは機能しません。何が必要異なっ書かれているのmixinです：

@mixin test($properties...) { 
    @for $i from 1 to 8 { 
     .grid-#{$i} { 
      @each $p in $properties { 
       $list: nth($p, 2); 
       @if length($list) > 1 { 
        #{nth($p, 1)}: nth($list, $i); 
       } @else { 
        #{nth($p, 1)}: $list; 
       } 
      } 
      @content; 
     } 
    } 
} 

.test { 
    @include test(color (red green blue orange yellow brown black purple)); 
} 

生成されたCSS：

.test .grid-1 { 
    color: red; 
} 

.test .grid-2 { 
    color: green; 
} 

.test .grid-3 { 
    color: blue; 
} 

.test .grid-4 { 
    color: orange; 
} 

.test .grid-5 { 
    color: yellow; 
} 

.test .grid-6 { 
    color: brown; 
} 

.test .grid-7 { 
    color: black; 
} 

このようなミックスインは、任意の数の引数を供給することができ、まだあなたが望むなら@contentを使用することができます。

Answer 3

私はこの問題を自分で解決し、AFAIKはSASSの最新の制限です。