सवाल एसएएसएस के साथ एक तर्क के रूप में एक मिश्रण के लिए एक सूची पास करें


मैं एसएएसएस के साथ मिश्रित बनाना चाहता हूं जो मुझे अच्छी क्रॉस-ब्राउज़र संगतता बनाने में मदद करता है। मैं ऐसा मिश्रण दिखाना चाहता हूं जो इस तरह दिखता है:

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

जिसके लिए मैं इस तरह कुछ पास कर सकता हूं:

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

परिणाम इस तरह कुछ होने के साथ:

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; 

हालांकि, यह काम नहीं करता है क्योंकि शिकायतकर्ता सोचता है कि मैं मिश्रण 3 तर्कों को पारित करने की कोशिश कर रहा हूं। बॉक्स-छाया को अल्पविराम से अलग बिट्स की एक चर संख्या लेती है, इसलिए मैं सिर्फ एक मिश्रण जैसे परिभाषित नहीं कर सकता box-shadow($1,$2,$3)

मैंने गुजरने की कोशिश की

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

और यह संकलित, लेकिन वास्तव में शैलियों को प्रस्तुत नहीं किया था।

इसे हल करने के तरीके पर कोई सुझाव?


44
2017-09-22 16:06


मूल


आप की तरह, मुझे लगता है कि अल्पविराम होने पर पैरामीटर को पैरामीटर में लपेटना सहज है। मिश्रण में # {} डालने से आप इसे करने की अनुमति देते हैं। मैंने इसे दिखाने के लिए एक जवाब भी जोड़ा। - Joshua Pinter
के उपयोग पर बस एक नोट rgba ज्यादातर दूसरों के लिए सास का उपयोग शुरू करने के लिए (क्योंकि मुझे पता है कि यहां हर कोई यह जानता है:])। टाइप करने के बजाय rgba(0,0,0,0.5); आपको लिखना आता है rgba(black,.5)। वही चला जाता है white, red, आदि अन्य सभी सीएसएस रंग, इस तरह आपको वास्तविक आरजीबी मूल्य को टाइप करने की आवश्यकता नहीं है। आप हेक्स मानों का भी उपयोग कर सकते हैं: rgba(#258,.5);। या रंग चर: rgba($colorVariable,.5)। उम्मीद है की वो मदद करदे। - Ricardo Zea
4 साल मैं नोटिस करता हूं कि बॉक्स-छाया अभिव्यक्ति का क्रम गलत तरीका है। कितना शर्मनाक है। - Oliver


जवाब:


परिवर्तनीय तर्क

कभी-कभी यह एक मिश्रण के लिए अज्ञात संख्या में तर्क लेने के लिए समझ में आता है। उदाहरण के लिए, बॉक्स छाया बनाने के लिए एक मिश्रण, तर्कों के रूप में किसी भी छाया को ले सकता है। इन स्थितियों के लिए, सास "परिवर्तनीय तर्क" का समर्थन करता है, जो एक मिश्रण घोषणा के अंत में तर्क हैं जो सभी बचे हुए तर्क लेते हैं और उन्हें एक सूची के रूप में पैकेज करते हैं। ये तर्क सामान्य तर्कों की तरह दिखते हैं, लेकिन इसके बाद .... उदाहरण के लिए:

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

के जरिए: http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#variable_arguments


67
2017-10-24 20:41



Neato। यह SASS 3.2 के लिए एक नई सुविधा प्रतीत होता है: chriseppstein.github.com/blog/2012/08/23/sass-3-2-is-released 23 अगस्त, 12 को जारी किया गया, इसलिए सावधान रहें यदि आप पुराने एसएएसएस कंपाइलर का उपयोग कर रहे हैं। - Oliver


SASS 3.1 या उससे कम

नोट: यदि आप SASS 3.2+ का उपयोग कर रहे हैं तो रेजार सुझाव के रूप में वेरिएबल Arguments सुविधा का उपयोग करें।

बस मिश्रण में स्ट्रिंग इंटरपोलेशन का उपयोग करें, जैसे:

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

टिप रयान के लिए धन्यवाद।


35
2018-03-31 22:46



यह करने का यह एक सुंदर साफ तरीका है। - Oliver
अपरिवर्तित घोषणा सूची में अंतिम होना चाहिए :) - Tom Pietrosanti
@TomPietrosanti धन्यवाद! अपडेट किया गया। - Joshua Pinter
धन्यवाद! अच्छी तरह से काम - Darren Cooney
@DarrenCooney बहुत बढ़िया सामान। - Joshua Pinter


स्ट्रिंग इंटरपोलेशन का प्रयोग करें

@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



अच्छा, यह वास्तव में आसान है, और ब्रैकेट सूचियों के साथ अर्नुद की चीज़ से अधिक पोर्टेबल है। - Oliver
धन्यवाद, बहुत उपयोगी है। - Greg


ऐसा करने के कई तरीके हैं, मिक्सिन का उपयोग करने का सबसे अच्छा तरीका इस प्रकार है:

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

और इसे इस तरह शामिल करें:

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

या

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

और इसे इस तरह शामिल करें:

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

या:

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

या:

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

और इसे इस तरह शामिल करें:

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

सास बहुत शक्तिशाली है :)


4
2017-07-29 07:25



यह मौजूदा उत्तरों की पेशकश के बारे में कुछ भी कैसे प्रदान करता है? - cimmanon
मेरे पिछले दो उदाहरणों में से कोई भी शामिल नहीं था। मैंने भविष्य के दर्शकों @cimmanon की सहायता के लिए अतिरिक्त उत्तर प्रदान किए - Shannon Hochkins
बेहतर अभी तक, आप एक साल पहले पोस्ट की गई किसी चीज़ पर टिप्पणी क्यों कर रहे हैं यह पूछना कि यह अन्य उत्तरों के लिए अलग क्यों है? - Shannon Hochkins
सभी @cimmanon पर किसी भी कारण से मुझे नीचे चिह्नित करने के लिए धन्यवाद - Shannon Hochkins


मैं यह इंगित करना चाहता हूं कि आप तर्क नाम का उपयोग करके एक मान भी पारित कर सकते हैं जब आप मिक्सर को कॉल करते हैं:

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

ध्यान दें कि एसएसएस को स्कॉप्ड किया गया है $shadow यदि बाद में उपयोग किया जाता है तो भी इसके मिश्रण मूल्य को बनाए रखेगा। कम विश्वास है, इस परिदृश्य में पुनर्मूल्यांकन से पीड़ित है


2
2018-05-26 23:34





यह संकलित नहीं करता है:

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

यह संकलित करता है:

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

यही है, छाया की अल्पविराम से अलग सूची के चारों ओर एक कंस्ट्रैसिस जोड़ें और इसे काम करना चाहिए:

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

0
2017-11-13 15:21



दस्तावेज़ sass-lang.com/docs/yardoc/... इंगित करें कि पहला वैध होना चाहिए, इसलिए मुझे लगता है कि आपके कंपाइलर में एक बग है। - Oliver