আমার এসসিএসএস ফাইলটিতে এটি রয়েছে:
.class-a{
display: inline-block;
//some other properties
&:hover{
color: darken(#FFFFFF, 10%);
}
}
.class-b{
//Inherite class-a here
//some properties
}ক্লাস-বিতে, আমি সমস্ত সম্পত্তি এবং নেস্টেড ঘোষণাগুলি উত্তরাধিকারসূত্রে পেতে চাই class-a। এটি কিভাবে হয়? আমি ব্যবহার করার চেষ্টা করেছি @include class-a, তবে এটি সংকলনের সময় কেবল একটি ত্রুটি ছুঁড়েছে।
উত্তর:
এই জাতীয় কোনও সহজ মামলার জন্য দেখে মনে হচ্ছে @mixinএবং এটির @includeপ্রয়োজন নেই।
একজন কেবল এটি করতে পারেন:
.myclass {
font-weight: bold;
font-size: 90px;
}
.myotherclass {
@extend .myclass;
color: #000000;
}@extend- আপনার সম্পর্কে সচেতন হওয়া উচিত এমন কিছু কৌশলগত পার্শ্ব প্রতিক্রিয়া: stackoverflow.com/questions/30744625/…
.myclassঅন্য কোথাও ব্যবহার করা হয়নি (আমি মনে করি) এর পরিবর্তে অন্য কোথাও ব্যবহার করা হয় না .myotherclass, তবে এটি .myclassহিসাবে সংজ্ঞায়িত %myclassএবং প্রসারিত .myotherclassকরা আরও ভাল @extend %myclass;। এটি তৈরি করবে.myotherclass{ font-weight: bold; font-size: 90px; color: #000000; }
এটা চেষ্টা কর:
এখন আপনি আপনার যে কোনও শ্রেণিতে% বেস-শ্রেণি প্রসারিত করতে পারেন (যেমন। আমার-শ্রেণি)।
%base-class {
width: 80%;
margin-left: 10%;
margin-right: 10%;
}
.my-base-class {
@extend %base-class;
}
.my-class {
@extend %base-class;
margin-bottom: 40px;
}
@ এক্সটেন্ড ব্যবহার করা একটি সূক্ষ্ম সমাধান, তবে সচেতন থাকুন যে সংকলিত সিএসএস ক্লাস সংজ্ঞাটি ভেঙে দেবে। যে কোনও শ্রেণি যা একই স্থানধারককে প্রসারিত করে তাদের একত্রে গোষ্ঠীভুক্ত করা হবে এবং শ্রেণিতে প্রসারিত না হওয়া নিয়মগুলি পৃথক সংজ্ঞাতে থাকবে। যদি বেশ কয়েকটি শ্রেণি প্রসারিত হয়ে যায় তবে সংকলিত সিএসএস বা ডেভ সরঞ্জামগুলিতে কোনও নির্বাচককে অনুসন্ধান করা অবাস্তব হয়ে উঠতে পারে। যেখানে একটি মিশিন মিক্সিন কোডটি নকল করবে এবং কোনও অতিরিক্ত শৈলী যুক্ত করবে।
আপনি এই sassmeister এ @ এক্সেট এবং @ মিক্সিনের মধ্যে পার্থক্য দেখতে পাবেন
@extend .myclass;
@extend #{'.my-class'};
@extend #{'.my-class', '.my-other-class'};
অন্য বিকল্পটি কোনও অ্যাট্রিবিউট নির্বাচনকারী ব্যবহার করে:
[class^="your-class-name"]{
//your style here
}
যেখানে "আপনার শ্রেণীর নাম" দিয়ে শুরু হওয়া প্রতিটি শ্রেণি এই শৈলীটি ব্যবহার করে।
সুতরাং আপনার ক্ষেত্রে, আপনি এটি এর মতো করতে পারেন:
[class^="class"]{
display: inline-block;
//some other properties
&:hover{
color: darken(#FFFFFF, 10%);
}
}
.class-b{
//specifically for class b
width: 100px;
&:hover{
color: darken(#FFFFFF, 20%);
}
}
ডাব্লু 3 স্কুলগুলিতে অ্যাট্রিবিউট নির্বাচনকারীদের সম্পর্কে আরও