Cacher is the code snippet organizer for pro developers

.star
	.star-el
		+icon("star","icon")
	.star-el
		+icon("star","icon")
	.star-el
		+icon("star","icon")
	.star-el
		+icon("star","icon")
	.star-el
		+icon("star","icon")

$('.star .star-el').hover(function () {
	if (!$(this).parent().hasClass('star--fix')) {
		$('.star .star-el').removeClass('star-el--active');
		$(this).addClass('star-el--active');
		$(this).prevAll('.star-el').addClass('star-el--active')
	}
});
$('.star .star-el').click(function () {
	$(this).parent().toggleClass('star--fix');
	$(this).addClass('star-el--active');
	$(this).prevAll('.star-el').addClass('star-el--active')
});

// без ховера

	$('.star .star-el').click(function () {
		$(this).closest('.star').find('.star-el').removeClass('star-el--active');
		$(this).addClass('star-el--active');
		$(this).prevAll('.star-el').addClass('star-el--active')
	});

.star-el--active
	fill red

.star
	f()
	.icon
		size 40px
		cp()