Soru SASS ile tek bir argüman olarak bir mixin listesine geçmek


İyi çapraz tarayıcı uyumluluğu yapmamı sağlayan SASS ile mixins yapmaktan hoşlanırım. Buna benzeyen bir karışım yapmak istiyorum:

@mixin box-shadow($value) {
    box-shadow: $value;
    -webkit-box-shadow: $value; 
    -moz-box-shadow: $value; 
}

Böyle bir şeyi geçebileceğim:

@include box-shadow(inset -2px -2px 2px rgba(0,0,0,0.5), inset 1px 1px 2px rgba(255,255,255,0.5), inset 0px 0px 0px 1px #ff800f);

sonuç böyle bir şey ile:

box-shadow: inset -2px -2px 2px rgba(0,0,0,0.5), inset 1px 1px 2px rgba(255,255,255,0.5),inset 0px 0px 0px 1px #ff800f;
-moz-box-shadow: inset -2px -2px 2px rgba(0,0,0,0.5), inset 1px 1px 2px rgba(255,255,255,0.5),inset 0px 0px 0px 1px #ff800f;
-webkit-box-shadow: inset -2px -2px 2px rgba(0,0,0,0.5), inset 1px 1px 2px rgba(255,255,255,0.5),inset 0px 0px 0px 1px #ff800f; 

Ancak, bu işe yaramaz çünkü derleyici, mixin 3 argümanlarını geçmeye çalıştığımı düşünüyor. box-shadow, virgülle ayrılmış bitlerin değişken bir sayısını alır, bu yüzden sadece bir mixin tanımlayamıyorum box-shadow($1,$2,$3).

Geçmeyi denedim

@include box-shadow("inset -2px -2px 2px rgba(0,0,0,0.5), inset 1px 1px 2px rgba(255,255,255,0.5), inset 0px 0px 0px 1px #ff800f");

ve derlendi, ama aslında stilleri işlemedi.

Bunu nasıl çözeceğinize dair herhangi bir ipucu var mı?


44
2017-09-22 16:06


Menşei


Sizin gibi, virgül olduğunda parametreyi bir dizgiye sarmanın sezgisel olduğunu düşünüyorum. # {} 'Yi mikserin içine koymak, bunu yapmanıza izin verir. Bunu da göstermek için bir cevap ekledim. - Joshua Pinter
Kullanımı hakkında sadece bir not rgba Çoğunlukla Sass kullanmaya başlayanlar için (burada herkesin bildiğinden beri bunu zaten biliyordum:]). Yazmak zorunda kalmak yerine rgba(0,0,0,0.5); Yazabilirsin rgba(black,.5). Aynı ile gider white, redvb. ve diğer tüm CSS renkleribu şekilde gerçek RGB değerini kendiniz yazmanız gerekmez. Ayrıca onaltılık değerleri de kullanabilirsiniz: rgba(#258,.5);. Veya renk değişkenleri: rgba($colorVariable,.5). Umarım yardımcı olur. - Ricardo Zea
4 yıl boyunca kutu-gölge ifadelerinin sırasının yanlış yol olduğunu fark ettim. Ne utanç verici. - Oliver


Cevaplar:


Değişken Argümanlar

Bazen bir karışımın bilinmeyen sayıda argüman alması mantıklıdır. Örneğin, kutu gölgeleri oluşturmak için bir karışım argüman olarak herhangi bir sayıda gölgeyi alabilir. Bu durumlar için, Sass tüm değişken argümanları alan ve bunları bir liste halinde paketleyen bir karışım beyanı sonunda argümanlar olan “değişken argümanlar” ı destekler. Bu argümanlar, normal argümanlar gibi görünür, ancak bunu izler .... Örneğin:

@mixin box-shadow($shadows...) {
  -moz-box-shadow: $shadows;
  -webkit-box-shadow: $shadows;
  box-shadow: $shadows;
}

.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}

üzerinden: http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#variable_arguments


67
2017-10-24 20:41



Neato. Bu SASS 3.2 için yeni bir özellik gibi görünüyor: chriseppstein.github.com/blog/2012/08/23/sass-3-2-is-released 23 Ağustos 12'de yayınlandı, bu nedenle eski bir SASS derleyicisini kullanıyorsanız dikkatli olun. - Oliver


SASS 3.1 veya daha az

Not: SASS 3.2+ kullanıyorsanız, rzar'ın önerdiği gibi Değişken Argümanlar özelliğini kullanın.

Sadece mixin kendisinde string interpolasyonunu kullanın, şöyle ki:

@mixin box-shadow($value) {
  -webkit-box-shadow: #{$value};               // #{} removes the quotation marks that
  -moz-box-shadow: #{$value};                  // cause the CSS to render incorrectly.
  box-shadow: #{$value};
}

