क्या सीएसएस वर्ग एक या अधिक अन्य वर्गों को विरासत में दे सकता है?

Question

मुझे लगता है कि इतने लंबे समय के लिए एक वेब प्रोग्रामर होने के लिए गूंगा था और इस सवाल का जवाब नहीं जानता था, मुझे वास्तव में उम्मीद है कि यह संभव है और मुझे नहीं लगता कि मुझे लगता है कि उत्तर के बारे में क्या है (जो कि यह संभव नहीं है) ।

मेरा सवाल यह है कि क्या सीएसएस क्लास बनाना संभव है जो किसी अन्य सीएसएस क्लास (या एक से अधिक) से "विरासत में" मिले।

उदाहरण के लिए, मान लें कि हमारे पास था:

.something { display:inline }
.else      { background:red }

मैं क्या करना चाहूंगा कुछ इस तरह है:

.composite 
{
   .something;
   .else
}

जहां ".composite" वर्ग दोनों इनलाइन प्रदर्शित करेगा और एक लाल पृष्ठभूमि होगी

Comments

विरासत के बजाय कैस्केडिंग के बारे में अधिक सोचें, यह यहां लागू नहीं होता है

— ब्लू

बहुत बढ़िया!! haacked.com/archive/2009/12/02/t4-template-for-less-css.aspx

— जोएल मार्टिनेज

Answer 1

LESS जैसे उपकरण हैं , जो आपके द्वारा वर्णित वर्णन के समान उच्च स्तर पर सीएसएस को बनाने की अनुमति देते हैं।

इन "मिक्सिंस" को कम कॉल

के बजाय

/* CSS */

#header {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

#footer {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

तुम कह सकते हो

/* LESS */

.rounded_corners {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

#header {
  .rounded_corners;
}

#footer {
  .rounded_corners;
}

Comments

वाह, बहुत कम वास्तव में मैं क्या देख रहा हूँ ... यह शर्म की बात है कि यह मूल रूप से समर्थित नहीं है, और यह रूबी में लिखा है (मैं ASP.NET MVC का उपयोग कर रहा हूँ)

— जोएल मार्टिनेज

हाँ, मैं ASP.NET दुनिया में हूँ इसलिए मैंने इसे अपने उत्पादन वर्कफ़्लो में स्थानांतरित नहीं किया है।

— लार्सनल

कम सुंदर और आकर्षक है ... लेकिन मैं CSSEdit के साथ एक ही वर्कफ़्लो में इसका उपयोग करने में बहुत सफल नहीं हुआ - इसलिए मैंने अभी तक इसे पूरी तरह से नहीं अपनाया है।

— रयान फ्लोरेंस

हाँ कम सुंदर है यह नहीं है। Ive वास्तव में यहाँ .NET पोर्ट पर काम कर रहा है: nlesscss.codeplex.com ।

— ओवेन

यदि आप इसे Google तक

— पहुँचाते

Answer 2

आप किसी एकल DOM तत्व में कई वर्ग जोड़ सकते हैं, जैसे

<div class="firstClass secondClass thirdclass fourthclass"></div>

बाद की कक्षाओं (या जो अधिक विशिष्ट हैं) में दिए गए नियम ओवरराइड हैं। तो fourthclassउस उदाहरण में इस तरह की प्रबलता है।

वंशानुक्रम CSS मानक का हिस्सा नहीं है।

Comments

क्या आप जानते हैं कि कौन सा वर्ग प्रबल है, अंतिम वाले या पहले वाले हैं और क्या व्यवहार क्रॉस ब्राउज़र सुरक्षित है? मान लें कि हमारे पास .firstClass {font-size:12px;} .secondClass {font-size:20px;}फिर अंतिम font-sizeहो जाएगा 12pxया 20pxयह क्रॉस ब्राउज़र सुरक्षित है?

— मार्को डेमायो

चयनकर्ता पर सर्वोच्च विशिष्टता वाला नियम जीत जाएगा। मानक विशिष्टता नियम लागू होते हैं; आपके उदाहरण में, चूंकि "पहले" और "दूसरे" में समान विशिष्टता है, इसलिए सीएसएस में बाद में घोषित नियम जीत जाएगा।

