मिश्रण से उपसर्ग गुण - सीएसएस-ट्रिक्स

यदि आप अपने स्वयं के सीएसएस विक्रेता को उपसर्ग (बल्कि कहना, ऑटोप्रेक्सिफ़र या कम्पास) को संभालने में रुचि रखते हैं, तो यहाँ उस के साथ मदद करने के लिए एक मिश्रण है। हर चीज के लिए हर ज्ञात उपसर्ग को जोड़ने के बजाय, आप इसे उन उपसर्गों को पारित करते हैं जो आप उपयोग करना चाहते हैं, इसलिए आपके पास आउटपुट पर अधिक महीन दानेदार नियंत्रण है।

सरल संस्करण

/// Mixin to prefix a property /// @author Hugo Giraudel /// @param (String) $property - Property name /// @param (*) $value - Property value /// @param (List) $prefixes (()) - List of prefixes to print @mixin prefix($property, $value, $prefixes: ()) ( @each $prefix in $prefixes ( #('-' + $prefix + '-' + $property): $value; ) // Output standard non-prefixed declaration #($property): $value; )

उपयोग:

.selector ( @include prefix(transform, rotate(45deg), webkit ms); )

आउटपुट:

.selector ( -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); )

उन्नत संस्करण

ध्यान दें कि यह संस्करण सैस के नक्शे का उपयोग करता है, इसलिए संस्करण 3.3 या उच्चतर की आवश्यकता होती है।

/// Mixin to prefix several properties at once /// @author Hugo Giraudel /// @param (Map) $declarations - Declarations to prefix /// @param (List) $prefixes (()) - List of prefixes to print @mixin prefix($declarations, $prefixes: ()) ( @each $property, $value in $declarations ( @each $prefix in $prefixes ( #('-' + $prefix + '-' + $property): $value; ) // Output standard non-prefixed declaration #($property): $value; ) )

उपयोग:

.selector ( @include prefix(( column-count: 3, column-gap: 1.5em, column-rule: 2px solid hotpink ), webkit moz); )

आउटपुट:

.selector ( -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; -webkit-column-gap: 1.5em; -moz-column-gap: 1.5em; column-gap: 1.5em; -webkit-column-rule: 2px solid hotpink; -moz-column-rule: 2px solid hotpink; column-rule: 2px solid hotpink; )