SASS

Question

में HTML विशेषता मान एक्सेस करें SASS में एक HTML विशेषता मान तक पहुंच बनाना संभव है? मैं कोड की एक पंक्ति है कि

<ul id="my_id" data-count="3"> 

जहां 3 कुछ jQuery सामान का परिणाम है कहते हैं। मुझे कुछ सीएसएस की गणना करने के लिए की आवश्यकता है। मैं इसे SASS चर के रूप में कैसे सहेज सकता हूं?

वैकल्पिक रूप से, क्या किसी निश्चित पैरेंट तत्व के बाल तत्वों की संख्या को गिनने का कोई तरीका है?

<ul id="my_id" data-count="3"> 
    <li>First list item</li> 
    <li>Second list item</li> 
    <li>Third list item</li> 
</ul> 

(आप समझ गए होंगे के रूप में, data-count का मूल्य सूची आइटम्स की संख्या से मेल खाता है।) एस.ए.एस.एस. सूची आइटम गिनती और एक चर के रूप में उस नंबर बचा सकते हैं: मैं इस कोड है कहो?

किसी भी विचार की सराहना की जाएगी।

Answer 1

सास सिर्फ एक सीएसएस जनरेटर है। यह वास्तव में आपके एचटीएमएल के साथ बातचीत नहीं करता है, इसलिए आप सैटेलाइट चर के रूप में HTML विशेषताओं का उपयोग नहीं कर सकते हैं।

हालांकि, सीएसएस विशेषताओं के आधार पर चयन कर सकते हैं। तो यह और अधिक घना आपको पसंद आ सकते से होगा, लेकिन आप की तरह

ul[data-count="3"]:after 
    content: "There were three items in that list!" 

कुछ कर सकते हैं और मैं लगता है कि अगर आप अपने आप को केवल † बहुत हाल ब्राउज़रों ^{के सबसेट तक सीमित करने के लिए तैयार हैं , आप सीएसएस-आधारित गणनाओं में विशेषता का उपयोग करने के लिए attr() के साथ सीएसएस calc() फ़ंक्शन का उपयोग कर सकते हैं। लेकिन यह सुंदर खून बह रहा है।}

^{† पूरी तरह से ईमानदार होने के लिए, मुझे नहीं पता कि किस संस्करण के ब्राउज़र ने इसे पूरी तरह कार्यान्वित किया है। मुझे यकीन है कि फ़ायरफ़ॉक्स में यह है, हालांकि मैंने इसका उपयोग नहीं किया है, और मुझे अन्य ब्राउज़रों के बारे में कोई जानकारी नहीं है। यह निश्चित रूप से किसी भी दर पर समर्थित नहीं है।}

Answer 2

ऐसा लगता है कि आप सीएसएस में अपनी अनियंत्रित सूची के अंदर वस्तुओं की संख्या प्राप्त करने की कोशिश कर रहे हैं (शायद भाई बहनों की संख्या के अनुसार अपना आकार बदलने के लिए?)।

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

मान लें कि आपकी सूची में आपकी अधिकतम संख्या 10 है और आप अपनी सूची में मौजूद ली टैग की संख्या के आधार पर ली टैग के आकार की गणना करना चाहते हैं।

@for $i from 1 through 10 { 
    li:first-child:nth-last-child(#{$i}), 
    li:first-child:nth-last-child(#{$i}) ~ li { 
     width: (100%/$i); 
    } 
} 

हो जाएगा ताकि उत्पादन निम्नलिखित सीएसएस:

li:first-child:nth-last-child(1), 
li:first-child:nth-last-child(1) ~ li { 
    width: 100%; 
} 
li:first-child:nth-last-child(2), 
li:first-child:nth-last-child(2) ~ li { 
    width: 50%; 
} 
li:first-child:nth-last-child(3), 
li:first-child:nth-last-child(3) ~ li { 
    width: 33.33333%; 
} 
li:first-child:nth-last-child(4), 
li:first-child:nth-last-child(4) ~ li { 
    width: 25%; 
} 
li:first-child:nth-last-child(5), 
li:first-child:nth-last-child(5) ~ li { 
    width: 20%; 
} 
li:first-child:nth-last-child(6), 
li:first-child:nth-last-child(6) ~ li { 
    width: 16.66667%; 
} 
li:first-child:nth-last-child(7), 
li:first-child:nth-last-child(7) ~ li { 
    width: 14.28571%; 
} 
li:first-child:nth-last-child(8), 
li:first-child:nth-last-child(8) ~ li { 
    width: 12.5%; 
} 
li:first-child:nth-last-child(9), 
li:first-child:nth-last-child(9) ~ li { 
    width: 11.11111%; 
} 
li:first-child:nth-last-child(10), 
li:first-child:nth-last-child(10) ~ li { 
    width: 10%; 
} 

मूलतः, यह ली की चौड़ाई को टैग कर देता है:

• 100.0% जब वहाँ केवल एक ही ली टैग
• 50.00% जब 2 ली टैग
• हैंजब वहाँ 3 ली टैग
• 25.00% जब वहाँ जब वहाँ 5 ली टैग
• 16.66% हैं जब वहाँ 7 ली टैग कर रहे हैं जब देखते हैं 6 ली टैग
• 14.28% हैं 4 ली टैग
• 20.00% हैं
• 12.50% जब वहाँ 8 ली टैग
• 11.11% जब वहाँ 9 ली टैग
• 10.00% जब वहाँ 10 ली टी कर रहे हैं कर रहे हैं एजी

एक लाइव उदाहरण के लिए, कृपया this demo देखें, मैंने एक ही चाल का उपयोग किया था। मुझे उम्मीद है यह मदद करेगा।