— मैट ब्रिज

मुझे इस मुद्दे को हल करने के लिए शुद्ध सीएसएस (लेस के बजाय) का उपयोग करने का विचार पसंद है।

— एलेक्स

मुझे कई बार एक से अधिक क्लास न टाइप करने का विचार भी पसंद है - कौन सा हे (n ^ 2) काम :)

— सीक्रेट

क्या होगा यदि मैं किसी तीसरे पक्ष के काम का उपयोग कर रहा हूं और यह प्रदान करने वाले डिज़ाइन / HTML को संशोधित करना चाहता हूं, लेकिन उस परिवाद में इनबिल्ट सीएसएस फ़ाइलों को नहीं बदल सकता? वहाँ मुझे सीएसएस कक्षाओं में किसी प्रकार की विरासत की आवश्यकता होगी।

— शिवम

Answer 3

हां, लेकिन उस वाक्य रचना के साथ बिल्कुल नहीं।

.composite,
.something { display:inline }

.composite,
.else      { background:red }

Comments

यह चूसना, लेकिन मुझे खुशी है कि हम कम से कम यह है!

— पेसियर

यह क्यों बेकार है? यह बहुत अच्छा लगता है। मैं कॉमा प्रतीक और कम। जेएस समाधान के बीच के अंतर को नहीं समझ सकता।

— 17

क्योंकि यदि .something और .else कक्षाएं अलग-अलग फ़ाइलों में हैं और आप उन्हें संशोधित नहीं कर सकते हैं, तो आप अटक गए हैं।

— अलेक्जेंड्रे मेलाड

यह सही उत्तर था क्योंकि यह शुद्ध CSS सिंटैक्स का उपयोग करके प्रश्न का उत्तर देता था। कम जवाब हालांकि यह जानना अच्छा है।

— राडदेवस ०

यह अपवादित उत्तर होना चाहिए।

— १

Answer 4

अपनी सामान्य विशेषताओं को एक साथ रखें और विशिष्ट (या ओवरराइड) विशेषताओं को फिर से असाइन करें।

