Sass 3.5 - Functions

सास कार्य




sass

पेट ($ संख्या)

एक संख्या के पूर्ण मूल्य देता है।

उदाहरण:

abs(10px) => 10px
abs(-10px) => 10px

पैरामीटर:

  • $ संख्या (संख्या)

यह दिखाता है:

  • (संख्या)

जन्म देती है:

  • (ArgumentError) - यदि $ संख्या एक संख्या नहीं है

adjust_color ($ रंग, [$ लाल], [$ हरा], [$ नीला], [$ ह्यू], [$ संतृप्ति], [$ हल्कापन], [$ अल्फा])

रंग के एक या अधिक गुणों को बढ़ाता या घटाता है। यह लाल, हरा, नीला, रंग, संतृप्ति, मूल्य, और अल्फा गुणों को बदल सकता है। गुण कीवर्ड तर्क के रूप में निर्दिष्ट किए जाते हैं, और उस संपत्ति के रंग के वर्तमान मूल्य से जोड़े या घटाए जाते हैं।

सभी गुण वैकल्पिक हैं। आप एक ही समय में आरजीबी गुण ( $red , $green , $blue ) और एचएसएल गुण ( $hue , $saturation , $value ) दोनों निर्दिष्ट नहीं कर सकते हैं।

उदाहरण:

