কম সিএসএস নেস্টিং ক্লাস


101

আমি আমার সিএসএস উন্নত করতে কম ব্যবহার করছি এবং একটি শ্রেণীর মধ্যে একটি শ্রেণি বাসাতে চেষ্টা করছি। মোটামুটি জটিল শ্রেণিবিন্যাস আছে তবে কিছু কারণে আমার বাসা বাঁধে না। আমার আছে এটা:

.g {
    float: left;
    color: #323a13;
    .border(1px,#afc945);
    .gradient(#afc945, #c8da64);
    .common;
    span {
        .my-span;
        .border-dashed(1px,rgba(255,255,255,0.3));
    }
    .posted {
         .my-posted;
         span {
            border: none;
         }
    }
}

আমি কাজ করতে পারি না .g.posted। এটা ঠিক কিছু দেখায় .g। আমি যদি এটি করি তবে এটি ভাল:

.g {
    float: left;
    color: #323a13;
    .border(1px,#afc945);
    .gradient(#afc945, #c8da64);
    .common;
    span {
        .my-span;
        .border-dashed(1px,rgba(255,255,255,0.3));
    }
}

.g.posted {
         .my-posted;
         span {
            border: none;
         }
    }

আমি নীড় চাই .postedমধ্যে .gযদিও। কোন ধারনা?

উত্তর:


192

&অক্ষর একটি ফাংশন আছে thisকীওয়ার্ডটি আসলে (একটা জিনিস আমি উত্তর লেখার মুহূর্তে জানেন)। এটি লেখা সম্ভব:

.class1 {
    &.class2 {}
}

এবং যে সিএসএস তৈরি করা হবে তা এর মতো দেখাবে:

.class1.class2 {}

রেকর্ডের জন্য, @grobitto এই তথ্যটির প্রথম অংশটি পোস্ট করেছিলেন।


[মূল উত্তর]

কম এইভাবে কাজ করে না।

.class1.class2 {} - একই ডিওএম নোডে দুটি ক্লাস সংজ্ঞায়িত করে তবে

.class1 {
    .class2 {}
}

নেস্টেড নোডগুলি সংজ্ঞায়িত করে। .class2এটি তখনই প্রয়োগ করা হবে যখন এটি শ্রেণীর সাথে কোনও নোডের শিশু class1

আমি এটির সাথেও বিভ্রান্ত হয়ে পড়েছি এবং আমার উপসংহারে এটি হ'ল কম thisকিওয়ার্ড দরকার :)।


5
sass& অপারেটরের সাথে নির্মিত সেই কার্যকারিতা রয়েছে।
সেভেনসিয়াট

2
খুব কম এখনও অসাধারণ, বিশেষত পিএইচপি ল্যাস প্রিপ্রোসেসর, এর পরিবর্তিত, আরও নমনীয় সিনট্যাক্স সহ। তবে সাধারণভাবে গ্রহণযোগ্য সিনট্যাক্স না পাওয়া পর্যন্ত সময়ে সময়ে এই জাতীয় সমস্যা দেখা দেবে। আমার দৃষ্টিতে, এটি হ'ল কেবল 'অপূর্ণতা।
মিংগো

1
@ newbie_86 আপনি sass এবং নেটিভ সিএসএস সিনট্যাক্স মিশ্রিত করতে পারবেন না। সুতরাং সাসে স্থানান্তরিত করার জন্য আপনার শৈলীর একটি সম্পূর্ণ পুনর্লিখনের প্রয়োজন, কম সময়ে আপনি ইতিমধ্যে আপনার বিদ্যমান শৈলীগুলি সংকলন করতে পারেন এবং সেগুলি টুকরো টুকরো করে পুনরায় লেখা শুরু করতে পারেন।
টপলেস

1
আমি কৌতূহলী ছিলাম কেন দ্বিতীয় উত্তরে এটির চেয়েও বেশি উত্স রয়েছে, যদিও এটি একই রকম এবং তার পরে তারিখ রয়েছে। তারপরে আমি সর্বশেষ বাক্যটি দেখেছি এবং উভয় জবাব উত্তর
দিয়েছি

@ টপলেস "আপনি sass এবং নেটিভ সিএসএস সিনট্যাক্স মিশ্রিত করতে পারবেন না" বলতে কী বোঝায় আমি বছরের পর বছর ধরে এটি করছি। আমার জন্য দুর্দান্ত কাজ করে
শানিমাল

115
.g {
    &.posted {
    }
}

পোস্ট করার আগে আপনার "&" যুক্ত করা উচিত


2

যদি অ্যাম্পারস্যান্ড বাসা বাঁধতে শিশু উপাদানটির ঠিক পাশেই থাকে তবে এটি একটি ডাবল শ্রেণির নির্বাচক হিসাবে সংকলিত হয়। & এবং নির্বাচকদের মধ্যে যদি জায়গা থাকে তবে এটি শিশু নির্বাচকের মধ্যে সংকলিত হবে। কম এখানে বাসা বাঁধার সম্পর্কে আরও পড়ুন ।

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.