সাসে বাসা বাঁধতে আমার সমস্যা হচ্ছে। বলুন আমার কাছে নিম্নলিখিত HTML রয়েছে:
<p href="#" class="item">Text</p>
<p href="#" class="item">Text</p>
<a href="#" class="item">Link</a>
নিম্নলিখিতগুলিতে আমি আমার শৈলীর বাসা দেওয়ার চেষ্টা করলে আমি একটি সংকলন ত্রুটি পাই:
.item {
color: black;
a& {
color:blue;
}
}
প্যারেন্ট সিলেক্টর যখন একই উপাদানটির অংশ হয় তখন আমি কোনও টাইপ নির্বাচককে কীভাবে রেফারেন্স করব?
উত্তর:
কুমার যেমন উল্লেখ করেছেন , সাসের পর থেকে এটি সম্ভব হয়েছে 3.3.0.rc.1 (Maptastic Maple)।
@ এ-রুট নির্দেশিকা তাদের পিতামাতা নির্বাচকদের নীচে বাসা বাঁধার পরিবর্তে ডকুমেন্টের মূলে এক বা একাধিক বিধি নির্গত করে।
আমরা উদ্দিষ্ট ফলাফল পৌঁছানোর জন্য অন্তরঙ্গকরণের সাথে @at-rootনির্দেশকে একত্রিত করতে পারি ।#{}
SASS
.item {
color: black;
@at-root {
a#{&} {
color:blue;
}
}
}
// Can also be written like this.
.item {
color: black;
@at-root a#{&} {
color:blue;
}
}
আউটপুট সিএসএস
.item {
color: black;
}
a.item {
color: blue;
}
.item a.itemকোনও কারণে আউটপুট প্রকাশিত হচ্ছে । আমি a#{&}এটি নিজেই করার চেষ্টা করেছি এবং এখনও একই ফলাফল।
@at-root-Only পদ্ধতি সমস্যা সমাধান করতে হবে যদি আপনি সেই শৃঙ্খল আপ নিকটতম নির্বাচক প্রসারিত করতে মনস্থ করা। উদাহরণ হিসাবে:
#id > .element {
@at-root div#{&} {
color: blue;
}
}
সংকলন করবে:
div#id > .element {
color: blue;
}
আপনি যদি .elementপরিবর্তে আপনার ট্যাগ যোগদান করতে চান #id?
সাস নামে একটি ফাংশন রয়েছে যা selector-unify()এটি সমাধান করে। @at-rootএটির সাথে এটি ব্যবহার করে লক্ষ্য করা সম্ভব .element।
#id > .element {
@at-root #{selector-unify(&, div)} {
color: blue;
}
}
সংকলন করবে:
#id > div.element {
color: blue;
}
#id > .element #id > div.element { color: blue; }। আরেকটি পন্থা ব্যবহার করতে হবে selector_replace, #id { > .element { @at-root #{selector-replace(&,'.element', 'div.element')} { color: blue;}}}। আরও ভাল সুসংগঠনের জন্য এখানে একটি সূচনা
selector-replaceএটি করার আরেকটি উপায়, তবে এটি নির্বাচক কী তা জানার প্রয়োজন। selector-unifyপদ্ধতি mixins ব্যবহৃত হচ্ছে সুবিধা রয়েছে।
প্রারম্ভিকদের জন্য, (এই উত্তরটি লেখার সময়) নির্বাচক & ব্যবহার করে এমন কোনও সাস সিনট্যাক্স নেই । আপনি যদি এরকম কিছু করতে যাচ্ছেন তবে আপনার নির্বাচক এবং অ্যাম্পারস্যান্ডের মধ্যে একটি স্থান প্রয়োজন। উদাহরণ স্বরূপ:
.item {
.helper & {
}
}
// compiles to:
.helper .item {
}
অ্যাম্পারস্যান্ড ব্যবহারের অন্য উপায়টি সম্ভবত আপনি (ভুলভাবে) সন্ধান করছেন:
.item {
&.helper {
}
}
// compiles to:
.item.helper {
}
এটি আপনাকে অন্যান্য ক্লাস, আইডি, সিউডো-সিলেক্টর ইত্যাদির সাহায্যে নির্বাচকদের প্রসারিত করতে দেয়, দুর্ভাগ্যক্রমে আপনার ক্ষেত্রে, এটি তাত্ত্বিকভাবে .itema জাতীয় কিছু সংকলন করবে যা স্পষ্টতই কাজ করে না।
আপনি কীভাবে আপনার সিএসএস লিখছেন তা পুনর্বিবেচনা করতে চান। আপনি ব্যবহার করতে পারে এমন কোনও পিতামাতার উপাদান রয়েছে?
<div class="item">
<p>text</p>
<p>text</p>
<a href="#">a link</a>
</div>
এইভাবে, আপনি সহজেই নিম্নলিখিত পদ্ধতিতে আপনার SASS লিখতে পারেন:
.item {
p {
// paragraph styles here
}
a {
// anchor styles here
}
}
(পার্শ্ব নোট: আপনার এইচটিএমএলটি একবার দেখে নেওয়া উচিত You're আপনি একক এবং ডাবল উদ্ধৃতি মিশ্রণ করছেন এবং পি ট্যাগগুলিতে href বৈশিষ্ট্যগুলি রেখেছেন))
hrefট্যাগ লাগানো হয় p।
.item { a& }এবং এর জন্য কোনও সাস সিনট্যাক্স নেই (যতদূর আমি অবগত রয়েছি। আমি পরামর্শ দিয়েছিলাম যে তিনি সম্ভবত বর্ণিত অ্যাম্পারসন্ড সিনট্যাক্সের মতো এমন কিছু সন্ধান করছেন যা সাসে নিয়মিত ব্যবহৃত হয়। তবে, ওপি-র উদাহরণের ভিত্তিতে বলা .item { &a }হচ্ছে) বৈধ নয় এবং এটি সংকলন.itema করবে Just ঠিক যেমনটি আমি আমার উত্তরে বলেছিলাম there এখানে কিছু অনুপস্থিত আছে কি?
.item { a& { ... } }যা এখন ব্লাইনের সাথে উল্লেখ করা হিসাবে এটি করা যেতে পারে .item { @at-root a#{&} { ... } }। মুল বক্তব্যটি হ'ল যদি আপনার উপাদানটিতে কোনও ক্লাস থাকে তবে এটি কাজ করা সহজ .item { &.class { ... } }কেন আপনি কোনও কাঁচা এইচটিএমএল উপাদান দিয়ে একই জিনিসটি করতে সক্ষম হবেন না। ওপি পোস্ট করা সময়ের মতো এটি করার কোনও উপায় ছিল না তার অর্থ এই নয় যে কার্যত কার্যকারিতাটি এটি সম্পাদন করতে চাইলে তিনি ভুল করেছিলেন।
আফাইক যদি আপনি একই সাথে ক্লাস এবং ট্যাগগুলির জন্য অ্যাম্পারস্যান্ড একত্রিত করতে চান তবে আপনার এই বাক্য গঠনটি ব্যবহার করতে হবে:
.c1 {
@at-root h1#{&},
h2#{&}
&.c2, {
color: #aaa;
}
}
সংকলন করা হবে
h1.c1,
h2.c1,
.c1.c2 {
color: #aaa;
}
অন্যান্য ব্যবহার (যেমন ক্লাস ব্যবহারের আগে @at-rootবা একাধিক @at-rootগুলি ব্যবহার করা ) ত্রুটি ঘটায়।
আশা করি এটি কার্যকর হবে
#{&}মূলত সংকলকটি ট্রিক করছে - বা এটি কি ভবিষ্যতে সর্বদা কার্যকর হবে !?
#{}কিছু মূল্যায়ন করা হয়। এর &অর্থ বর্তমান নির্বাচক। তাই #{&}মূল্যায়ন করা হয় .c1।
&
এই বৈশিষ্ট্যটি সাসের নতুন সংস্করণে অবতরণ করেছে, 3.3.0.rc.1(Maptastic Maple)
দুটি ঘনিষ্ঠভাবে সম্পর্কিত বৈশিষ্ট্য যা আপনাকে ব্যবহার করতে হবে তা হ'ল লিখিতযোগ্য &, যা আপনি পিতামাতার উপাদানগুলির রেফারেন্সের জন্য কোনও নেস্টেড স্টাইলের মধ্যে বিভক্ত করতে পারেন, এবং @at-rootনির্দেশিকা, যা নীচের সিলেক্টর বা সিএসএসের ব্লকে মূলটিতে রেখে দেয় (এটি হবে না আউটপুটযুক্ত সিএসএসে কোনও পিতা-মাতা থাকুন)
আরও বিশদের জন্য এই গিথুব ইস্যুটি দেখুন