Bir mixin bildiriminin içinden ekli içerik bloğuna bir değişken geçiriliyor mu?

Question

Ruby, kolayca ekli kod bloğuna bir yöntem içinden bir değişken geçirebilirsiniz:

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

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

Bu kod kazandı:

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 

Ben SUKDÖ'nün mixin aynı şeyi yapmak istiyorum işe yaramaz çünkü mixin bildirimi içinde $ i beyan edilir ve karışımın kullanıldığı yerlerde dışarıdan görülemez. i mixin bildiriminde bildirilebilir değişkenleri kaldıraç nasıl :(

So ...?

i ızgara çerçevesi ve medya sorgu ile çalışmak, ben Şu ı içinde ne çoğaltmak zorundayız. kötü bu işlevselliği gerek mixin deklarasyon i KURU kuralını ihlal lüzum her zaman.

UPD İşte 2013-01-24

gerçek hayatta örnek.

bir mixi var kesme noktaları aracılığıyla döngüleri ve her kesme noktası için bir kez verilen kodu geçerlidir n:

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

i @content içinde bu $ bp değeri kullanmak zorunda bu mixin kullanmak

. Böyle olabilir:

// 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 

Ama $ bp değeri mevcut iç @content olmadığı için bu, işe yaramaz.

Karışımı çağırmadan önce değişkeni bildirmek yardımcı olmaz çünkü @content bir kez ayrıştırılır ve mixin ayrıştırılmadan önce.

1. geçici bir mixin beyan,
2. , döngüsünü yazmak KURU ilkesini ihlal:

Bunun yerine, ben bu ihtiyaç HER zaman, ben iki çirkin uyluk yapmak zorunda

// 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) 

Yani, soru şu: Bu Ruby stilini yapmanın bir yolu var mı?

Answer 1

Bu, şu anda Sass konumunda bulunmamaktadır.

Sass issue kuyruğunda ilgili bir bilet var: https://github.com/nex3/sass/issues/871 Planlanmış durumda ama muhtemelen en azından Sass 4.0'a kadar yapmayacak.

Answer 2

Sass'daki değişkenlerin bunlara kapsamı var. Onlar oluşturulan blok içinde sadece görünür haldedir değişken içinde ve mixin dışında hem erişilebilir olmasını istiyorsanız, küresel alanda tanımlı zorundadır. Size sürece

$var: 0; 

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

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

çok uzun süre $var durumu umurumda değil, bu sizin amaçlarınız için tamam çalışması gerekir.

Örneğiniz için, bu işe yaramaz çünkü ilk olarak @content işleniyor gibi görünüyor.

@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)); 
} 

oluşturulan CSS: Ne gerek farklı yazılmış bir mixin olan

.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; 
} 

Böyle bir mixin istenen sayıda argümanı beslenen ve hala dilerseniz @content kullanmanızı sağlar edilebilir.

Answer 3

Bu soruna kendim girdim ve AFAIK bu SASS'de geçerli bir sınırlamadır.