কম কি একটি "প্রসারিত" বৈশিষ্ট্য আছে?

Question

SASS এর একটি বৈশিষ্ট্য রয়েছে @extendযা একটি নির্বাচককে অন্য নির্বাচকের বৈশিষ্ট্যগুলির উত্তরাধিকারী করার অনুমতি দেয় তবে বৈশিষ্ট্যগুলি অনুলিপি না করে (মিক্সিন্সের মতো)।

কম কি এই বৈশিষ্ট্য আছে?

Comments

স্পষ্টতার জন্য, অন্যান্য প্রশ্নের উল্লেখগুলি একই জিনিস জিজ্ঞাসা করে না। এই প্রশ্নটি সহজ: "কমের কি কোনও প্রসারিত বৈশিষ্ট্য রয়েছে?" অন্য প্রশ্নটি এমন কিছু জিজ্ঞাসা করছে যা স্টাইলিংয়ের সিদ্ধান্ত সম্পর্কে আরও বেশি চিন্তাভাবনা প্রয়োজন।

— jonschlinkert

... আমার শেষ মন্তব্যে যোগ করতে, অন্য প্রশ্নের মধ্যে "কোডিং-স্টাইল" ট্যাগ অন্তর্ভুক্ত রয়েছে যা আমার বক্তব্যটিকে আরও সমর্থন করে।

— jonschlinkert

Answer 1

হ্যাঁ, Less.js চালু extendমধ্যে v1.4.0 ।

:extend()

@extendএসএএসএস এবং স্টাইলাস দ্বারা ব্যবহৃত নিয়ম ( ) সিনট্যাক্স বাস্তবায়নের পরিবর্তে , কমটি সিউডো-শ্রেণীর সিনট্যাক্স প্রয়োগ করে, যা কম নির্বাচিতকে সরাসরি কোনও নির্বাচিতের জন্য প্রয়োগ করা বা একটি বিবৃতিতে অভ্যন্তরের নমনীয়তা দেয়। সুতরাং এই দুটি কাজ করবে:

.sidenav:extend(.nav) {...}

বা

.sidenav {
    &:extend(.nav);
    ...
}

অতিরিক্তভাবে, আপনি all"নেস্টেড" ক্লাসগুলি প্রসারিত করার জন্য নির্দেশিকাটি ব্যবহার করতে পারেন :

.sidenav:extend(.nav all){};

এবং আপনি যে ক্লাসগুলি প্রসারিত করতে চান তার একটি কমা-বিচ্ছিন্ন তালিকা যুক্ত করতে পারেন:

.global-nav {
    &:extend(.navbar, .nav all, .navbar-fixed-top all, .navbar-inverse);
    height: 70px;
}

নেস্টেড নির্বাচকদের প্রসারিত করার সময় আপনার পার্থক্যগুলি লক্ষ্য করা উচিত:

নেস্টেড নির্বাচক .selector1এবং selector2:

.selector1 {
  property1: a;
   .selector2 {
    property2: b;
   }
}

এখন ফলাফল .selector3:extend(.selector1 .selector2){};:

.selector1 {
  property1: a;
}
.selector1 .selector2,
.selector3 {
  property2: b;
}

, ফলাফল .selector3:extend(.selector1 all){};:

.selector1,
.selector3 {
  property1: a;
}
.selector1 .selector2,
.selector3 .selector2 {
  property2: b;
}

, .selector3:extend(.selector2){};আউটপুট

.selector1 {
  property1: a;
}
.selector1 .selector2 {
  property2: b;
}

এবং অবশেষে .selector3:extend(.selector2 all){};:

.selector1 {
  property1: a;
}
.selector1 .selector2,
.selector1 .selector3 {
  property2: b;
}

Comments

" @extendএসএএসএস এবং স্টাইলাস দ্বারা প্রয়োগ করা অ-রোল ( ) সিনট্যাক্সের চেয়ে" এলইএসএসের সিনট্যাক্সটি প্রথাগত সিএসএসের চেয়ে বেশি "বিশ্বস্ত" , যা সাধারণত ব্রাউজারে সিএসএস পার্সারকে নির্দেশনা বা নির্দেশ দেওয়ার জন্য সংরক্ষিত থাকে। " <- হ্যাক এর অর্থ কি? বিপণনের মতো গন্ধ হয়।

— cimmanon

আসুন আমরা এই আলোচনাটি

— চ্যাটটিতে

@ সিমমানন আমি অনুমান করি আপনি ঠিক বলেছেন, আমি এরকমভাবে শব্দ করা বোঝাতে চাইনি। তবে লেসের সিনট্যাক্স নিয়ে প্রচুর বিতর্ক রয়েছে বলে মনে হয় কারণ লোকে SASS এর মতো একই সিনট্যাক্স ব্যবহারের প্রত্যাশা করেছিল। তবে সিএসএসে, সিউসো-সিলেক্টরগুলি নথির গাছের উপাদানগুলিতে কোন স্টাইলের বিধি প্রযোজ্য তা নির্ধারণের জন্য প্যাটার্ন মেলানো নিয়মের জন্য ব্যবহৃত হয়, যেখানে নীতিগুলি "উচ্চ-স্তরের" নির্দেশের জন্য ব্যবহৃত হয় (যেমন আমি উল্লেখ করেছি)। সুতরাং সম্ভবত আমার উত্তরটি সম্পাদন করা উচিত? বা এটিই অন্য একটি প্রশ্ন: "কম কেন সিউডো-সিলেক্টর সিনট্যাক্সটি বেছে নিয়েছিল?"

— jonschlinkert

আপনার সত্যই কম ডকুমেন্টেশন অনলাইনে আপডেট করা উচিত, আমি এগুলি সম্পর্কে কিছুই দেখতে পাচ্ছি না: প্রসারিত () এবং এটি আগে জেনে রাখা ভাল ছিল

— জোশুয়া বামব্রিক

ডকুমেন্টেশন, কোড হিসাবে, সম্প্রদায় পরিচালিত হয়। এই ধরণের পরামর্শগুলি সত্যিকারের

— রেপোতে

Answer 2

কম ফ্রেমওয়ার্কে কোনও কার্য বাড়ানোর সহজ উপায়

.sibling-1 {
    color: red
}
.sibling-2 {
    background-color: #fff;
    .sibling-1();
}

আউটপুট

.sibling-1 {
  color: red
}
.sibling-2 {
  background-color: #fff;
  color: red
}

পড়ুন https://codepen.io/sprushika/pen/MVZoGB/