एससीएसएस वैरिएबल @extend क्लास

Question

मेरा विचार यह है कि मैं input[type=text], input[type="password"] और input[type=submit] के लिए चुप कक्षाएं लिखना चाहता हूं। मैं फिर @extend उन्हें एक चर के रूप में हेम पास करके एक मिश्रण में होगा।

मेरा पार्सर इस त्रुटि को फेंक रहा है;

Syntax error: Invalid CSS after " @extend ": expected selector_sequence, was "$type;" 

यहां मेरा कोड है;

%text { 
    (text styling) 
} 

%password { 
    @extend %text; 
} 

%submit { 
    padding: .5em; 
    background-color: $button-color; 
    border: none; 
    cursor: pointer; 
    color: white; 
    border: 1px solid darken($button-color, 20%); 
    &:hover { 
     @include transition; 
     background-color: darken($button-color, 10%); 
    } 
} 

@mixin input($type) { 
    margin-bottom: 1.5em; 
    margin-left: 0; 
    outline: none; 
    @extend $type; 
} 

किसी भी मदद की सराहना की जाएगी

Answer 1

SASS Reference

Answer 2

पर चर प्रक्षेप का उपयोग कर

@extend #{$type}; 

अधिक जानकारी जबकि फ़ैब्रिज़ियो की जवाब औपचारिक रूप से सही है की कोशिश, कि जिस तरह से नहीं जा रहा पर विचार करें।

किसी भी प्रकार के प्रोग्रामिंग में एक अच्छा नियम है: "इसे सरल, बेवकूफ रखें!" उर्फ KISS।

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

इस कोड को वास्तव में आप क्या चाहते हैं करता है:

///////////////// 
// Silent classes 
///////////////// 

%input { 
    margin-bottom: 1.5em; 
    margin-left: 0; 
    outline: none; 
} 

%text { 
    @extend %input; 
    font-family: Verdana; 
} 

%password { 
    @extend %text; 
} 

%submit { 
    @extend %input; 
    padding: .5em; 
    background-color: $button-color; 
    border: none; 
    cursor: pointer; 
    color: white; 
    border: 1px solid darken($button-color, 20%); 
    &:hover { 
     @include transition; 
     background-color: darken($button-color, 10%); 
    } 
} 



/////////////////////////// 
// Applying silent classes: 
/////////////////////////// 

.some .weirdly .nested input[type=text] { 
    @extend %text; 
} 

.password { 
    @extend %password; 
} 

#the-submit-button { 
    @extend %submit; 
} 

डेमो: आप, कस्टम वर्गों/आईडी के लिए शैलियाँ लागू इस दृष्टिकोण पर विचार करना चाहते हैं

input { 
    margin-bottom: 1.5em; 
    margin-left: 0; 
    outline: none; 
} 

input[type=text], input[type=password] { 
    font-family: Verdana; // Text styles 
} 

input[type=submit] { 
    padding: .5em; 
    background-color: $button-color; 
    border: none; 
    cursor: pointer; 
    color: white; 
    border: 1px solid darken($button-color, 20%); 
    &:hover { 
     @include transition; 
     background-color: darken($button-color, 10%); 
    } 
} 

: input[...] चयनकर्ताओं पर शैलियाँ लागू: http://sassbin.com/gist/5956909/