सीएसएस या एसएएस

Question

में क्लास नाम को उपनाम कैसे करें? क्या मैं एक सीएसएस कक्षा में उपनाम बना सकता हूं?

मैं इस फ़ॉन्ट का उपयोग कर रहा हूं और मैं कुछ आइकन वर्गों के लिए उपनाम नाम बनाने की कोशिश कर रहा हूं। तो .icon-world भी .globe कहा जाएगा।

मैं ऐसी चीज कैसे पूरा कर सकता हूं?

Answer 1

न तो SASS और न ही CSS3/4 समर्थन उपनाम। यदि आप font awesome का उपयोग करना चाहते हैं तो आपको सटीक कक्षा का नाम उपयोग करना होगा।

Answer 2

आप सादे सीएसएस अल्पविराम से अलग चयनकर्ताओं का उपयोग कर कई वर्गों के लिए एक ही शैली लागू कर सकते हैं:

.icon-globe, .globe { 
    //styles 
} 

<i class="icon-globe"> और <i class="globe"> के लिए एक ही शैली लागू होगा।

Answer 3

जावास्क्रिप्ट/jquery का उपयोग करने का सबसे आसान तरीका मैं सोच सकता हूं।

jQuery:

$(document).ready(function() { 
    $('.globe').addClass('icon-globe'); 
}); 

Answer 4

अलियासिंग जैसी कोई चीज नहीं है। Sass के पास @extend निर्देश है, लेकिन जब तक आप स्रोत को नहीं देखते हैं तब तक समाधान पूरी तरह से स्पष्ट नहीं होता है।

स्रोत: https://github.com/FortAwesome/Font-Awesome/blob/master/sass/font-awesome.scss

[class^="icon-"]:before, 
[class*=" icon-"]:before { 
    font-family: FontAwesome; 
    font-weight: normal; 
    font-style: normal; 
    display: inline-block; 
    text-decoration: inherit; 
} 

// snip 

.icon-globe:before    { content: "\f0ac"; } 

भले ही आप .globe विस्तार .icon-globe बनाया है, तुम क्या क्योंकि वे कैसे चयनकर्ता बनाया का FontAwesome शैलियों में आता है के सबसे पर याद किया जाएगा। आपको अन्य चयनकर्ता को भी विस्तारित करना होगा।

.globe { 
    @extend .icon-globe; 
    @extend [class^="icon-"]; 
} 

उत्पन्न करता है:

[class^="icon-"]:before, .globe:before, 
[class*=" icon-"]:before { 
    font-family: FontAwesome; 
    font-weight: normal; 
    font-style: normal; 
    display: inline-block; 
    text-decoration: inherit; } 

.icon-globe:before, .globe:before { 
    content: "\f0ac"; } 

ध्यान दें कि icon- उपसर्ग जानबूझकर किया गया था। FontAwesome के साथ आने वाले सभी 200 वर्गों में उन सभी शैलियों को जोड़ने के बजाय, आपको इस तरह की छोटी सी सीएसएस फ़ाइलें मिलती हैं। आप कर सकते हैं, लेकिन मुझे नहीं लगता कि परिणाम बहुत अच्छा है।

Answer 5

आप जो आप उपनाम http://the-echoplex.net/csscrush/#core--selector-aliases

प्रयोग

@selector globe :any(.icon-globe, .globe); 

:globe { 
    color: red; 
} 

आउटपुट

.icon-globe, .globe { 
    color: red; 
} 

Answer 6

मैं इस मैं जानता हूँ बनाने की अनुमति देता CSS Crush में रुचि हो सकती एक पुराना सवाल है लेकिन मैं इसका जवाब दे रहा हूं क्योंकि थ्रेड अपूर्ण दिखता है ...

आप आसानी से icon-globe वर्ग

.globe{ 
    @extend .icon-globe !optional; 
} 

उत्पादन सीएसएस विस्तार के रूप में किया जाएगा द्वारा SASS साथ ऐसा कर सकते,

.globe,.icon-globe{ 
    /* CSS Properties */ 
} 

का नया वर्ग के नाम को ध्यान में रखते फ़ॉन्ट-बहुत बढ़िया, आप .fa-globe का उपयोग करने के लिए

एकाधिक वर्ग के साथ .fa-globe का उपयोग करने की आवश्यकता होगी

उत्पादन सीएसएस हो जाएगा के रूप में,

.fa,.globe{ 
/* ... */ 
} 

.globe,.fa-globe{ 
    /* CSS Properties */ 
}