/*  ------------------------------------------------------------------------------ */   
/*  Headings */ 
/*  ------------------------------------------------------------------------------ */   
h1, h2, h3, h4
{
    font-family         : myfind-bold;
    color               : #4C4C4C;
    display:inline-block;
    width:900px;
    text-align:left;
    background-image: linear-gradient(0,   #F4F4F4, #FEFEFE);/* IE6 & IE7 */
}

h1  
{
    font-size           : 300%;
    padding             : 45px 40px 45px 0px;
}

h2
{
    font-size           : 200%;
    padding             : 30px 25px 30px 0px;
}

Comments

यह एक आदर्श समाधान के बहुत करीब है, मुझे आशा है कि लोग इसे सिर्फ इसलिए नहीं छोड़ेंगे क्योंकि इसे कुछ वोट मिले थे। वास्तव में, "सीएसएस वंशानुक्रम" के बारे में सबसे चुनौतीपूर्ण मुद्दों में से एक यह है कि आप आमतौर पर पहले से ही बनाया हुआ, विशाल वेब सॉफ्टवेयर (उदाहरण के लिए, एक ई-कॉमर्स या ब्लॉग PHP प्रसिद्ध सॉफ्टवेयर) प्राप्त करते हैं और वे PHP कोड को नियुक्त करते हैं जो मूल रूप से जीता है ' टी HTML तत्वों के लिए कई वर्गों को जोड़ते हैं जो वे बहिर्गमन करते हैं। यह आपको स्रोत कोड के साथ चारों ओर जाने और गड़बड़ करने के लिए मजबूर करता है (यदि आप बाद में अपग्रेड करते हैं तो उन परिवर्तनों को खोने के लिए) जो इसे एडिटाइनल क्लासेस आउटपुट बनाते हैं। इस दृष्टिकोण के साथ, इसके बजाय, आप कभी भी CSS फ़ाइल को संपादित करते हैं!

— डारियो फुमगल्ली

यह ठीक वही है जिसकी मुझे तलाश थी। क्या यह कुछ भी नहीं है यह वही दृष्टिकोण सीएसएस चयनकर्ताओं के साथ काम करेगा? निर्दिष्ट करने के बजाय h1, h2, etcआप निर्दिष्ट कर सकते हैं.selector1, .selector2, .etc

— जेफ्रीहूसर

मैं यह टिप्पणी करना चाहता था कि यह उनकी अनुशंसित डिफ़ॉल्ट HTML शैली शीट में w3 द्वारा उपयोग किया जाने वाला दृष्टिकोण है: [w3 CSS2]: w3.org/TR/CSS2/sample.html । मैं सीएसएस कोड को व्यवस्थित करने के तरीके पर भी पकड़ बनाने की कोशिश कर रहा हूं, और ऐसा लगता है कि प्रतिमान विशिष्ट वस्तु-उन्मुख विरासत की तुलना में उलटा है: आप वर्गों का उपयोग करते हैं (या, आमतौर पर चयनकर्ताओं) जो निर्दिष्ट करते हैं कि कौन से गुण विरासत में मिलते हैं। लेकिन आपको विशेषताएँ विरासत में मिलती हैं (कम से कम, यह है कि पदानुक्रम सबसे आसानी से तार्किक रूप से मौजूद हो सकता है), फिर आवश्यक होने पर अधिक विशिष्ट चयनकर्ताओं पर विशेषताओं को ओवरराइड करता है।

— नाथन चैपल

Answer 5

एक तत्व कई कक्षाएं ले सकता है:

.classOne { font-weight: bold; }
.classTwo { font-famiy:  verdana; }

<div class="classOne classTwo">
  <p>I'm bold and verdana.</p>
</div>

और आप दुर्भाग्य से प्राप्त करने जा रहे हैं। मैं किसी दिन क्लास-अलायस के साथ इस सुविधा को देखना पसंद करूंगा।

Answer 6

नहीं, आप ऐसा कुछ नहीं कर सकते

.composite 
{
   .something;
   .else
}

यह OO अर्थों में कोई "वर्ग" नाम नहीं हैं। .somethingऔर .elseसिर्फ चयनकर्ता और कुछ नहीं हैं।

लेकिन आप या तो एक तत्व पर दो वर्गों को निर्दिष्ट कर सकते हैं

<div class="something else">...</div>

या आप विरासत के दूसरे रूप में देख सकते हैं

.foo {
  background-color: white;
  color: black;
}

.bar {
  background-color: inherit;
  color: inherit;
  font-weight: normal;
}

<div class="foo">
  <p class="bar">Hello, world</p>
</div>

जहां पैराग्राफ बैकग्राउंडर और कलर को एनक्लोजिंग डिव में सेटिंग्स से विरासत में मिला है जिसे .fooस्टाइल किया गया है। आपको सटीक W3C विनिर्देश की जांच करनी पड़ सकती है। inheritवैसे भी अधिकांश संपत्तियों के लिए डिफ़ॉल्ट है, लेकिन सभी के लिए नहीं।

Comments

हाँ, यह (पहला हिस्सा) मेरी उम्मीद थी जब मैंने पहली बार 20 वीं शताब्दी में सीएसएस के बारे में सुना था ... और हमारे पास अभी भी नहीं है, वे कुछ गतिशील चीजों पर प्रदर्शन कर रहे हैं जबकि यह सीएसएस लागू होने से ठीक पहले स्थिर हो सकता है। और यह चर (स्थिर "चर") की आवश्यकता को प्रतिस्थापित करता है

— neu-rah

Answer 7

मैं इसी समस्या में भाग गया और एक JQuery समाधान का उपयोग करके इसे ऐसा प्रतीत हुआ कि यह ऐसा लगता है जैसे एक वर्ग अन्य वर्गों को विरासत में दे सकता है।

<script>
    $(function(){
            $(".composite").addClass("something else");
        });
</script>

यह वर्ग "समग्र" के साथ सभी तत्वों को ढूंढेगा और तत्वों में "कुछ" और "अन्य" वर्गों को जोड़ देगा। तो कुछ इस तरह <div class="composite">...</div>खत्म होगा:
<div class="composite something else">...</div>

Comments

इस समाधान के साथ समस्या यह है कि सभी मौजूदा नियंत्रणों पर लागू होती है, यदि आप इस कॉल के बाद नियंत्रण बनाते हैं, तो इसमें नया वर्ग नहीं होगा।

— लुइसईडार्डो एसपी

Answer 8

एससीएसएस दिए गए उदाहरण के लिए जिस तरह से, की तरह कुछ होगा:

.something {
  display: inline
}
.else {
  background: red
}

.composite {
  @extend .something;
  @extend .else;
}

अधिक जानकारी, सैस की मूल बातें जांचें

Comments

इसकी तुलना में अतिरिक्त मूल्य क्या है? .composite,.something { display:inline }और.composite,.else { background:red }

— पावेल गटनर

@PavelGatnar आप एक और सीएसएस परिभाषा में .somethingऔर की परिभाषाओं का पुन: उपयोग कर सकते हैं .else।

— एल्टर लागोस

Answer 9

सबसे अच्छा आप यह कर सकते हैं

सीएसएस

.car {
  font-weight: bold;
}
.benz {
  background-color: blue;
}
.toyota {
  background-color: white;
}

एचटीएमएल

<div class="car benz">
  <p>I'm bold and blue.</p>
</div>
<div class="car toyota">
  <p>I'm bold and white.</p>
</div>

Answer 10

मत भूलना:

div.something.else {

    // will only style a div with both, not just one or the other

}

Comments

im इसके लिए नहीं लग रही है, लेकिन यह मेरे लिए रचनात्मक था n__n

— AgelessEssence

Answer 11

Css फ़ाइल में:

p.Title 
{
  font-family: Arial;
  font-size: 16px;
}

p.SubTitle p.Title
{
   font-size: 12px;
}

Comments

तो परिणाम क्या होगा font-size?

— abatishchev

"P.Title" के लिए फ़ॉन्ट का आकार 12px होगा क्योंकि इसे फ़ाइल में पहले एक के बाद परिभाषित किया गया है। यह पहले फ़ॉन्ट-आकार को ओवरराइड करता है।

— YWE

@YWE: क्या इसका मतलब यह है कि इस उत्तर में जो लिखा गया है उसकी तुलना में घोषणाएं वास्तव में दूसरे तरीके से होनी चाहिए (कम से कम अगर हम उदाहरण के लिए उदाहरण के लिए चाहते हैं)? यदि अंतिम परिभाषित किया गया है, तो font-size: 16pxकभी भी प्रभावी नहीं हो सकता है?

— या मैपर

@ORMapper - आम तौर पर ऐसा होता है कि पहली घोषणा एक सामान्य सीएसएस फ़ाइल में होती है, जिसे कई पृष्ठों द्वारा साझा किया जाता है। फिर दूसरी घोषणा एक दूसरी सीएसएस फ़ाइल में होती है, जिसका उपयोग केवल कुछ पृष्ठों पर किया जाता है। और आम सीएसएस फ़ाइल के बाद आयात किया गया । इसलिए वे पृष्ठ "अंतिम बार देखे गए" मान का उपयोग करते हैं 12px।

— टूलमेकरसैट

Answer 12

मुझे एहसास है कि यह सवाल अब बहुत पुराना है, लेकिन यहाँ कुछ नहीं है!

यदि इरादा एक एकल वर्ग को जोड़ने का है जो कई वर्गों के गुणों का तात्पर्य करता है, तो एक देशी समाधान के रूप में, मैं जावास्क्रिप्ट / jQuery का उपयोग करने की सलाह दूंगा (jQuery वास्तव में आवश्यक नहीं है लेकिन निश्चित रूप से उपयोगी है)

यदि आपके पास, उदाहरण के लिए .umbrellaClass"विरासत" है .baseClass1और .baseClass2आपके पास कुछ जावास्क्रिप्ट हो सकते हैं जो तैयार होने पर आग लगाते हैं।

$(".umbrellaClass").addClass("baseClass1");
$(".umbrellaClass").addClass("baseClass2");

अब सभी तत्वों .umbrellaClassमें दोनों के सभी गुण होंगे .baseClass। ध्यान दें कि ओओपी विरासत की तरह,.umbrellaClass इसके अपने गुण हो भी सकते हैं और नहीं भी।

यहाँ केवल चेतावनी पर विचार करना है कि क्या ऐसे तत्व गतिशील रूप से बनाए जा रहे हैं जो इस कोड की आग लगने पर मौजूद नहीं होंगे, लेकिन साथ ही साथ सरल तरीके भी हैं।

बेकार सीएसएस में मूल उत्तराधिकार नहीं है, हालांकि।

Comments

यह दृष्टिकोण 2013 से @ DHoover के उत्तर में पहले ही सुझाया जा चुका है।

— ब्रायन

Answer 13

सही समय : मैं इस सवाल से अपने ईमेल पर गया, कम के बारे में एक लेख खोजने के लिए , एक रूबी पुस्तकालय के कि अन्य बातों के अलावा:

चूँकि super जैसा दिखता है footer, लेकिन एक अलग फ़ॉन्ट के साथ, मैं इन घोषणाओं को भी शामिल करने के लिए बताने के लिए कम वर्ग समावेश तकनीक (वे इसे मिक्सिन कहते हैं) का उपयोग करेंगे:

#super {
  #footer;
  font-family: cursive;
}

