SASS-এ ভেরিয়েবল এবং কন্টেন্ট ব্লকের স্কোপ

মিক্সিনে কন্টেন্ট ব্লক পাস করার সময় তাদের স্কোপ ব্লকের নির্দিষ্ট অবস্থান দ্বারা নির্ধারিত হয়, মিক্সিনের দ্বারা নয়। ফলস্বরূপ, আমরা পাস করা কন্টেন্ট ব্লকে মিক্সিনের লোকাল ভেরিয়েবল ব্যবহার করতে পারি না, যা শুধুমাত্র গ্লোবাল ভেরিয়েবল নিয়ে কাজ করতে সক্ষম হবে।

নিম্নলিখিত উদাহরণটি বিবেচনা করুন:

$size: 14px;
	@mixin sizes ($size: 20px) {
		font-size: $size;
		padding: $size;
		@content;
}

.navbar {
	@include sizes {
		margin: $size;
	}
}

কম্পাইলেশনের ফলাফল:

.navbar {
	font-size: 20px;
	padding: 20px;
	margin: 14px; 
}

বলুন, নিম্নলিখিত কোডের কম্পাইলেশনের ফলাফল কী হবে:

$color: yellow;

@mixin links ($color: red) {
	background: $color;
	@content;
}

বলুন, নিম্নলিখিত কোডের কম্পাইলেশনের ফলাফল কী হবে:

$color: yellow;
$size: 10px;

@mixin links ($color: red, $size: 12px) {
	background-color: $color;
	font-size: $size;
	@content;
}

.navbar {
	@include links {
		box-shadow: $color;
		padding: $size;
	}
}

বলুন, নিম্নলিখিত কোডের কম্পাইলেশনের ফলাফল কী হবে:

$color: green;
$size: 6px;

@mixin links ($color: red, $size: 10px) {
	color: $color;
	font-size: $size;
	@content;
}

.navbar {
	@include links {
		border-color: $color;
		margin: $size;
	}
}

#active{
	@include links{
		background-color: $color;
		padding-top: $size;
		padding-bottom: $size * 2;
	}
}