How do I imitate a sass for loop in a property? -
इस सवाल का पहले से ही एक उत्तर है: < / P>
- 1 उत्तर
मेरे पास कुछ बहुत दोहराव सीएसएस है कि मैं सास को सरल बनाने के लिए पसंद करूंगा मूल रूप से मेरे पास उन मदों की श्रृंखला है जिनके पास अपने स्तर के आधार पर एक संख्यात्मक पृष्ठभूमि धारियां हैं मैं इन धारियों को बनाने के लिए पृष्ठभूमि ग्रेडिएंट का उपयोग कर रहा हूं। मैंने अपनी पृष्ठभूमि-छवि संपत्ति के अंदर का लूप इस्तेमाल करने की कोशिश की, लेकिन जाहिरा तौर पर यह स्वीकार्य नहीं है यह मैं क्या करने की कोशिश कर रहा हूँ का एक बहुत आसान उदाहरण है।
कैसे मैं पाश सीमा के लिए इस के आसपास हो सकता है के लिए कोई विचार?
.master {@for $ मैं 1 से 10 (.item - # {$ i} {background-image: @ $ $ के लिए $ 1 से $ 1} रैखिक-ढाल (90 डिग्री, लाल 7px, #fff 1px),} रैखिक-ढाल (# एफएफ 1 पीएक्स) , आरजीबीए (255, 255, 255, .0) 1 पीएक्स); }}}
वांछित परिणाम:
.master .item-1 {पृष्ठभूमि-छवि: रैखिक-ढाल (90 डिग्री, लाल 7px, #fff 1px ), रैखिक-ढाल (# एफएफ 1 पीएक्स, आरजीबीए (255, 255, 255, .0) 1 पीएक्स); } .master .item-2 {पृष्ठभूमि-छवि: रैखिक-ढाल (90 डिग्री, लाल 7px, #fff 1px), रैखिक-ढाल (90 डिग्री, लाल 7px, #fff 1px), रैखिक-ढाल (#fff 1px, rgba ( 255, 255, 255, .0) 1 पीएक्स); } .मास्टर .item-3 {पृष्ठभूमि-छवि: रैखिक-ढाल (90deg, लाल 7px, #fff 1px), रैखिक-ढाल (90deg, लाल 7px, #fff 1px), रैखिक-ढाल (90deg, लाल 7px, # एफएफएफ 1 पीएक्स), रैखिक-ढाल (# एफएफ 1 पीएक्स, आरजीबीए (255, 255, 255, .0) 1 पीएक्स); } आदि ... .मास्टर .item-10 {पृष्ठभूमि छवि: रैखिक-ढाल (90 डिग्री, लाल 7px, #fff 1px), रैखिक-ढाल (90deg, लाल 7px, #fff 1px), रैखिक-ढाल (90deg, लाल 7px, #fff 1px), रैखिक-ढाल (90deg, लाल 7px, #fff 1px), रैखिक-ढाल (90deg, लाल 7px, #fff 1px), रैखिक-ढाल (90deg, लाल 7px, #fff 1px), रैखिक-ढाल (90 डिग्री, लाल 7px, #fff 1px), रैखिक-ढाल (90 डिग्री, लाल 7px, #fff 1px), रैखिक-ढाल (90 डिग्री, लाल 7px, #fff 1px), रैखिक-ढाल (90 डिग्री, लाल 7px , # एफएफ 1 पीएक्स), रैखिक-ढाल (# एफएफ 1 पीएक्स, आरजीबीए (255, 255, 255, .0) 1 पीएक्स); }
इस दृष्टिकोण का प्रयास करें
.master { @ के लिए $ i से 1 से 10 ($ lg: ""; @ के लिए $ ज 1 से $ i {$ lg: $ lg + "रैखिक-ढाल (90 डिग्री, लाल 7px, #fff 1px),"; } .item - # {$ i} {पृष्ठभूमि-छवि: # {$ lg} रैखिक-ढाल (#fff 1px, rgba (255,255,255, .0) 1px); }}}
आप इसे पर जांच सकते हैं
Comments
Post a Comment