Comments

बस जब मुझे लगा कि LESS मुझे कोई आश्चर्यचकित नहीं कर सकता है ... मुझे नहीं पता था कि आप इस तरह से किसी अन्य ब्लॉक से स्वरूपण आयात कर सकते हैं। महान टिप।

— डेनियल रिप्सटीन

Answer 14

दुर्भाग्य से, सीएसएस 'विरासत' प्रदान नहीं करता है जिस तरह से प्रोग्रामिंग भाषाएं जैसे सी ++, सी # या जावा करते हैं। आप एक सीएसएस वर्ग की घोषणा नहीं कर सकते और फिर इसे दूसरे सीएसएस वर्ग के साथ बढ़ा सकते हैं।

हालाँकि, आप अपने मार्कअप में एक एकल वर्ग से अधिक टैग के लिए आवेदन कर सकते हैं ... इस मामले में नियमों का एक परिष्कृत सेट है जो यह निर्धारित करता है कि कौन सी वास्तविक शैलियों को ब्राउज़र द्वारा लागू किया जाएगा।

<span class="styleA styleB"> ... </span>

सीएसएस उन सभी शैलियों की तलाश करेगा जो आपके मार्कअप के आधार पर लागू की जा सकती हैं, और सीएसएस शैलियों को उन कई नियमों से एक साथ जोड़ सकते हैं।

