SASS හි නැවතුම් තුළ ඥාති සම්බන්ධතා අනුව තෝරන්නන්

SASS හි නැවතුම් කිරීමේදී ඥාති සම්බන්ධතාවය අනුව අංග තෝරා ගන්නා විවිධ තෝරන්නන් එක් කරන ආකාරය අපි සලකා බලමු. උදාහරණ බලන්න.

උදාහරණය

දරු තෝරන්නා:

div {
	> p {
		color: red;
	}
}

සම්පාදනයේ ප්‍රතිඵලය:

div > p {
	color: red;
}

අසල්වැසි තෝරන්නා

div {
	+ p {
		color: red;
	}
}

සම්පාදනයේ ප්‍රතිඵලය:

div + p {
	color: red; 
}

සහෝදර තෝරන්නා:

div {
	~ p {
		color: red;
	}
}

සම්පාදනයේ ප්‍රතිඵලය:

div ~ p {
	color: red;
}

පහත කේතයේ සම්පාදන ප්‍රතිඵලය කුමක් වේදැයි පැහැදිලි කරන්න:

ul {
	color: red;
	
	> li {
		padding: 20px;
	}
}

පහත කේතයේ සම්පාදන ප්‍රතිඵලය කුමක් වේදැයි පැහැදිලි කරන්න:

div {
	ul {
		> li {
			padding: 20px;
		}
	}
}