data-widths in css

using data attributes in css

by uge44

HTML

<div class="data-test">
    <span data-width="85" data-tint="1"></span>
</div>
<div class="data-test">
    <span data-width="55" data-tint="2"></span>
</div>
<div class="data-test">
    <span data-width="100" data-tint="3"></span>
</div>
<div class="data-test">
    <span data-width="30" data-tint="4"></span>
</div>
<div class="data-test">
    <span data-width="50" data-tint="5"></span>
</div>
<div class="data-test">
    <span data-width="90" data-tint="6"></span>
</div>
<div class="data-test">
    <span data-width="25" data-tint="7"></span>
</div>
<div class="data-test">
    <span data-width="95" data-tint="8"></span>
</div>
<div class="data-test">
    <span data-width="60" data-tint="9"></span>
</div>
<div class="data-test">
    <span data-width="45" data-tint="10"></span>
</div>

SCSS

.data-test {
	height: 30px;
	width: 100%;
	margin-bottom: 15px;
	background-color: #eee;
	span {
		display:block;
		height: 100%;
		&[data-tint="1"] {
			background-color: rgba(118, 255, 3, 0.6);
		}
		&[data-tint="2"] {
			background-color: rgba(0, 176, 255, 0.4);
		}
		&[data-tint="3"] {
			background-color: rgba(224, 64, 251, 0.7);
		}
		&[data-tint="4"] {
			background-color: rgba(216, 27, 96, 0.6);
		}
		&[data-tint="5"] {
			background-color: rgba(77, 208, 225, 0.5);
		}
		&[data-tint="6"] {
			background-color: rgba(255, 23, 68, 0.5);
		}
		&[data-tint="7"] {
			background-color: rgba(101, 31, 255, 0.5);
		}
		&[data-tint="8"] {
			background-color: rgba(61, 90, 254, 0.5);
		}
		&[data-tint="9"] {
			background-color: rgba(29, 233, 182, 0.5);
		}
		&[data-tint="10"] {
			background-color: rgba(245, 124, 0, 0.5);
		}
		@for $i from 1 through 100 {
			&[data-width="#{$i}"] {
				width: calc(#{$i} * 1%);
			}
		}
	}
}