आमतौर पर, शैलियों का विलय कर दिया जाता है, लेकिन जब टकराव उत्पन्न होता है, तो बाद में घोषित शैली आम तौर पर जीत जाएगी (जब तक कि महत्वपूर्ण शैलियों में से एक पर निर्दिष्ट नहीं किया जाता है, उस स्थिति में जो जीतती है)। इसके अलावा, एक HTML तत्व के लिए सीधे लागू शैलियों सीएसएस वर्ग शैलियों पर पूर्वता लेते हैं।

Comments

आपका उत्तर मेरे लिए Google पर पहले परिणाम के रूप में आया और सहायक था। उस ने कहा, मेरे पास आपके लिए एक टिप है - यदि आप कोई समाधान पेश कर रहे हैं, तो वाक्य को नकारात्मक रूप से शुरू करने से बचना सबसे अच्छा है (दुर्भाग्य से, सीएसएस विरासत प्रदान नहीं करता है ..) मुझे पता है कि उपयुक्त धैर्य के साथ कोई भी आपका अच्छा समाधान खोजने के लिए पढ़ेगा। लेकिन कभी-कभी लोग धैर्य से कम चल रहे हैं और इस निष्कर्ष पर पहुंच सकते हैं कि वे जो करने की कोशिश कर रहे हैं वह असंभव है। दूसरों की मदद करने का सबसे अच्छा मौका के लिए, आप कुछ के साथ शुरू कर सकते हैं जैसे "व्हेल सीएसएस के पास विरासत नहीं है, आप जो कुछ भी चाहते हैं उसे हासिल कर सकते हैं ..."