adjust-color(#102030, $blue: 5) => #102035
adjust-color(#102030, $red: -5, $blue: 5) => #0b2035
adjust-color(hsl(25, 100%, 80%), $lightness: -30%, $alpha: -0.4) => hsla(25, 100%, 50%, 0.6)

पैरामीटर:

  • $ रंग (रंग)
  • $ लाल (संख्या) - लाल घटक पर समायोजन, -255 और 255 समावेशी के बीच
  • $ हरा (संख्या) - हरे रंग के घटक पर समायोजन, -255 और 255 समावेशी के बीच
  • $ नीला (संख्या) - नीले घटक को बनाने के लिए समायोजन, -255 और 255 समावेशी के बीच
  • $ ह्यू (संख्या) - डिग्री में, रंग घटक पर बनाने के लिए समायोजन
  • $ संतृप्ति (संख्या) - संतृप्ति घटक पर -100% और 100% समावेशी के बीच समायोजन
  • $ हल्कापन (संख्या) - -100% और 100% समावेशी के बीच, हल्केपन घटक पर समायोजन
  • $ अल्फा (संख्या) - -1 और 1 के बीच अल्फा घटक बनाने के लिए समायोजन

यह दिखाता है:

  • (रंग)

जन्म देती है:

  • (ArgumentError) - यदि कोई पैरामीटर गलत प्रकार या सीमा से बाहर है, या यदि आरजीबी गुण और एचएसएल गुण एक ही समय में समायोजित किए जाते हैं

adjust_hue ($ रंग, $ डिग्री)

एक रंग के रंग बदलता है। एक रंग और कई डिग्री लेता है (आमतौर पर -360deg और 360deg बीच), और उस राशि से रंगीन चक्र के साथ घुमाए गए रंग के साथ रंग देता है।

उदाहरण:

adjust-hue(hsl(120, 30%, 90%), 60deg) => hsl(180, 30%, 90%)
adjust-hue(hsl(120, 30%, 90%), -60deg) => hsl(60, 30%, 90%)
adjust-hue(#811, 45deg) => #886a11

पैरामीटर:

  • $ रंग (रंग)
  • $ डिग्री (संख्या) - रंग घुमाने के लिए डिग्री की संख्या

यह दिखाता है:

  • (रंग)

जन्म देती है:

  • (ArgumentError) - यदि कोई पैरामीटर गलत प्रकार है

अल्फा ($ रंग)

एक रंग के अल्फा घटक (अस्पष्टता) देता है। यह तब तक 1 है जब तक अन्यथा निर्दिष्ट नहीं किया जाता है।

यह फ़ंक्शन एक विशेष मामले के रूप में मालिकाना माइक्रोसॉफ्ट alpha(opacity=20) वाक्यविन्यास का भी समर्थन करता है।

पैरामीटर:

  • $ रंग (रंग)

यह दिखाता है:

  • (संख्या) - 0 और 1 के बीच अल्फा घटक

जन्म देती है:

  • (ArgumentError) - अगर $ रंग रंग नहीं है

संलग्न करें ($ सूची, $ वैल, $ विभाजक: ऑटो)

एक सूची के अंत में एक एकल मूल्य जोड़ता है।

जब तक कि $separator तर्क पारित नहीं किया जाता है, यदि सूची में केवल एक आइटम होता है, तो परिणामस्वरूप सूची स्थान से अलग हो जाएगी।

सभी सूची कार्यों की तरह, append() अपनी तर्क को संशोधित करने के बजाय एक नई सूची देता है।

उदाहरण:

append(10px 20px, 30px) => 10px 20px 30px
append((blue, red), green) => blue, red, green
append(10px 20px, 30px 40px) => 10px 20px (30px 40px)
append(10px, 20px, comma) => 10px, 20px
append((blue, red), green, space) => blue red green

पैरामीटर:

  • $ सूची (आधार)
  • $ वैल (बेस)
  • $ विभाजक (स्ट्रिंग) - सूची विभाजक का उपयोग करने के लिए। यदि यह अल्पविराम या स्थान है, तो विभाजक का उपयोग किया जाएगा। यदि यह ऑटो (डिफ़ॉल्ट) है, तो विभाजक ऊपर वर्णित अनुसार निर्धारित किया गया है।

यह दिखाता है:

  • (सूची)

नीला ($ रंग)

एक रंग के नीले रंग के घटक हो जाता है। एचएसएल से गणना की जहां इस एल्गोरिदम के माध्यम से आवश्यक है

पैरामीटर:

  • $ रंग (रंग)

यह दिखाता है:

  • (संख्या) - नीला घटक, 0 और 255 के बीच समावेशी

जन्म देती है:

  • (ArgumentError) - अगर $ रंग रंग नहीं है

कॉल ($ फ़ंक्शन, $ args ...)

गतिशील रूप से एक समारोह कहते हैं। यह उपयोगकर्ता द्वारा परिभाषित कार्यों, अंतर्निहित कार्यों, या सादे सीएसएस कार्यों को कॉल कर सकता है। यह बुलाए गए फ़ंक्शन में कीवर्ड तर्क सहित सभी तर्कों के साथ गुजर जाएगा।

उदाहरण:

call(rgb, 10, 100, 255) => #0a64ff
call(scale-color, #0a64ff, $lightness: -10%) => #0058ef

$fn: nth;
call($fn, (a b c), 2) => b

पैरामीटर:

  • $ फ़ंक्शन (फ़ंक्शन) - कॉल करने के लिए फ़ंक्शन।

प्लस्तर लगाना ($ संख्या)

अगले नंबर तक एक संख्या को बढ़ाता है।

उदाहरण:

ceil(10.4px) => 11px
ceil(10.6px) => 11px

पैरामीटर:

  • $ संख्या (संख्या)

यह दिखाता है:

  • (संख्या)

जन्म देती है:

  • (ArgumentError) - यदि $ संख्या एक संख्या नहीं है

change_color ($ रंग, [$ लाल], [$ हरा], [$ नीला], [$ ह्यू], [$ संतृप्ति], [$ हल्कापन], [$ अल्फा])

रंग के एक या अधिक गुणों को बदलता है। यह लाल, हरा, नीला, रंग, संतृप्ति, मूल्य, और अल्फा गुणों को बदल सकता है। गुण कीवर्ड तर्क के रूप में निर्दिष्ट हैं, और उस संपत्ति के रंग के वर्तमान मान को प्रतिस्थापित करें।

सभी गुण वैकल्पिक हैं। आप एक ही समय में आरजीबी गुण ( $red , $green , $blue ) और एचएसएल गुण ( $hue , $saturation , $value ) दोनों निर्दिष्ट नहीं कर सकते हैं।

उदाहरण:

change-color(#102030, $blue: 5) => #102005
change-color(#102030, $red: 120, $blue: 5) => #782005
change-color(hsl(25, 100%, 80%), $lightness: 40%, $alpha: 0.8) => hsla(25, 100%, 40%, 0.8)

पैरामीटर:

  • $ रंग (रंग)
  • $ लाल (संख्या) - रंग के लिए नया लाल घटक, 0 और 255 समावेशी के भीतर
  • $ हरा (संख्या) - रंग के लिए नया हरा घटक, 0 और 255 समावेशी के भीतर
  • $ नीला (संख्या) - रंग के लिए नया नीला घटक, 0 और 255 समावेशी के भीतर
  • $ रंग (संख्या) - डिग्री के लिए, रंग के लिए नया रंग घटक
  • $ संतृप्ति (संख्या) - रंग के लिए नया संतृप्ति घटक, 0% और 100% समावेशी के बीच
  • $ लाइटनेस (संख्या) - 0% और 100% समावेशी के भीतर रंग के लिए नया हल्कापन घटक
  • $ अल्फा (संख्या) - रंग के लिए नया अल्फा घटक, 0 और 1 समावेशी के भीतर

यह दिखाता है:

  • (रंग)

जन्म देती है:

  • (ArgumentError) - यदि कोई पैरामीटर गलत प्रकार या सीमा से बाहर है, या यदि आरजीबी गुण और एचएसएल गुण एक ही समय में समायोजित किए जाते हैं

तुलनीय ($ संख्या 1, $ संख्या 2)

वापस आता है कि दो संख्याओं को जोड़ा जा सकता है, घटाया जा सकता है या तुलना की जा सकती है।

उदाहरण:

comparable(2px, 1px) => true
comparable(100px, 3em) => false
comparable(10cm, 3mm) => true

पैरामीटर:

  • $ संख्या 1 (संख्या)
  • $ संख्या 2 (संख्या)

यह दिखाता है:

  • (Bool)

जन्म देती है:

  • (ArgumentError) - यदि कोई पैरामीटर गलत प्रकार है

पूरक ($ रंग)

एक रंग के पूरक देता है। यह adjust-hue(color, 180deg)

पैरामीटर:

  • $ रंग (रंग)

यह दिखाता है:

  • (रंग)

जन्म देती है:

  • (ArgumentError) - अगर $ रंग रंग नहीं है

content_exists

जांचें कि एक मिक्सिन एक सामग्री ब्लॉक पारित किया गया था या नहीं।

जब तक content-exists() को सीधे मिश्रण से बुलाया जाता है, तो एक त्रुटि उठाई जाएगी।

उदाहरण:

@mixin needs-content {
  @if not content-exists() {
    @error "You must pass a content block!"
  }
  @content;
}

यह दिखाता है:

  • (बूल) - क्या मिश्रण सामग्री को एक सामग्री ब्लॉक पास किया गया था।

काउंटर ($ args ...)

यह फ़ंक्शन केवल आई 7 की content: counter लिए वर्कअराउंड के रूप में मौजूद content: counter बग । यह किसी अन्य सादा-सीएसएस फ़ंक्शन के समान रूप से काम करता है, सिवाय इसके कि यह तर्क कॉमा के बीच रिक्त स्थान जोड़ने से बचाता है।

उदाहरण:

counter(item, ".") => counter(item,".")

यह दिखाता है:

  • (स्ट्रिंग)

काउंटर ($ args ...)

यह फ़ंक्शन केवल आई 7 की content: counter लिए वर्कअराउंड के रूप में मौजूद content: counter बग । यह किसी अन्य सादा-सीएसएस फ़ंक्शन के समान रूप से काम करता है, सिवाय इसके कि यह तर्क कॉमा के बीच रिक्त स्थान जोड़ने से बचाता है।

उदाहरण:

counters(item, ".") => counters(item,".")

यह दिखाता है:

  • (स्ट्रिंग)

अंधेरा ($ रंग, $ राशि)

एक रंग गहरा बनाता है। एक रंग और 0% और 100% के बीच एक संख्या लेता है, और उस राशि से कम होने वाली हल्कीता के साथ एक रंग देता है।

उदाहरण:

darken(hsl(25, 100%, 80%), 30%) => hsl(25, 100%, 50%)
darken(#800, 20%) => #200

पैरामीटर:

  • $ रंग (रंग)
  • $ राशि (संख्या) - 0% और 100% के बीच, हल्केपन को कम करने की राशि

यह दिखाता है:

  • (रंग)

जन्म देती है:

  • (ArgumentError) - यदि $ राशि सीमा से बाहर है, या तो पैरामीटर गलत प्रकार है

desaturate ($ रंग, $ राशि)

एक रंग कम संतृप्त बनाता है। एक रंग और 0% और 100% के बीच एक संख्या लेता है, और उस मूल्य से कम संतृप्ति के साथ एक रंग देता है।

उदाहरण:

desaturate(hsl(120, 30%, 90%), 20%) => hsl(120, 10%, 90%)
desaturate(#855, 20%) => #726b6b

पैरामीटर:

  • $ रंग (रंग)
  • $ राशि (संख्या) - संतृप्ति को कम करने की राशि, 0% और 100% के बीच

यह दिखाता है:

  • (रंग)

जन्म देती है:

  • (ArgumentError) - यदि $ राशि सीमा से बाहर है, या तो पैरामीटर गलत प्रकार है

feature_exists ($ सुविधा)

वर्तमान सैस रनटाइम में कोई सुविधा मौजूद है या नहीं।

निम्नलिखित विशेषताएं समर्थित हैं:

  • global-variable-shadowing इंगित करता है कि एक स्थानीय चर वैश्विक ग्लोबल वैरिएबल को छाया देगा जब तक कि !global का उपयोग नहीं किया जाता है।

  • extend-selector-pseudoclass इंगित करता है कि @extend चयनकर्ता स्यूडोक्लास में पहुंच जाएगा जैसे :not

  • units-level-3 मूल्यों और इकाइयों स्तर 3 spec में परिभाषित इकाइयों का उपयोग कर इकाई अंकगणितीय के लिए पूर्ण समर्थन इंगित करता है।

  • at-error इंगित करता है कि Sass @error निर्देश समर्थित है।

  • custom-property इंगित करती है कि कस्टम गुण स्तर 1 spec समर्थित है। इसका मतलब है कि कस्टम गुणों को स्थिर रूप से पार्स किया जाता है, केवल सास्क्रिप्ट के रूप में व्यवहार किए जाने वाले इंटरपोलेशन के साथ।

उदाहरण:

feature-exists(some-feature-that-exists) => true
feature-exists(what-is-this-i-dont-know) => false

पैरामीटर:

  • $ सुविधा (स्ट्रिंग) - सुविधा का नाम

यह दिखाता है:

  • (बूल) - क्या सुविधा सैस के इस संस्करण में समर्थित है

जन्म देती है:

  • (ArgumentError) - अगर $ सुविधा एक स्ट्रिंग नहीं है

मंजिल ($ संख्या)

पिछले नंबर पर एक संख्या नीचे चलाता है।

उदाहरण:

floor(10.4px) => 10px
floor(10.6px) => 10px

पैरामीटर:

  • $ संख्या (संख्या)

यह दिखाता है:

  • (संख्या)

जन्म देती है:

  • (ArgumentError) - यदि $ संख्या एक संख्या नहीं है

function_exists ($ नाम)

जांचें कि दिए गए नाम वाला फ़ंक्शन मौजूद है या नहीं।

उदाहरण:

function-exists(lighten) => true

@function myfunc { @return "something"; }
function-exists(myfunc) => true

पैरामीटर:

  • नाम (स्ट्रिंग) - फ़ंक्शन का नाम चेक या फ़ंक्शन संदर्भ।

यह दिखाता है:

  • (बूल) - क्या फ़ंक्शन परिभाषित किया गया है।

get_function ($ name, $ css: false)

call() फ़ंक्शन के साथ बाद में आमंत्रण के लिए किसी फ़ंक्शन का संदर्भ देता है।

यदि $css false , तो फ़ंक्शन संदर्भ आपके स्टाइलशीट में परिभाषित फ़ंक्शन या होस्ट वातावरण में अंतर्निहित फ़ंक्शन का संदर्भ ले सकता है। यदि यह true यह एक सादा-सीएसएस फ़ंक्शन का संदर्भ देगा।

उदाहरण:

get-function("rgb")

@function myfunc { @return "something"; }
get-function("myfunc")

पैरामीटर:

  • नाम (स्ट्रिंग) - संदर्भ का नाम संदर्भित किया जा रहा है।
  • सीएसएस (बूल) - क्या एक सादा सीएसएस समारोह प्राप्त करना है।

यह दिखाता है:

  • (फंक्शन) - एक समारोह संदर्भ।

global_variable_exists ($ नाम)

जांचें कि दिया गया नाम वाला वैरिएबल वैश्विक दायरे में (फ़ाइल के शीर्ष स्तर पर) मौजूद है या नहीं।

उदाहरण:

$a-false-value: false;
global-variable-exists(a-false-value) => true
global-variable-exists(a-null-value) => true

.foo {
  $some-var: false;
  @if global-variable-exists(some-var) { /* false, doesn't run */ }
}

पैरामीटर:

  • $ नाम (स्ट्रिंग) - चर के नाम को जांचने के लिए। नाम में $ शामिल नहीं होना चाहिए।

यह दिखाता है:

  • (बूल) - क्या वैरिएबल को वैश्विक दायरे में परिभाषित किया गया है।

ग्रेस्केल ($ रंग)

ग्रेस्केल में रंग बदलता है। यह desaturate(color, 100%) समान है।

पैरामीटर:

  • $ रंग (रंग)

यह दिखाता है:

  • (रंग)

जन्म देती है:

  • (ArgumentError) - अगर $ रंग रंग नहीं है

हरे रंग ($ रंग)

एक रंग के हरे रंग के घटक हो जाता है। एचएसएल से गणना की जहां इस एल्गोरिदम के माध्यम से आवश्यक है

पैरामीटर:

  • $ रंग (रंग)

यह दिखाता है:

  • (संख्या) - 0 और 255 समावेशी के बीच हरा घटक

जन्म देती है:

  • (ArgumentError) - अगर $ रंग रंग नहीं है

एचएसएल ($ ह्यू, $ संतृप्ति, $ लाइटनेस)

रंग, संतृप्ति, और हल्के मूल्यों से रंग बनाता है। CSS3 spec से एल्गोरिदम का उपयोग करता है।

पैरामीटर:

  • $ रंग (संख्या) - रंग का रंग। 0 और 360 डिग्री के बीच होना चाहिए, समावेशी
  • $ संतृप्ति (संख्या) - रंग की संतृप्ति। 0% और 100% के बीच होना चाहिए, समावेशी
  • $ हल्कापन (संख्या) - रंग की हल्कीता। 0% और 100% के बीच होना चाहिए, समावेशी

यह दिखाता है:

  • (रंग)

जन्म देती है:

  • (ArgumentError) - अगर $ संतृप्ति या $ लाइटनेस सीमा से बाहर हैं या कोई पैरामीटर गलत प्रकार है

एचएसएलए ($ ह्यू, $ संतृप्ति, $ लाइटनेस, $ अल्फा)

रंग, संतृप्ति, हल्कापन, और अल्फा मानों से रंग बनाता है। CSS3 spec से एल्गोरिदम का उपयोग करता है।

पैरामीटर:

  • $ रंग (संख्या) - रंग का रंग। 0 और 360 डिग्री के बीच होना चाहिए, समावेशी
  • $ संतृप्ति (संख्या) - रंग की संतृप्ति। 0% और 100% के बीच होना चाहिए, समावेशी
  • $ हल्कापन (संख्या) - रंग की हल्कीता। 0% और 100% के बीच होना चाहिए, समावेशी
  • $ अल्फा (संख्या) - रंग की अस्पष्टता। 0 और 1 के बीच होना चाहिए, समावेशी

यह दिखाता है:

  • (रंग)

जन्म देती है:

  • (ArgumentError) - अगर $ संतृप्ति, $ लाइटनेस, या $ अल्फा सीमा से बाहर हैं या कोई पैरामीटर गलत प्रकार है

रंग ($ रंग)

एक रंग के रंग घटक देता है। CSS3 एचएसएल विनिर्देश देखें। इस एल्गोरिदम के माध्यम से आवश्यक आरजीबी से गणना की।

पैरामीटर:

  • $ रंग (रंग)

यह दिखाता है:

  • (संख्या) - 0deg और 360deg के बीच, रंग घटक

जन्म देती है:

  • (ArgumentError) - अगर $ रंग रंग नहीं है

ie_hex_str ($ रंग)

IE फ़िल्टर द्वारा समझा प्रारूप में रंग बदलता है।

उदाहरण:

ie-hex-str(#abc) => #FFAABBCC
ie-hex-str(#3322BB) => #FF3322BB
ie-hex-str(rgba(0, 255, 0, 0.5)) => #8000FF00

पैरामीटर:

  • $ रंग (रंग)

यह दिखाता है:

  • (स्ट्रिंग) - आईई-स्वरूपित स्ट्रिंग रंग का प्रतिनिधित्व

जन्म देती है:

  • (ArgumentError) - अगर $ रंग रंग नहीं है

अगर ($ शर्त, $ if-true, $ if-false)

$condition एक $condition है या नहीं, इस पर निर्भर करता है कि दो मानों में से एक लौटाता है। @if तरह, false और null अलावा सभी मूल्यों को सत्य माना जाता है।

उदाहरण:

if(true, 1px, 2px) => 1px
if(false, 1px, 2px) => 2px

पैरामीटर:

  • $ शर्त (आधार) - चाहे $ if-true या $ if-false वापस आ जाएगा
  • $ if-true (वृक्ष :: नोड)
  • $ if-false (वृक्ष :: नोड)

यह दिखाता है:

  • (आधार) - $ if-true या $ if-false

सूचकांक ($ सूची, $ मूल्य)

एक सूची के भीतर एक मूल्य की स्थिति देता है। यदि मान नहीं मिला है, तो बदले में null वापस आती है।

ध्यान दें कि कुछ भाषाओं के विपरीत, सास सूची में पहला आइटम नंबर 1, दूसरा नंबर 2 और बहुत आगे है।

यह एक जोड़ी की स्थिति को मानचित्र में भी वापस कर सकता है।

उदाहरण:

index(1px solid red, solid) => 2
index(1px solid red, dashed) => null
index((width: 10px, height: 20px), (height 20px)) => 2

पैरामीटर:

  • $ सूची (आधार)
  • $ मूल्य (आधार)

यह दिखाता है:

  • (संख्या, शून्य) - $ सूची में $ मूल्य का 1-आधारित सूचकांक, या शून्य

निरीक्षण ($ मूल्य)

मूल्य को एक स्ट्रिंग लौटाएं जिसमें उसके सास का प्रतिनिधित्व होता है।

पैरामीटर:

  • $ मूल्य (आधार) - निरीक्षण करने के लिए मूल्य।

यह दिखाता है:

  • (स्ट्रिंग) - मूल्य का प्रतिनिधित्व जैसा कि यह सास में लिखा जाएगा।

उलटा ($ रंग) उलटा ($ रंग, $ वजन: 100%)

एक रंग के व्यस्त (नकारात्मक) देता है। लाल, हरे और नीले मूल्यों को उलटा कर दिया जाता है, जबकि अस्पष्टता अकेली रहती है।

भार के:

  • उलटा ($ रंग)

    पैरामीटर:

    • $ रंग (रंग)
  • उलटा ($ रंग, $ वजन: 100%)

    पैरामीटर:

    • $ रंग (रंग)
    • $ वजन (संख्या) - रंगीन रंग के विपरीत के सापेक्ष वजन

यह दिखाता है:

  • (रंग)

जन्म देती है:

  • (ArgumentError) - अगर $ रंग रंग नहीं है या $ वजन 0% और 100% के बीच प्रतिशत नहीं है

is_bracketed ($ सूची)

यह लौटाता है कि कोई सूची स्क्वायर ब्रैकेट का उपयोग करती है या नहीं।

उदाहरण:

is-bracketed(1px 2px 3px) => false
is-bracketed([1px, 2px, 3px]) => true

पैरामीटर:

  • $ सूची (आधार)

यह दिखाता है:

  • (Bool)

is_superselector ($ सुपर, $ उप)

रिटर्न करता है कि $super $sub का सुपरसइलेक्टर है या नहीं। इसका मतलब यह है कि $super उन सभी तत्वों से मेल खाता है जो $sub मैच, साथ ही संभवतः अतिरिक्त तत्व भी हैं। आम तौर पर, सरल चयनकर्ता अधिक जटिल ऑनड के सुपरसइलेक्टर होते हैं।

उदाहरण:

is-superselector(".foo", ".foo.bar") => true
is-superselector(".foo.bar", ".foo") => false
is-superselector(".bar", ".foo .bar") => true
is-superselector(".foo .bar", ".bar") => false

रिटर्न करता है कि $selector1 का सुपरसइलेक्टर है या नहीं।

पैरामीटर:

  • $ सुपर (स्ट्रिंग, सूची) - संभावित सुपरसइलेक्टर। यह या तो एक स्ट्रिंग, तारों की एक सूची, या तारों की सूचियों की एक सूची हो सकती है जैसा कि & द्वारा लौटाया गया है।
  • $ सब (स्ट्रिंग, सूची) - संभावित उप- चयनकर्ता। यह या तो एक स्ट्रिंग, तारों की एक सूची, या तारों की सूचियों की एक सूची हो सकती है जैसा कि & द्वारा लौटाया गया है।

यह दिखाता है:

  • (बूल) - चाहे $ selector1 $ selector2 का सुपरसइलेक्टर है।

शामिल हों ($ list1, $ list2, $ विभाजक: ऑटो, $ ब्रैकेट: ऑटो)

एक में दो सूचियों को एक साथ जोड़ता है।

जब तक कि $separator जाता है, यदि एक सूची अल्पविराम से अलग होती है और एक स्थान अलग होता है, तो परिणामस्वरूप सूची के लिए पहला पैरामीटर का विभाजक उपयोग किया जाता है। यदि दोनों सूचियों में दो से कम आइटम हैं, तो परिणामी सूची के लिए रिक्त स्थान का उपयोग किया जाता है।

जब तक $bracketed जाता है, तब तक परिणामस्वरूप सूची ब्रैकेट की जाती है जब पहला पैरामीटर होता है।

सभी सूची कार्यों की तरह, join() में अपने तर्कों को संशोधित करने के बजाय join() एक नई सूची देता है।

उदाहरण:

join(10px 20px, 30px 40px) => 10px 20px 30px 40px
join((blue, red), (#abc, #def)) => blue, red, #abc, #def
join(10px, 20px) => 10px 20px
join(10px, 20px, comma) => 10px, 20px
join((blue, red), (#abc, #def), space) => blue red #abc #def
join([10px], 20px) => [10px 20px]

पैरामीटर:

  • $ सूची 1 (आधार)
  • $ list2 (बेस)
  • $ विभाजक (स्ट्रिंग) - सूची विभाजक का उपयोग करने के लिए। यदि यह अल्पविराम या स्थान है, तो विभाजक का उपयोग किया जाएगा। यदि यह ऑटो (डिफ़ॉल्ट) है, तो विभाजक ऊपर वर्णित अनुसार निर्धारित किया गया है।
  • $ ब्रैकेट (बेस) - क्या परिणामस्वरूप सूची ब्रैकेट की जाएगी। यदि यह ऑटो (डिफ़ॉल्ट) है, तो विभाजक ऊपर वर्णित अनुसार निर्धारित किया गया है।

यह दिखाता है:

  • (सूची)

कीवर्ड ($ args)

नामित तर्कों का मानचित्र किसी फ़ंक्शन या मिक्सिन को पास करता है जो एक चर तर्क तर्क सूची लेता है। तर्क नाम तार हैं, और उनमें अग्रणी $ शामिल नहीं है।

उदाहरण:

@mixin foo($args...) {
  @debug keywords($args); //=> (arg1: val, arg2: val)
}

@include foo($arg1: val, $arg2: val);

पैरामीटर:

  • $ args (ArgList)

यह दिखाता है:

  • (नक्शा)

जन्म देती है:

  • (ArgumentError) - अगर $ args एक चर तर्क तर्क सूची नहीं है

लंबाई ($ सूची)

एक सूची की लंबाई लौटें।

यह मानचित्र में जोड़े की संख्या भी वापस कर सकता है।

उदाहरण:

length(10px) => 1
length(10px 20px 30px) => 3
length((width: 10px, height: 20px)) => 2

पैरामीटर:

  • $ सूची (आधार)

यह दिखाता है:

  • (संख्या)

हल्का ($ रंग, $ राशि)

एक रंग हल्का बनाता है। एक रंग और 0% और 100% बीच एक संख्या लेता है, और उस राशि से हल्कीपन के साथ एक रंग देता है।

उदाहरण:

lighten(hsl(0, 0%, 0%), 30%) => hsl(0, 0, 30)
lighten(#800, 20%) => #e00

पैरामीटर:

  • $ रंग (रंग)
  • $ राशि (संख्या) - 0% और 100% के बीच, हल्केपन को बढ़ाने की राशि

यह दिखाता है:

  • (रंग)

जन्म देती है:

  • (ArgumentError) - यदि $ राशि सीमा से बाहर है, या तो पैरामीटर गलत प्रकार है

हल्कापन ($ रंग)

एक रंग के लाइटनेस घटक देता है। CSS3 एचएसएल विनिर्देश देखें। इस एल्गोरिदम के माध्यम से आवश्यक आरजीबी से गणना की।

पैरामीटर:

  • $ रंग (रंग)

यह दिखाता है:

  • (संख्या) - लाइटनेस घटक, 0% और 100% के बीच

जन्म देती है:

  • (ArgumentError) - अगर $ रंग रंग नहीं है

list_separator ($ सूची)

एक सूची के विभाजक देता है। यदि सूची में दो से कम तत्व होने के कारण विभाजक नहीं है, तो space लौटाता space

उदाहरण:

list-separator(1px 2px 3px) => space
list-separator(1px, 2px, 3px) => comma
list-separator('foo') => space

पैरामीटर:

  • $ सूची (आधार)

यह दिखाता है:

  • (स्ट्रिंग) - अल्पविराम या अंतरिक्ष

map_get ($ मानचित्र, $ कुंजी)

दिए गए कुंजी से जुड़े मानचित्र में मान देता है। यदि मानचित्र में ऐसी कुंजी नहीं है, तो null वापस आती है।

उदाहरण:

map-get(("foo": 1, "bar": 2), "foo") => 1
map-get(("foo": 1, "bar": 2), "bar") => 2
map-get(("foo": 1, "bar": 2), "baz") => null

पैरामीटर:

  • $ मानचित्र (मानचित्र)
  • $ कुंजी (आधार)

यह दिखाता है:

  • (आधार) - यदि मूल्य में कुंजी शामिल नहीं है तो $ कुंजी द्वारा अनुक्रमित मान, या शून्य

जन्म देती है:

  • (ArgumentError) - अगर $ नक्शा एक नक्शा नहीं है

map_has_key ($ मानचित्र, $ कुंजी)

यह लौटाता है कि किसी मानचित्र के पास किसी दिए गए कुंजी से संबंधित मान है या नहीं।

उदाहरण:

map-has-key(("foo": 1, "bar": 2), "foo") => true
map-has-key(("foo": 1, "bar": 2), "baz") => false

पैरामीटर:

  • $ मानचित्र (मानचित्र)
  • $ कुंजी (आधार)

यह दिखाता है:

  • (Bool)

जन्म देती है:

  • (ArgumentError) - अगर $ नक्शा एक नक्शा नहीं है

map_keys ($ नक्शा)

मानचित्र में सभी कुंजियों की एक सूची देता है।

उदाहरण:

map-keys(("foo": 1, "bar": 2)) => "foo", "bar"

पैरामीटर:

  • $ मानचित्र (मानचित्र)

यह दिखाता है:

  • (सूची) - कुंजी की सूची, अल्पविराम से अलग

जन्म देती है:

  • (ArgumentError) - अगर $ नक्शा एक नक्शा नहीं है

map_merge ($ map1, $ map2)

दो मानचित्र एक साथ नए मानचित्र में विलय करता है। $map2 में कीज़ $map2 में चाबियों पर प्राथमिकता $map1

मानचित्र में नए मान जोड़ने का यह सबसे अच्छा तरीका है।

लौटाए गए मानचित्र में सभी कुंजियां जो $map1 में दिखाई $map1 हैं, वही ऑर्डर $map1 रूप में $map1 । मानचित्र के अंत में $map2 से नई कुंजी $map2 जाएगी।

सभी मानचित्र कार्यों की तरह, map-merge() अपने तर्कों को संशोधित करने के बजाय एक नया मानचित्र देता है।

उदाहरण:

map-merge(("foo": 1), ("bar": 2)) => ("foo": 1, "bar": 2)
map-merge(("foo": 1, "bar": 2), ("bar": 3)) => ("foo": 1, "bar": 3)

पैरामीटर:

  • $ map1 (मानचित्र)
  • $ map2 (मानचित्र)

यह दिखाता है:

  • (नक्शा)

जन्म देती है:

  • (ArgumentError) - यदि कोई पैरामीटर मानचित्र नहीं है

map_remove ($ मानचित्र, $ कुंजी ...)

कुंजी हटाए गए एक नया नक्शा देता है।

सभी मानचित्र कार्यों की तरह, map-merge() अपने तर्कों को संशोधित करने के बजाय एक नया मानचित्र देता है।

उदाहरण:

map-remove(("foo": 1, "bar": 2), "bar") => ("foo": 1)
map-remove(("foo": 1, "bar": 2, "baz": 3), "bar", "baz") => ("foo": 1)
map-remove(("foo": 1, "bar": 2), "baz") => ("foo": 1, "bar": 2)

पैरामीटर:

  • $ मानचित्र (मानचित्र)
  • $ कुंजी ([आधार])

यह दिखाता है:

  • (नक्शा)

जन्म देती है:

  • (ArgumentError) - अगर $ नक्शा एक नक्शा नहीं है

map_values ​​($ नक्शा)

मानचित्र में सभी मानों की एक सूची देता है। इस सूची में डुप्लिकेट मान शामिल हो सकते हैं, यदि एकाधिक कुंजियों का एक ही मान है।

उदाहरण:

map-values(("foo": 1, "bar": 2)) => 1, 2
map-values(("foo": 1, "bar": 2, "baz": 1)) => 1, 2, 1

पैरामीटर:

  • $ मानचित्र (मानचित्र)

यह दिखाता है:

  • (सूची) - मूल्यों की सूची, अल्पविराम से अलग

जन्म देती है:

  • (ArgumentError) - अगर $ नक्शा एक नक्शा नहीं है

अधिकतम ($ संख्या ...)

अधिकतम संख्याओं को पाता है। यह फ़ंक्शन किसी भी संख्या में तर्क लेता है।

उदाहरण:

max(1px, 4px) => 4px
max(5em, 3em, 4em) => 5em

पैरामीटर:

  • $ संख्या ([संख्या])

यह दिखाता है:

  • (संख्या)

जन्म देती है:

  • (ArgumentError) - यदि कोई तर्क कोई संख्या नहीं है, या यदि सभी तर्कों में तुलनीय इकाइयां नहीं हैं

मिनट ($ संख्या ...)

कम से कम कई संख्याएं पाता है। यह फ़ंक्शन किसी भी संख्या में तर्क लेता है।

उदाहरण:

min(1px, 4px) => 1px
min(5em, 3em, 4em) => 3em

पैरामीटर:

  • $ संख्या ([संख्या])

यह दिखाता है:

  • (संख्या)

जन्म देती है:

  • (ArgumentError) - यदि कोई तर्क कोई संख्या नहीं है, या यदि सभी तर्कों में तुलनीय इकाइयां नहीं हैं

मिश्रण ($ रंग 1, $ रंग 2, $ वजन: 50%)

एक साथ दो रंग मिलाता है। विशेष रूप से, प्रत्येक आरजीबी घटकों का औसत लेता है, वैकल्पिक रूप से दिए गए प्रतिशत द्वारा भारित। घटकों को वज़न करते समय रंगों की अस्पष्टता पर भी विचार किया जाता है।

वजन पहले रंग की मात्रा निर्दिष्ट करता है जिसे लौटा रंग में शामिल किया जाना चाहिए। डिफ़ॉल्ट, 50% , इसका मतलब है कि आधा पहला रंग और आधे दूसरे रंग का उपयोग किया जाना चाहिए। 25% मतलब है कि पहले रंग की एक चौथाई और दूसरे रंग के तीन चौथाई का उपयोग किया जाना चाहिए।

उदाहरण:

mix(#f00, #00f) => #7f007f
mix(#f00, #00f, 25%) => #3f00bf
mix(rgba(255, 0, 0, 0.5), #00f) => rgba(63, 0, 191, 0.75)

पैरामीटर:

  • $ रंग 1 (रंग)
  • $ रंग 2 (रंग)
  • $ वजन (संख्या) - प्रत्येक रंग का सापेक्ष वजन। 100% के करीब $ रंग 1 के लिए अधिक वजन देता है, 0% के करीब $ color2 के लिए अधिक वजन देता है

यह दिखाता है:

  • (रंग)

जन्म देती है:

  • (ArgumentError) - यदि $ वजन सीमा से बाहर है या कोई पैरामीटर गलत प्रकार है

mixin_exists ($ नाम)

जांचें कि दिए गए नाम के साथ एक मिश्रण मौजूद है या नहीं।

उदाहरण:

mixin-exists(nonexistent) => false

@mixin red-text { color: red; }
mixin-exists(red-text) => true

पैरामीटर:

  • नाम (स्ट्रिंग) - जांचने के लिए मिश्रण का नाम।

यह दिखाता है:

  • (बूल) - क्या मिश्रण परिभाषित किया गया है।

एनटी ($ सूची, $ एन)

सूची में एनटी आइटम प्राप्त करता है।

ध्यान दें कि कुछ भाषाओं के विपरीत, सास सूची में पहला आइटम नंबर 1, दूसरा नंबर 2 और बहुत आगे है।

यह एनएच जोड़ी को मानचित्र में भी वापस कर सकता है।

ऋणात्मक सूचकांक मूल्य सूची में अंतिम तत्व से शुरू, रिवर्स ऑर्डर में तत्वों को संबोधित करता है।

उदाहरण:

nth(10px 20px 30px, 1) => 10px
nth((Helvetica, Arial, sans-serif), 3) => sans-serif
nth((width: 10px, length: 20px), 2) => length, 20px

पैरामीटर:

  • $ सूची (आधार)
  • $ एन (संख्या) - प्राप्त करने के लिए आइटम की अनुक्रमणिका। नकारात्मक सूचकांक सूची के अंत से गिना जाता है।

यह दिखाता है:

  • (आधार)

जन्म देती है:

  • (ArgumentError) - यदि $ n 1 और $ सूची की लंबाई के बीच एक पूर्णांक नहीं है

opacify ($ रंग, $ राशि) के रूप में भी जाना जाता है: fade_in

एक रंग अधिक अपारदर्शी बनाता है। एक रंग और 0 और 1 के बीच एक संख्या लेता है, और उस राशि से अस्पष्टता के साथ एक रंग देता है।

उदाहरण:

opacify(rgba(0, 0, 0, 0.5), 0.1) => rgba(0, 0, 0, 0.6)
opacify(rgba(0, 0, 17, 0.8), 0.2) => #001

पैरामीटर:

  • $ रंग (रंग)
  • $ राशि (संख्या) - 0 और 1 के बीच अस्पष्टता बढ़ाने की राशि

यह दिखाता है:

  • (रंग)

जन्म देती है:

  • (ArgumentError) - यदि $ राशि सीमा से बाहर है, या तो पैरामीटर गलत प्रकार है

अस्पष्टता ($ रंग)

एक रंग के अल्फा घटक (अस्पष्टता) देता है। यह तब तक 1 है जब तक अन्यथा निर्दिष्ट नहीं किया जाता है।

पैरामीटर:

  • $ रंग (रंग)

यह दिखाता है:

  • (संख्या) - 0 और 1 के बीच अल्फा घटक

जन्म देती है:

  • (ArgumentError) - अगर $ रंग रंग नहीं है

प्रतिशत ($ संख्या)

एक इकाई रहित संख्या को प्रतिशत में परिवर्तित करता है।

उदाहरण:

percentage(0.2) => 20%
percentage(100px / 50px) => 200%

पैरामीटर:

  • $ संख्या (संख्या)

यह दिखाता है:

  • (संख्या)

जन्म देती है:

  • (ArgumentError) - यदि $ संख्या एक यूनिटलेस नंबर नहीं है

बोली ($ स्ट्रिंग)

यदि स्ट्रिंग को उद्धृत नहीं किया गया है, तो स्ट्रिंग में उद्धरण जोड़ें, या यदि यह है तो समान स्ट्रिंग देता है।

उदाहरण:

quote("foo") => "foo"
quote(foo) => "foo"

पैरामीटर:

  • $ स्ट्रिंग (स्ट्रिंग)

यह दिखाता है:

  • (स्ट्रिंग)

जन्म देती है:

  • (ArgumentError) - अगर $ स्ट्रिंग एक स्ट्रिंग नहीं है

यादृच्छिक यादृच्छिक ($ सीमा)

भार के:

  • बिना सोचे समझे

    0 और 1 के बीच दशमलव को वापस करें, जिसमें 0 शामिल है लेकिन 1 नहीं।

    यह दिखाता है:

    • (संख्या) - एक दशमलव मान।
  • यादृच्छिक ($ सीमा)

    1 और $limit दोनों के बीच 1 और $limit बीच एक पूर्णांक लौटाएं।

    पैरामीटर:

    • $ सीमा (संख्या) - अधिकतम यादृच्छिक पूर्णांक लौटाया जा सकता है, एक सकारात्मक पूर्णांक।

    यह दिखाता है:

    • (संख्या) - एक पूर्णांक।

    जन्म देती है:

    • (ArgumentError) - अगर $ सीमा 1 या अधिक नहीं है

लाल ($ रंग)

एक रंग के लाल घटक हो जाता है। एचएसएल से गणना की जहां इस एल्गोरिदम के माध्यम से आवश्यक है

पैरामीटर:

  • $ रंग (रंग)

यह दिखाता है:

  • (संख्या) - लाल घटक, 0 और 255 के बीच समावेशी

जन्म देती है:

  • (ArgumentError) - अगर $ रंग रंग नहीं है

आरजीबी ($ लाल, $ हरा, $ नीला)

लाल, हरे और नीले मानों से Color वस्तु बनाता है।

पैरामीटर:

  • $ लाल (संख्या) - रंग में लाल की मात्रा। 0 और 255 समावेशी, या 0% और 100% समावेशी के बीच होना चाहिए
  • $ हरा (संख्या) - रंग में हरे रंग की मात्रा। 0 और 255 समावेशी, या 0% और 100% समावेशी के बीच होना चाहिए
  • $ नीला (संख्या) - रंग में नीले रंग की मात्रा। 0 और 255 समावेशी, या 0% और 100% समावेशी के बीच होना चाहिए

यह दिखाता है:

  • (रंग)

जन्म देती है:

  • (ArgumentError) - यदि कोई पैरामीटर गलत प्रकार या सीमा से बाहर है

आरजीबीए ($ लाल, $ हरा, $ नीला, $ अल्फा) आरजीबीए ($ रंग, $ अल्फा)

लाल, हरे, नीले, और अल्फा मानों से Color बनाता है।

भार के:

  • आरजीबीए ($ लाल, $ हरा, $ नीला, $ अल्फा)

    पैरामीटर:

    • $ लाल (संख्या) - रंग में लाल की मात्रा। 0 और 255 समावेशी या 0% और 100% समावेशी के बीच होना चाहिए
    • $ हरा (संख्या) - रंग में हरे रंग की मात्रा। 0 और 255 समावेशी या 0% और 100% समावेशी के बीच होना चाहिए
    • $ नीला (संख्या) - रंग में नीले रंग की मात्रा। 0 और 255 समावेशी या 0% और 100% समावेशी के बीच होना चाहिए
    • $ अल्फा (संख्या) - रंग की अस्पष्टता। 0 और 1 के बीच होना चाहिए

    यह दिखाता है:

    • (रंग)

    जन्म देती है:

    • (ArgumentError) - यदि कोई पैरामीटर गलत प्रकार या सीमा से बाहर है
  • आरजीबीए ($ रंग, $ अल्फा)

    मौजूदा रंग की अस्पष्टता सेट करता है।

    उदाहरण:

    rgba(#102030, 0.5) => rgba(16, 32, 48, 0.5)
    rgba(blue, 0.2)    => rgba(0, 0, 255, 0.2)

    पैरामीटर:

    • $ रंग (रंग) - वह रंग जिसका अस्पष्टता बदला जाएगा।
    • $ अल्फा (संख्या) - रंग की नई अस्पष्टता। 0 और 1 के बीच होना चाहिए

    यह दिखाता है:

    • (रंग)

    जन्म देती है:

    • (ArgumentError) - यदि $ अल्फा सीमा से बाहर है या तो पैरामीटर गलत प्रकार है

दौर ($ संख्या)

निकटतम पूर्ण संख्या में एक संख्या को बढ़ाता है।

उदाहरण:

round(10.4px) => 10px
round(10.6px) => 11px

पैरामीटर:

  • $ संख्या (संख्या)

यह दिखाता है:

  • (संख्या)

जन्म देती है:

  • (ArgumentError) - यदि $ संख्या एक संख्या नहीं है

संतृप्त ($ रंग, $ राशि)

एक रंग अधिक संतृप्त बनाता है। एक रंग और 0% और 100% के बीच एक संख्या लेता है, और उस राशि से संतृप्ति के साथ एक रंग देता है।

उदाहरण:

saturate(hsl(120, 30%, 90%), 20%) => hsl(120, 50%, 90%)
saturate(#855, 20%) => #9e3f3f

पैरामीटर:

  • $ रंग (रंग)
  • $ राशि (संख्या) - 0% और 100% के बीच संतृप्ति बढ़ाने की राशि

यह दिखाता है:

  • (रंग)

जन्म देती है:

  • (ArgumentError) - यदि $ राशि सीमा से बाहर है, या तो पैरामीटर गलत प्रकार है

संतृप्ति ($ रंग)

एक रंग के संतृप्ति घटक देता है। CSS3 एचएसएल विनिर्देश देखें। इस एल्गोरिदम के माध्यम से आवश्यक आरजीबी से गणना की।

पैरामीटर:

  • $ रंग (रंग)

यह दिखाता है:

  • (संख्या) - संतृप्ति घटक, 0% और 100% के बीच

जन्म देती है:

  • (ArgumentError) - अगर $ रंग रंग नहीं है

scale_color ($ रंग, [$ लाल], [$ हरा], [$ नीला], [$ संतृप्ति], [$ हल्कापन], [$ अल्फा])

एक रंग के एक या अधिक गुणों को स्पष्ट रूप से स्केल करता है। adjust-color विपरीत, जो निश्चित मात्रा में रंग की गुणों को बदलता है, scale-color द्रव रूप से उन पर निर्भर करता है कि वे कितने उच्च या निम्न हैं। इसका मतलब है कि scale-color रंग के साथ पहले से ही हल्के रंग को हल्का करना हल्कापन नहीं बदलेगा, लेकिन उसी राशि से एक गहरे रंग को हल्का करने से यह नाटकीय रूप से बदल जाएगा। scale-color($color, ...) बनाने का लाभ यह है कि इस पर ध्यान दिए बिना कि $color क्या है।

उदाहरण के लिए, रंग की हल्कीता 0% और 100% बीच कहीं भी हो सकती है। यदि scale-color($color, $lightness: 40%) कहा जाता है, जिसके परिणामस्वरूप रंग की हल्कीता इसकी मूल हल्की और 100 के बीच 40% होगी। यदि scale-color($color, $lightness: -40%) इसके बजाए कहा जाता है, मूल और 0 के बीच की रोशनी 40% होगी।

यह लाल, हरा, नीला, संतृप्ति, मूल्य, और अल्फा गुणों को बदल सकता है। गुण कीवर्ड तर्क के रूप में निर्दिष्ट हैं। सभी तर्क 0% और 100% बीच प्रतिशत होना चाहिए।

सभी गुण वैकल्पिक हैं। आप एक ही समय में आरजीबी गुण ( $red , $green , $blue ) और एचएसएल गुण ( $saturation , $value ) दोनों निर्दिष्ट नहीं कर सकते हैं।

उदाहरण:

scale-color(hsl(120, 70%, 80%), $lightness: 50%) => hsl(120, 70%, 90%)
scale-color(rgb(200, 150%, 170%), $green: -40%, $blue: 70%) => rgb(200, 90, 229)
scale-color(hsl(200, 70%, 80%), $saturation: -90%, $alpha: -30%) => hsla(200, 7%, 80%, 0.7)

पैरामीटर:

  • $ रंग (रंग)
  • $ लाल (संख्या)
  • $ हरा (संख्या)
  • $ नीला (संख्या)
  • $ संतृप्ति (संख्या)
  • $ हल्कापन (संख्या)
  • $ अल्फा (संख्या)

यह दिखाता है:

  • (रंग)

जन्म देती है:

  • (ArgumentError) - यदि कोई पैरामीटर गलत प्रकार या सीमा से बाहर है, या यदि आरजीबी गुण और एचएसएल गुण एक ही समय में समायोजित किए जाते हैं

selector_append ($ चयनकर्ताओं ...)

$selectors चयनकर्ताओं में सभी चयनकर्ताओं के साथ एक नया चयनकर्ता लौटाएं, एक दूसरे को जोड़ा गया है, भले ही उन्हें स्टाइलशीट में $selector1 { &$selector2 { ... } } रूप में निहित किया गया हो।

उदाहरण:

selector-append(".foo", ".bar", ".baz") => .foo.bar.baz
selector-append(".a .foo", ".b .bar") => "a .foo.b .bar"
selector-append(".foo", "-suffix") => ".foo-suffix"

रिटर्न $selectors को जोड़ने के परिणाम का प्रतिनिधित्व करने वाले तारों की सूचियों की एक सूची। यह वही प्रारूप में है जैसा चयनकर्ता द्वारा लौटाया गया है।

पैरामीटर:

  • $ चयनकर्ता ([स्ट्रिंग, सूची]) - चयन करने के लिए चयनकर्ता। कम से कम एक चयनकर्ता पारित किया जाना चाहिए। इनमें से प्रत्येक या तो एक स्ट्रिंग, तारों की एक सूची, या स्ट्रिंग की सूचियों की एक सूची हो सकती है जैसा कि & quot।

यह दिखाता है:

  • (सूची) - $ चयनकर्ताओं को जोड़ने के परिणाम का प्रतिनिधित्व करने वाले तारों की सूचियों की एक सूची। यह वही प्रारूप में है जैसा चयनकर्ता द्वारा लौटाया गया है।

जन्म देती है:

  • (ArgumentError) - अगर एक चयनकर्ता जोड़ा नहीं जा सका।

selector_extend ($ चयनकर्ता, $ विस्तारक, $ विस्तारक)

$extender साथ $extender साथ $extender $selector का एक नया संस्करण देता है। यह सिर्फ परिणाम के समान काम करता है

$selector { ... }
$extender { @extend $extendee }

उदाहरण:

selector-extend(".a .b", ".b", ".foo .bar") => .a .b, .a .foo .bar, .foo .a .bar

रिटर्न एक्सटेंशन के परिणाम का प्रतिनिधित्व करने वाले तारों की सूचियों की एक सूची। यह वही प्रारूप में है जैसा चयनकर्ता द्वारा लौटाया गया है।

पैरामीटर:

  • $ चयनकर्ता (स्ट्रिंग, सूची) - चयनकर्ता जिसके भीतर $ विस्तारक $ विस्तारक के साथ बढ़ाया गया है। यह या तो एक स्ट्रिंग, तारों की एक सूची, या तारों की सूचियों की एक सूची हो सकती है जैसा कि & द्वारा लौटाया गया है।
  • $ विस्तारक (स्ट्रिंग, सूची) - चयनकर्ता विस्तारित किया जा रहा है। यह या तो एक स्ट्रिंग, तारों की एक सूची, या तारों की सूचियों की एक सूची हो सकती है जैसा कि & द्वारा लौटाया गया है।
  • $ विस्तारक (स्ट्रिंग, सूची) - चयनकर्ता को $ चयनकर्ता में इंजेक्शन दिया जा रहा है। यह या तो एक स्ट्रिंग, तारों की एक सूची, या तारों की सूचियों की एक सूची हो सकती है जैसा कि & द्वारा लौटाया गया है।

यह दिखाता है:

  • (सूची) - एक्सटेंशन के परिणाम का प्रतिनिधित्व करने वाले तारों की सूचियों की एक सूची। यह वही प्रारूप में है जैसा चयनकर्ता द्वारा लौटाया गया है।

जन्म देती है:

  • (ArgumentError) - अगर एक्सटेंशन विफल रहता है

selector_nest ($ चयनकर्ताओं ...)

एक दूसरे के नीचे घिरे $selectors चयनकर्ताओं में सभी चयनकर्ताओं के साथ एक नया चयनकर्ता लौटाएं, भले ही उन्हें स्टाइलशीट में $selector1 { $selector2 { ... } } रूप में घोंसला दिया गया हो।

Unlike most selector functions, selector-nest allows the parent selector & to be used in any selector but the first.

उदाहरण:

selector-nest(".foo", ".bar", ".baz") => .foo .bar .baz
selector-nest(".a .foo", ".b .bar") => .a .foo .b .bar
selector-nest(".foo", "&.bar") => .foo.bar

Returns A list of lists of strings representing the result of nesting $selectors . This is in the same format as a selector returned by & .

Parameters:

  • $selectors ([String, List])The selectors to nest. At least one selector must be passed. Each of these can be either a string, a list of strings, or a list of lists of strings as returned by &.

यह दिखाता है:

  • (List)A list of lists of strings representing the result of nesting $selectors. This is in the same format as a selector returned by &.

selector_parse($selector)

Parses a user-provided selector into a list of lists of strings as returned by & .

उदाहरण:

selector-parse(".foo .bar, .baz .bang") => ('.foo' '.bar', '.baz' '.bang')

Returns A list of lists of strings representing $selector . This is in the same format as a selector returned by & .

Parameters:

  • $selector (String, List)The selector to parse. This can be either a string, a list of strings, or a list of lists of strings as returned by &.

यह दिखाता है:

  • (List)A list of lists of strings representing $selector. This is in the same format as a selector returned by &.

selector_replace($selector, $original, $replacement)

Replaces all instances of $original with $replacement in $selector

This works by using @extend and throwing away the original selector. This means that it can be used to do very advanced replacements; see the examples below.

उदाहरण:

selector-replace(".foo .bar", ".bar", ".baz") => ".foo .baz"
selector-replace(".foo.bar.baz", ".foo.baz", ".qux") => ".bar.qux"

Returns A list of lists of strings representing the result of the extension. This is in the same format as a selector returned by & .

Parameters:

  • $selector (String, List)The selector within which $original is replaced with $replacement. This can be either a string, a list of strings, or a list of lists of strings as returned by &.
  • $original (String, List)The selector being replaced. This can be either a string, a list of strings, or a list of lists of strings as returned by &.
  • $replacement (String, List)The selector that $original is being replaced with. This can be either a string, a list of strings, or a list of lists of strings as returned by &.

यह दिखाता है:

  • (List)A list of lists of strings representing the result of the extension. This is in the same format as a selector returned by &.

जन्म देती है:

  • (ArgumentError)if the replacement fails

selector_unify($selector1, $selector2)

Unifies two selectors into a single selector that matches only elements matched by both input selectors. Returns null if there is no such selector.

Like the selector unification done for @extend , this doesn't guarantee that the output selector will match all elements matched by both input selectors. For example, if .a .b is unified with .x .y , .a .x .by, .x .a .by will be returned, but .ax .by will not. This avoids exponential output size while matching all elements that are likely to exist in practice.

उदाहरण:

selector-unify(".a", ".b") => .a.b
selector-unify(".a .b", ".x .y") => .a .x .b.y, .x .a .b.y
selector-unify(".a.b", ".b.c") => .a.b.c
selector-unify("#a", "#b") => null

Returns A list of lists of strings representing the result of the unification, or null if no unification exists. This is in the same format as a selector returned by & .

Parameters:

  • $selector1 (String, List)The first selector to be unified. This can be either a string, a list of strings, or a list of lists of strings as returned by &.
  • $selector2 (String, List)The second selector to be unified. This can be either a string, a list of strings, or a list of lists of strings as returned by &.

यह दिखाता है:

  • (List, Null)A list of lists of strings representing the result of the unification, or null if no unification exists. This is in the same format as a selector returned by &.

सेट

Return a new list, based on the list provided, but with the nth element changed to the value given.

Note that unlike some languages, the first item in a Sass list is number 1, the second number 2, and so forth.

Negative index values address elements in reverse order, starting with the last element in the list.

उदाहरण:

set-nth($list: 10px 20px 30px, $n: 2, $value: -20px) => 10px -20px 30px

Parameters:

  • $list (Base)The list that will be copied, having the element at index $n changed.
  • $n (Number)The index of the item to set. Negative indices count from the end of the list.
  • $value (Base)The new value at index $n.

यह दिखाता है:

  • (List)

जन्म देती है:

  • (ArgumentError)if $n isn't an integer between 1 and the length of $list

simple_selectors($selector)

Returns the simple selectors that comprise the compound selector $selector .

Note that $selector must be a compound selector . That means it cannot contain commas or spaces. It also means that unlike other selector functions, this takes only strings, not lists.

उदाहरण:

simple-selectors(".foo.bar") => ".foo", ".bar"
simple-selectors(".foo.bar.baz") => ".foo", ".bar", ".baz"

Returns A list of simple selectors in the compound selector.

Parameters:

  • $selector (String)The compound selector whose simple selectors will be extracted.

यह दिखाता है:

  • (List)A list of simple selectors in the compound selector.

str_index($string, $substring)

Returns the index of the first occurrence of $substring in $string . If there is no such occurrence, returns null .

Note that unlike some languages, the first character in a Sass string is number 1, the second number 2, and so forth.

उदाहरण:

str-index(abcd, a)  => 1
str-index(abcd, ab) => 1
str-index(abcd, X)  => null
str-index(abcd, c)  => 3

Parameters:

  • $string (String)
  • $substring (String)

यह दिखाता है:

  • (Number, Null)

जन्म देती है:

  • (ArgumentError)if any parameter is the wrong type

str_insert($string, $insert, $index)

Inserts $insert into $string at $index .

Note that unlike some languages, the first character in a Sass string is number 1, the second number 2, and so forth.

उदाहरण:

str-insert("abcd", "X", 1) => "Xabcd"
str-insert("abcd", "X", 4) => "abcXd"
str-insert("abcd", "X", 5) => "abcdX"

Parameters:

  • $string (String)
  • $insert (String)
  • $index (Number)The position at which $insert will be inserted. Negative indices count from the end of $string. An index that's outside the bounds of the string will insert $insert at the front or back of the string

यह दिखाता है:

  • (String)The result string. This will be quoted if and only if $string was quoted

जन्म देती है:

  • (ArgumentError)if any parameter is the wrong type

str_length($string)

Returns the number of characters in a string.

उदाहरण:

str-length("foo") => 3

Parameters:

  • $string (String)

यह दिखाता है:

  • (Number)

जन्म देती है:

  • (ArgumentError)if $string isn't a string

str_slice($string, $start-at, $end-at:-1)

Extracts a substring from $string . The substring will begin at index $start-at and ends at index $end-at .

Note that unlike some languages, the first character in a Sass string is number 1, the second number 2, and so forth.

उदाहरण:

str-slice("abcd", 2, 3)   => "bc"
str-slice("abcd", 2)      => "bcd"
str-slice("abcd", -3, -2) => "bc"
str-slice("abcd", 2, -2)  => "bc"

Returns The substring. This will be quoted if and only if $string was quoted

Parameters:

  • $start-at (Number)The index of the first character of the substring. If this is negative, it counts from the end of $string
  • $end-at (Number)The index of the last character of the substring. If this is negative, it counts from the end of $string. Defaults to -1

यह दिखाता है:

  • (String)The substring. This will be quoted if and only if $string was quoted

जन्म देती है:

  • (ArgumentError)if any parameter is the wrong type

to_lower_case($string)

Convert a string to lower case,

उदाहरण:

to-lower-case(ABCD) => abcd

Parameters:

  • $string (String)

यह दिखाता है:

  • (String)

जन्म देती है:

  • (ArgumentError)if $string isn't a string

to_upper_case($string)

Converts a string to upper case.

उदाहरण:

to-upper-case(abcd) => ABCD

Parameters:

  • $string (String)

यह दिखाता है:

  • (String)

जन्म देती है:

  • (ArgumentError)if $string isn't a string

transparentize($color, $amount) Also known as: fade_out

Makes a color more transparent. Takes a color and a number between 0 and 1, and returns a color with the opacity decreased by that amount.

उदाहरण:

transparentize(rgba(0, 0, 0, 0.5), 0.1) => rgba(0, 0, 0, 0.4)
transparentize(rgba(0, 0, 0, 0.8), 0.2) => rgba(0, 0, 0, 0.6)

Parameters:

  • $color (Color)
  • $amount (Number)The amount to decrease the opacity by, between 0 and 1

यह दिखाता है:

  • (Color)

जन्म देती है:

  • (ArgumentError)if $amount is out of bounds, or either parameter is the wrong type

type_of($value)

Returns the type of a value.

उदाहरण:

type-of(100px)  => number
type-of(asdf)   => string
type-of("asdf") => string
type-of(true)   => bool
type-of(#fff)   => color
type-of(blue)   => color
type-of(null)   => null
type-of(a b c)  => list
type-of((a: 1, b: 2)) => map
type-of(get-function("foo")) => function

Parameters:

  • $value (Base)The value to inspect

यह दिखाता है:

  • (String)The unquoted string name of the value's type

unique_id

Returns a unique CSS identifier. The identifier is returned as an unquoted string. The identifier returned is only guaranteed to be unique within the scope of a single Sass run.

यह दिखाता है:

  • (String)

unit($number)

Returns the unit(s) associated with a number. Complex units are sorted in alphabetical order by numerator and denominator.

उदाहरण:

unit(100) => ""
unit(100px) => "px"
unit(3em) => "em"
unit(10px * 5em) => "em*px"
unit(10px * 5em / 30cm / 1rem) => "em*px/cm*rem"

Parameters:

  • $number (Number)

यह दिखाता है:

  • (String)The unit(s) of the number, as a quoted string

जन्म देती है:

  • (ArgumentError)if $number isn't a number

unitless($number)

Returns whether a number has units.

उदाहरण:

unitless(100) => true
unitless(100px) => false

Parameters:

  • $number (Number)

यह दिखाता है:

  • (Bool)

जन्म देती है:

  • (ArgumentError)if $number isn't a number

unquote($string)

Removes quotes from a string. If the string is already unquoted, this will return it unmodified.

उदाहरण:

unquote("foo") => foo
unquote(foo) => foo

Parameters:

  • $string (String)

यह दिखाता है:

  • (String)

जन्म देती है:

  • (ArgumentError)if $string isn't a string

variable_exists($name)

Check whether a variable with the given name exists in the current scope or in the global scope.

उदाहरण:

$a-false-value: false;
variable-exists(a-false-value) => true
variable-exists(a-null-value) => true

variable-exists(nonexistent) => false

Parameters:

  • $name (String)The name of the variable to check. The name should not include the $.

यह दिखाता है:

  • (Bool)Whether the variable is defined in the current scope.

zip($lists...)

Combines several lists into a single multidimensional list. The nth value of the resulting list is a space separated list of the source lists' nth values.

The length of the resulting list is the length of the shortest list.

उदाहरण:

zip(1px 1px 3px, solid dashed solid, red green blue)
=> 1px solid red, 1px dashed green, 3px solid blue

Parameters:

  • $lists ([Base])

यह दिखाता है:

  • (List)

原文