यदि वहाँ एक आशुलिपि सीएसएस नाटकीय रूप से छूट जाए, यह यह संभव परिभाषित करने के लिए कर रही है positionसंपत्ति, साथ ही चार ऑफसेट गुण ( top, right, bottom, left)।
सौभाग्य से, यह आमतौर पर एक ऐसी चीज है जिसे सीएसएस प्रीप्रोसेसर जैसे सैस से हल किया जा सकता है। हमें केवल 5 संपत्तियों को मैन्युअल रूप से घोषित करने से बचाने के लिए एक सरल मिश्रण का निर्माण करना होगा।
/// Shorthand mixin for offset positioning /// @param (String) $position - Either `relative`, `absolute` or `fixed` /// @param (Length) $top (null) - Top offset /// @param (Length) $right (null) - Right offset /// @param (Length) $bottom (null) - Bottom offset /// @param (Length) $left (null) - Left offset @mixin position($position, $top: null, $right: null, $bottom: null, $left: null) ( position: $position; top: $top; right: $right; bottom: $bottom; left: $left; )अब बात हम नामांकित तर्कों पर भरोसा करते हैं जब इस मिश्रण का उपयोग करते हुए उन सभी को सेट करने से बचने के लिए जब केवल एक या दो वांछित होते हैं। निम्नलिखित कोड पर विचार करें:
.foo ( @include position(absolute, $top: 1em, $left: 50%); )... जो इसमें संकलित है:
.foo ( position: absolute; top: 1em; left: 50%; )वास्तव में, सैस कभी भी ऐसी संपत्ति का उत्पादन नहीं करता है जिसका मूल्य होता है null।
एपीआई को सरल बनाना
हम इसे पहले तर्क के रूप में परिभाषित करने के बजाय स्थिति के प्रकार को मिक्सिन नाम पर ले जा सकते हैं। ऐसा करने के लिए, हमें तीन अतिरिक्त मिश्रणों की आवश्यकता होती है जो कि केवल हमारे द्वारा परिभाषित `स्थिति` मिश्रण के लिए उपनाम के रूप में काम करेंगे।
/// Shorthand mixin for absolute positioning /// Serves as an alias for `position(absolute,… )` /// @param (Arglist) $args - Offsets /// @require (mixin) position @mixin absolute($args… ) ( @include position(absolute, $args… ); ) /// Shorthand mixin for relative positioning /// Serves as an alias for `position(relative,… )` /// @param (Arglist) $args - Offsets /// @require (mixin) position @mixin relative($args… ) ( @include position(relative, $args… ); ) /// Shorthand mixin for fixed positioning /// Serves as an alias for `position(fixed,… )` /// @param (Arglist) $args - Offsets /// @require (mixin) position @mixin fixed($args… ) ( @include position(fixed, $args… ); )हमारे पिछले उदाहरण का पुनर्लेखन:
.foo ( @include absolute($top: 1em, $left: 50%); )आगे बढ़ते हुए
यदि आप निब (स्टाइलस फ्रेमवर्क) द्वारा प्रस्तावित एक सिंटैक्स के करीब चाहते हैं, तो मैं आपको इस लेख पर एक नज़र डालने की सलाह देता हूं।
.foo ( @include absolute(top 1em left 50%); )