// ... calling it with quotations works great ...
@include box-shadow("inset -2px -2px 2px rgba(0,0,0,0.5), inset 1px 1px 2px rgba(255,255,255,0.5), inset 0px 0px 0px 1px #ff800f");

Teşekkürler Ryan için.


35
2018-03-31 22:46



Bu yapmanın oldukça temiz bir yolu. - Oliver
Düzeltilmemiş beyanlar listeden sonuncu olmalı :) - Tom Pietrosanti
@TomPietrosanti Teşekkürler! Güncellenmiş. - Joshua Pinter
Teşekkürler! Mükemmel çalışıyor - Darren Cooney
@DarrenCooney Harika şeyler. - Joshua Pinter


Dize enterpolasyonunu kullan

@include box-shadow(#{"inset -2px -2px 2px rgba(0,0,0,0.5), inset 1px 1px 2px rgba(255,255,255,0.5), inset 0px 0px 0px 1px #ff800f"});

14
2017-10-16 04:13



Güzel, bu gerçekten kullanışlı ve arnaud'un parantezli listelerdeki şeyinden daha taşınabilir. - Oliver
Teşekkürler, çok yararlı. - Greg


Bunu yapmanın birçok yolu var, en iyi yol böyle bir karışımı kullanıyor:

@mixin box-shadow($value...) {
  -webkit-box-shadow: $value;               
  -moz-box-shadow: $value;                  
  box-shadow: $value;
}

Ve bunu şöyle dahil et:

@include box-shadow(inset 0 1px 0 #FFD265, 0 0 0 1px #912E01, 0 0 0 7px rgba(0, 0, 0, .1), 0 1px 4px rgba(0, 0, 0, .6));

veya

@mixin box-shadow($value) {
      -webkit-box-shadow: #{$value};               
      -moz-box-shadow: #{$value};          
      box-shadow: #{$value};
}

Ve bunu şöyle dahil et:

@include box-shadow("inset 0 1px 0 #FFD265, 0 0 0 1px #912E01, 0 0 0 7px rgba(0, 0, 0, .1), 0 1px 4px rgba(0, 0, 0, .6)");

veya:

@mixin box-shadow($value) {
      $value: unquote($value);
      -webkit-box-shadow: $value;               
      -moz-box-shadow: $value;          
      box-shadow: $value;
}

veya:

@mixin box-shadow($value) {
  -webkit-box-shadow: $value;               
  -moz-box-shadow: $value;                  
  box-shadow: $value;
}

Ve bunu şöyle dahil et:

@include box-shadow((inset 0 1px 0 #FFD265, 0 0 0 1px #912E01, 0 0 0 7px rgba(0, 0, 0, .1), 0 1px 4px rgba(0, 0, 0, .6)));

Sass çok güçlüdür :)


4
2017-07-29 07:25



Bu, mevcut cevapların sunduğu şeylere nasıl bir şey sağlar? - cimmanon
Örneklerimin son ikisini kimse dahil etmedi. Gelecekteki görüntüleyenlerin @cimmanon'a yardımcı olması için ek cevaplar verdim - Shannon Hochkins
Daha da iyisi, neden bir yıldan fazla bir zaman önce yayınlanan ve başka cevaplara göre neden farklı olduğunu soran bir şeye yorum yapıyorsunuz? - Shannon Hochkins
Beni hiç bir sebepsiz yere işaretlemekten ötürü teşekkür ederim - Shannon Hochkins


Ben de mixin dediğinizde argüman ismini kullanarak bir değer iletebileceğinizi belirtmek isterim:

@mixin shadow($shadow: 0 0 2px #000) {
    box-shadow: $shadow;
    -webkit-box-shadow: $shadow; 
    -moz-box-shadow: $shadow; 
}

.my-shadow {
  @include shadow($shadow: 0 0 5px #900, 0 2px 2px #000);
}

scss bu kadar kapsamlıdır $shadow daha sonra tekrar kullanılırsa karışım değerini hala koruyacaktır. daha az inanıyorum, bu senaryoda yeniden atama muzdarip


2
2018-05-26 23:34





Bu derleme değil:

+box-shadow(inset 0 1px 0 #FFD265, 0 0 0 1px #912E01, 0 0 0 7px rgba(0, 0, 0, .1), 0 1px 4px rgba(0, 0, 0, .6))

bu derler:

+box-shadow((inset 0 1px 0 #FFD265, 0 0 0 1px #912E01, 0 0 0 7px rgba(0, 0, 0, .1), 0 1px 4px rgba(0, 0, 0, .6)))

Yani, virgülle ayrılmış gölgeler listesi etrafında bir parantez ekleyin ve çalışmalıdır:

+box-shadow( (myshadow1, myshadow2, ...) )

0
2017-11-13 15:21



Dokümanlar sass-lang.com/docs/yardoc/... İlkinin geçerli olduğunu belirtin, bu yüzden derleyicinizde bir hata olduğunu tahmin ediyorum. - Oliver