LESS for giving us star ratings in WooCommerce.

woocommerce-stars.less

/* === star ratings === */
.woocommerce, .woocommerce-page{

  .star-rating{
		float: right;
		overflow: hidden;
		position: relative;
		height: 1em;
		line-height: 1em;
		font-size: 1em;
		width: 5.4em;
		font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;

		// 2605 is a full star 2606 is a star outline
		&:before{
			content: "\2605\2605\2605\2605\2605";
			color:@light-grey;
			float: left;
			top: 0;
			left: 0;
			position: absolute;
			letter-spacing: 0.1em;
			letter-spacing: 0\9;
		} // &:before

		span{
			overflow: hidden;
			float: left;
			top: 0;
			left: 0;
			position: absolute;
			padding-top: 1.5em;

			&:after{
				content: "\2605\2605\2605\2605\2605";
				color:#d97e14;
				top: 0;
				position: absolute;
				left: 0;
				letter-spacing: 0.1em;
				letter-spacing: 0\9;
			} // &:after

		} // span

	} // .star-rating

	.products{
		.star-rating{
			display: block;
			margin: 0 0 .5em;
			float: none;
		} // .star-rating
	} // .products

	.hrreview-aggregate{
		.star-rating{
			margin: 10px 0 0 0;
		}
	} // .hrreview-aggregate

} // .woocommerce