Rubyでは、メソッド内から添付のコードブロックに変数を簡単に渡すことができます。
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ミックスインでも同じことをしたいと思います。
=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はミックスイン宣言の内部で宣言されており、ミックスインが使用されている外部では表示されないため、このコードは機能しません。:(
だから...ミックスイン宣言内で宣言された変数をどのように活用しますか?
グリッドフレームワークとメディアクエリを使用する場合、この機能が非常に必要です。現在、DRYルールに違反して、必要になるたびにミックスイン宣言の内容を複製する必要があります。
UPD 2013-01-24
これが実際の例です。
ブレークポイントを循環し、提供されたコードをブレークポイントごとに1回適用するミックスインがあります。
=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内で使用できないため、これは機能しません。
@contentは一度解析され、ミックスインが解析される前に解析されるため、ミックスインを呼び出す前に変数を宣言しても役に立ちません。
代わりに、私がそれを必要とするたびに、私は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スタイルを行う方法はありますか?