— उदाहरण के लिए

Answer 15

इसमें SASS भी है, जिसे आप http://sass-lang.com/ पर देख सकते हैं । एक @ टेक्स्ट टैग है, साथ ही मिक्स-इन टाइप सिस्टम भी है। (माणिक)

यह कम करने के लिए एक प्रतियोगी की तरह है।

Answer 16

यह CSS में संभव नहीं है।

CSS में समर्थित एकमात्र चीज़ दूसरे नियम से अधिक विशिष्ट है:

span { display:inline }
span.myclass { background: red }

वर्ग "मायक्लास" के साथ एक स्पैन में दोनों गुण होंगे।

एक अन्य तरीका दो वर्गों को निर्दिष्ट करके है:

<div class="something else">...</div>

"और" की शैली "कुछ" की शैली को ओवरराइड (या जोड़) देगी

Comments

1 फ़ाइल में सभी शैलियों के लिए सीएसएस में एक विरासत जैसा समाधान है, मेरी पोस्ट देखें।

— पावेल गटनार

Answer 17

आप एक से अधिक CSS क्लास को एक तत्व द्वारा कुछ इस तरह से लागू कर सकते हैं जैसे कि "कुछ और"

Answer 18

जैसा कि दूसरों ने कहा है, आप एक तत्व में कई वर्ग जोड़ सकते हैं।

लेकिन यह वास्तव में बात नहीं है। मुझे विरासत के बारे में आपका सवाल है। वास्तविक बिंदु यह है कि सीएसएस में विरासत कक्षाओं के माध्यम से नहीं , बल्कि तत्व पदानुक्रम के माध्यम से किया जाता है । इसलिए विरासत में मिले गुणों को मॉडल करने के लिए आपको उन्हें DOM में तत्वों के विभिन्न स्तरों पर लागू करना होगा।

Comments

सभी रचना वर्ग श्रृंखला का उपयोग करने के बजाय विरासत जैसी सीएसएस परिभाषाएं बनाना बेहतर है, मेरी पोस्ट देखें।

— पावेल गटनर

Answer 19

मैं भी पागलों की तरह उस की तलाश कर रहा था और मैंने अलग-अलग चीजों की कोशिश करके उसे समझ लिया: पी ... वैसे आप इसे इस तरह से कर सकते हैं:

composite.something, composite.else
{
    blblalba
}

यह अचानक मेरे लिए काम किया :)

Answer 20

विशिष्ट परिस्थितियों में आप "सॉफ्ट" इनहेरिटेंस कर सकते हैं:

.composite
{
display:inherit;
background:inherit;
}

.something { display:inline }
.else      { background:red }

यह केवल तभी काम करता है जब आप .composite क्लास को चाइल्ड एलिमेंट में जोड़ रहे हैं। यह "सॉफ्ट" इनहेरिटेंस है, क्योंकि .composite में निर्दिष्ट कोई भी मूल्य स्पष्ट रूप से विरासत में नहीं मिले हैं। ध्यान रखें कि अभी भी "इनहेरिट" के बजाय "इनलाइन" और "रेड" लिखने के लिए कम वर्ण होंगे।

यहां संपत्तियों की एक सूची दी गई है और वे स्वचालित रूप से ऐसा करते हैं या नहीं: https://www.w3.org/TR/CSS21/propid.net.html

Answer 21

जबकि प्रत्यक्ष उत्तराधिकार संभव नहीं है।

पैरेंट टैग के लिए एक क्लास (या आईडी) का उपयोग करना संभव है और फिर सीएसएस कॉम्बिनेटर का उपयोग करके बच्चे के टैग व्यवहार को बदलने के लिए इसका उपयोग करें।

