nest-all.scss

//Simple comment up here to explain that accordion is a accordion with 3 parts blah blah blah
.accordion {
	.js & {
		display: none;
	}
	.js .open + & {
		display: block;
	}
	//dont use & unless it changes the order here.
	li {
		border-top: 1px solid #e2e4e6;		
		&:first-child {
			border-top-color: transparent;
		}
	}
	//dont use & unless it changes the order here.
	a {
		@include rem(padding, 5px 10px 6px);
		//& is applicable here are you are changing the default nesting behavior by putting it like ".accordion a.icon" not ".accordion a .icon"
		&.icon {
			padding-left: 40px;
			position: relative;
		}
		&.icon img {
			@include rem(left, 10px);
			margin-top: -2px;
			position: absolute;
		}
	}
}

separate-per-tag.scss

//bad way :)