सरलीकृत प्रसंग और घटनाएँ - सीएसएस-ट्रिक्स

सैस किसी तरह से ब्लैक बॉक्स का एक छोटा सा हिस्सा हो सकता है, विशेष रूप से युवा डेवलपर्स के लिए: आप कुछ चीजें डालते हैं, आप कुछ चीजें निकालते हैं। &उदाहरण के लिए चयनकर्ता संदर्भ ( ) लें , यह थोड़ा डरावना है।

यह कहा जा रहा है, यह इस तरह होना जरूरी नहीं है। हम इसके सिंटैक्स को दो से अधिक सरल मिश्रणों के साथ मित्रतापूर्ण बना सकते हैं।

आयोजन

सैस लिखते समय, आप अक्सर खुद को इस तरह से लिखते हुए पाते हैं:

.my-element ( color: red; &:hover, &:active, &:focus ( color: blue; ) )

काफी थकाऊ, और जरूरी नहीं कि पढ़ना आसान हो। हम इसे सरल बनाने के लिए थोड़ा मिश्रण बना सकते हैं।

/// Event wrapper /// @author Harry Roberts /// @param (Bool) $self (false) - Whether or not to include current selector /// @see https://twitter.com/csswizardry/status/478938530342006784 Original tweet from Harry Roberts @mixin on-event($self: false) ( @if $self ( &, &:hover, &:active, &:focus ( @content; ) ) @else ( &:hover, &:active, &:focus ( @content; ) ) )

हमारे पिछले उदाहरण का पुनर्लेखन:

.my-element ( color: red; @include on-event ( color: blue; ) )

बहुत बेहतर है, है ना?

अब यदि हम चयनकर्ता को ही शामिल करना चाहते हैं, तो हम $selfपैरामीटर को निर्धारित कर सकते हैं true। उदाहरण के लिए:

.my-element ( @include on-event($self: true) ( color: blue; ) )

यह SCSS स्निपेट निकलेगा:

.my-element, .my-element:hover, .my-element:active, .my-element:focus ( color: blue )

संदर्भों

उसी पंक्तियों के साथ, उसके पास माता-पिता के आधार पर एक तत्व को स्टाइल करना असामान्य नहीं है। उदाहरण के लिए, कुछ इस तरह:

.my-element ( display: flex; .no-flexbox & ( display: table; ) )

चलो एक सरल मिश्रण के साथ वाक्यविन्यास को फिर से थोड़ा अधिक अनुकूल बनाते हैं:

/// Contexts /// @author Hugo Giraudel /// @param (String | List) $context @mixin when-inside($context) ( #($context) & ( @content; ) )

हमारे पिछले उदाहरण का पुनर्लेखन:

.my-element ( display: flex; @include when-inside('.no-flexbox') ( display: table; ) )