p.test{background-color:rgba(55,55,55,0.1);}
p.test > span{background-color:rgba(55,55,55,0.1);}
p.test > span > span{background-color:rgba(55,55,55,0.1);}
p.test > span > span > span{background-color:rgba(55,55,55,0.1);}
p.test > span > span > span > span{background-color:rgba(55,55,55,0.1);}
p.test > span > span > span > span > span{background-color:rgba(55,55,55,0.1);}
p.test > span > span > span > span > span > span{background-color:rgba(55,55,55,0.1);}
p.test > span > span > span > span > span > span > span{background-color:rgba(55,55,55,0.1);}
p.test > span > span > span > span > span > span > span > span{background-color:rgba(55,55,55,0.1);}

<p class="test"><span>One <span>possible <span>solution <span>is <span>using <span>multiple <span>nested <span>tags</span></span></span></span></span></span></span></span></p>

मैं उदाहरण की तरह बहुत सारे स्पैन का उपयोग करने का सुझाव नहीं दूंगा, हालांकि यह सिर्फ अवधारणा का प्रमाण है। अभी भी कई कीड़े हैं जो सीएसएस को इस तरह से लागू करने की कोशिश करते समय उत्पन्न हो सकते हैं। (उदाहरण के लिए पाठ-सजावट के प्रकारों में परिवर्तन)।

Answer 22

कम और सैस सीएसएस प्री-प्रोसेसर हैं जो सीएसएस भाषा को मूल्यवान तरीकों से बढ़ाते हैं। आपके द्वारा प्रदान किए जाने वाले कई सुधारों में से केवल एक विकल्प है जिसे आप ढूंढ रहे हैं। कम के साथ कुछ बहुत अच्छे उत्तर हैं और मैं Sass समाधान जोड़ूंगा।

Sass में विस्तार विकल्प है जो एक वर्ग को दूसरे के लिए पूरी तरह से विस्तारित करने की अनुमति देता है। विस्तार के बारे में आप इस लेख में पढ़ सकते हैं

Answer 23

वास्तव में आप जो मांग रहे हैं, वह मौजूद है - हालाँकि यह ऐड-ऑन मॉड्यूल के रूप में किया जाता है। .NET में बेहतर CSS पर इस सवाल को देखेंउदाहरण के लिए ।

Larsenal के उत्तर को देखें कि LESS का उपयोग करने पर यह पता लगाने के लिए कि ये ऐड-ऑन क्या करते हैं।

Answer 24

सीएसएस वास्तव में वह नहीं करता है जो आप पूछ रहे हैं। यदि आप उस समग्र विचार को ध्यान में रखते हुए नियम लिखना चाहते हैं, तो आप कम्पास की जांच कर सकते हैं । यह एक स्टाइलशीट फ्रेमवर्क है जो पहले से उल्लेखित लेस के समान है।

यह आपको मिश्रण और सभी अच्छे व्यवसाय करने देता है।

Comments

इसके बाद के संस्करण के लिए अधिक जानकारी के जोड़ना, कम्पास उर्फ सास के माध्यम से बढ़ाएँ करता, प्लेसहोल्डर mixins बनाम बढ़ाएँ , अधिक विस्तृत जानकारी के बारे में प्लेसहोल्डर्स

— अभिजीत

Answer 25

उन लोगों के लिए जो उल्लिखित (उत्कृष्ट) पदों से संतुष्ट नहीं हैं, आप अपने प्रोग्रामिंग कौशल का उपयोग एक चर (PHP या जो भी) बनाने के लिए कर सकते हैं और इसे कई वर्ग नामों को संग्रहीत कर सकते हैं।

यह सबसे अच्छा हैक है जिसके साथ मैं आ सकता हूं।

<style>
.red { color: red; }
.bold { font-weight: bold; }
</style>

<? define('DANGERTEXT','red bold'); ?>

फिर वर्ग नाम के बजाय अपनी इच्छा के तत्व के लिए वैश्विक चर लागू करें

<span class="<?=DANGERTEXT?>"> Le Champion est Ici </span>

Answer 26

सीएसएस पर एक नजर डालें तो लिखें : https://bambielli.com/til/2017-08-11-css-modules-composes/

उनके अनुसार:

.serif-font {
    font-family: Georgia, serif;
}

.display {
    composes: serif-font;
    font-size: 30px;
    line-height: 35px;
}

मैं इसे अपनी प्रतिक्रिया परियोजना में उपयोग करता हूं।

Answer 27

