Sass .scss: বাসা বাঁধার এবং একাধিক ক্লাস?

Question

আমি আমার বর্তমান প্রকল্পের জন্য স্যাস (.scss) ব্যবহার করছি।

নিম্নলিখিত উদাহরণ:

এইচটিএমএল

<div class="container desc">
    <div class="hello">
        Hello World
    </div>
</div>

SCSS

.container {
    background:red;
    color:white;

    .hello {
        padding-left:50px;
    }
}

এটি দুর্দান্ত কাজ করে।

নেস্টেড স্টাইলগুলি ব্যবহার করার সময় আমি কি একাধিক ক্লাস পরিচালনা করতে পারি?

উপরের নমুনায় আমি এটি সম্পর্কে কথা বলছি:

সিএসএস

.container.desc {
    background:blue;
}

div.containerএক্ষেত্রে সব কিছু সাধারণত হবে redতবে div.container.descনীল হবে।

containerসাসের সাথে আমি কীভাবে এটি ভিতরে বাসাতে পারি?

Comments

আপনার একটি ডাবল ক্লাস সিলেক্টর ব্যবহার করা উচিত। এই সমস্যাটি সাসে নেস্টিং বিকল্পের একটি নিখুঁত উদাহরণ। আপনি এখানে সব পড়তে পারেন kolosek.com/nesting-in-less-and-sass

— নেশা জোরিক

Answer 1

আপনি পিতামাতা নির্বাচক উল্লেখটি ব্যবহার করতে পারেন &, এটি সংকলনের পরে পিতামাতা নির্বাচক দ্বারা প্রতিস্থাপন করা হবে:

আপনার উদাহরণের জন্য:

.container {
    background:red;
    &.desc{
       background:blue;
    }
}

/* compiles to: */
.container {
    background: red;
}
.container.desc {
    background: blue;
}

&সম্পূর্ণরূপে সমাধান হবে, তাই যদি আপনার বাবা-মা নির্বাচক নিজেই নেস্টেড হয়, পাখির প্রতিস্থাপন করার পূর্বে সমাধান হবে &।

এই স্বরলিপিটি প্রায়শই ছদ্ম-উপাদান এবং শ্রেণি লিখতে ব্যবহৃত হয় :

.element{
    &:hover{ ... }
    &:nth-child(1){ ... }
}

তবে &আপনি নিজের পছন্দ মতো যে কোনও অবস্থান রাখতে পারেন ^* , সুতরাং নিম্নলিখিতটিও সম্ভব:

.container {
    background:red;
    #id &{
       background:blue;
    }
}

/* compiles to: */
.container {
    background: red;
}
#id .container {
    background: blue;
}

তবে সচেতন থাকুন, এটি কোনওরকমভাবে আপনার বাসা বাঁধার কাঠামো ভেঙে দেয় এবং এইভাবে আপনার স্টাইলশিটে একটি নির্দিষ্ট নিয়ম সন্ধানের প্রচেষ্টা বাড়াতে পারে।

*: অনুসরণকারী শূণ্যস্থান চেয়ে অন্য কোনো অক্ষর সামনে অনুমতি দেওয়া হয় &। সুতরাং আপনি selector+ এর সরাসরি সংক্ষেপণ করতে পারবেন না &- #id&এটি একটি ত্রুটি ফেলে দেবে।

Comments

&সিউডো-এলিমেন্ট এবং সিউডো-ক্লাস ব্যবহার করার সময় কেবল একটি পার্শ্ব নোট, এর সাধারণ ব্যবহার । উদাহরণস্বরূপ: &:hover।

— ক্রাশ করুন

@ ক্রাশ সম্পূর্ণতার জন্য আমি আমার উত্তরে এটি যুক্ত করেছি। মন্তব্য করার জন্য আপনাকে ধন্যবাদ.

— ক্রিস্টোফ

ধন্যবাদ। আমি ভেবেছিলাম যে আমি বোকা হয়ে যাচ্ছি কারণ এটি বেসিক গাইডে উল্লেখ করা হয়নি! বিটিডাব্লু

— স্কিপাইলট

যদি &কোনও লাইনের শেষে ব্যবহার করা হয়, এটি বাকী ক্লাসের শুরুতে অন্যান্য সমস্ত স্তরে সেই লাইনটি রাখে। আপনি এর &.descঅধীনে কাজ করে উপাদানগুলিকে একত্রিত করতে পারেন .container, যা এতে .Desc সংযোজন করবে, ফলস্বরূপ.container.desc

— কেট মিলার

scss-lint "& :: হোভার" (ডাবল কোলোন) ব্যবহার করার পরামর্শ দেয়

— মার্সেল ল্যাঙ্গ

Answer 2

যদি এটি হয় তবে আমি মনে করি আপনার একটি শ্রেণির নাম বা শ্রেণি নাম কনভেনশন তৈরির আরও ভাল উপায় ব্যবহার করা উচিত। উদাহরণস্বরূপ, যেমন আপনি বলেছিলেন আপনি .containerনির্দিষ্ট ব্যবহার বা উপস্থিতি অনুযায়ী ক্লাসের আলাদা রঙ থাকতে চান । তুমি এটি করতে পারো:

SCSS

.container {
  background: red;

  &--desc {
    background: blue;
  }

  // or you can do a more specific name
  &--blue {
    background: blue;
  }

  &--red {
    background: red;
  }
}

সিএসএস

.container {
  background: red;
}

.container--desc {
  background: blue;
}

.container--blue {
  background: blue;
}

.container--red {
  background: red;
}

উপরের কোডটি ক্লাস নামকরণ কনভেনশনে বিইএম পদ্ধতি সম্পর্কিত on আপনি এই লিঙ্কটি পরীক্ষা করতে পারেন: বিইএম - ব্লক এলিমেন্ট মডিফায়ার পদ্ধতি od

Comments

লক্ষ্য করুন এটি দুর্দান্ত লাগছে তবে এটিকে সর্বদাই এড়ানো উচিত। আপনি ভবিষ্যতে যখন আমাকে আপনার প্রকল্পটি অনুসন্ধান করার চেষ্টা করবেন .container--descএবং কোনও ফলাফল ছাড়াই শেষ করবেন না তখন আমাকে ধন্যবাদ জানাবে ।

— স্ট্যাভম

Answer 3

ক্রিস্টফের উত্তর নিখুঁত। কখনও কখনও তবে আপনি একের বেশি ক্লাসে যেতে চাইতে পারেন। এই ক্ষেত্রে আপনি @at-rootএবং #{}সিএসএস বৈশিষ্ট্যগুলি চেষ্টা করে দেখতে পারেন যা দুটি রুট ক্লাসকে ব্যবহার করে একে অপরের পাশে বসতে সক্ষম করে &।

এটি ( nothing before &নিয়মের কারণে ) কাজ করবে না :

container {
    background:red;
    color:white;
    
    .desc& {
      background: blue;
    }

    .hello {
        padding-left:50px;
    }
}

তবে এটি (ব্যবহার @at-root plus #{&}) করবে:

container {
    background:red;
    color:white;
    
    @at-root .desc#{&} {
      background: blue;
    }

    .hello {
        padding-left:50px;
    }
}