सीएसएस कक्षाओं को ऑब्जेक्ट ओरिएंटेड क्लासेस के रूप में न समझें , उनके बारे में यह सोचें कि केवल अन्य चयनकर्ताओं के बीच एक टूल यह निर्दिष्ट करने के लिए कि HTML तत्व किस विशेषता वर्ग द्वारा स्टाइल किया गया है। विशेषता वर्ग के रूप में ब्रेसिज़ के बीच सब कुछ के बारे में सोचें , और बाईं ओर के चयनकर्ता उन तत्वों को बताते हैं जो वे विशेषता वर्ग से विशेषताओं को प्राप्त करने के लिए चुनते हैं । उदाहरण:

.foo, .bar { font-weight : bold; font-size : 2em; /* attribute class A */}
.foo { color : green; /* attribute class B */}

जब किसी तत्व को विशेषता दी जाती है class="foo", तो यह सोचना उपयोगी होता है कि वह वर्ग से विशेषता नहीं है .foo, बल्कि विशेषता वर्ग A और विशेषता वर्ग B से है । यानी, वंशानुक्रम ग्राफ एक स्तर गहरा है, जिसमें एलीमेंट क्लासेस से प्राप्त होने वाले तत्व हैं , और चयनकर्ता निर्दिष्ट करते हैं कि एड़ियाँ कहाँ जाती हैं, और प्रतिस्पर्धात्मक विशेषताएँ होने पर पूर्वनिर्धारण का निर्धारण करती हैं (विधि रिज़ॉल्यूशन ऑर्डर के समान)।

प्रोग्रामिंग के लिए व्यावहारिक निहितार्थ यह है। कहें कि आपके पास ऊपर दी गई शैली की शीट है, और एक नया वर्ग जोड़ना चाहते हैं .baz, जहां यह उसी font-sizeतरह होना चाहिए .foo। भोला समाधान यह होगा:

.foo, .bar { font-weight : bold; font-size : 2em; /* attribute class A */}
.foo { color : green; /* attribute class B */}
.baz { font-size : 2em; /* attribute class C, hidden dependency! */}

किसी भी समय मुझे दो बार कुछ टाइप करना पड़ता है मैं इतना पागल हो जाता हूं! न केवल मुझे इसे दो बार लिखना है, अब मेरे पास प्रोग्राम को इंगित करने का कोई तरीका नहीं है .fooऔर .bazऐसा ही होना चाहिए font-size, और मैंने एक छिपी निर्भरता बनाई है ! मेरे उपरोक्त प्रतिमान से यह पता चलता है कि मुझे विशेषता वर्ग Afont-size से विशेषता को समाप्त करना चाहिए :

.foo, .bar, .baz { font-size : 2em; /* attribute base class for A */}
.foo, .bar { font-weight : bold; /* attribute class A */}
.foo { color : green; /* attribute class B */}

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

Answer 28

यदि आप LESS की तुलना में अधिक शक्तिशाली टेक्स्ट प्रीप्रोसेसर चाहते हैं, तो PPWizard देखें:

http://dennisbareis.com/ppwizard.htm

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

Comments

वेबसाइट है सही मायने में घृणित।

— नानोफैड

Html प्रोसेसर के लिए वेबसाइट पर विडंबना की तरह!

— बेन थर्ले

हां, वेबसाइट छिपी हुई है, लेकिन यह उससे कहीं ज्यादा है। यह पढ़ना मुश्किल है और मेरे सिर को भी चोट पहुंचाता है!

— ArtOfWarfare 19

एक अच्छी बात यह है कि यह विंडोज़ 3.1 से XP के साथ संगत है, लोल

— ऑल्टर लागोस

एक विचित्र गैर-मानक उपकरण, पसंद नहीं है।

— बर्कस

Answer 29

आप जो चाहते हैं उसे प्राप्त कर सकते हैं यदि आप अपनी .css फ़ाइलों को php के माध्यम से प्रीप्रोसेस करते हैं। ...

$something='color:red;'
$else='display:inline;';
echo '.something {'. $something .'}';
echo '.else {'. $something .'}';
echo '.somethingelse {'. $something  .$else '}';

...