<p class="ta-justify fw-bold bg-color-orange">Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores alias labore voluptatum neque vero recusandae quam cum ad doloribus, dolor, sint veritatis, a omnis quod reprehenderit? Nobis fugit voluptatem reprehenderit!</p>
<p class="ta-right fw-100 color-blue">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Alias expedita quis modi esse! Illo soluta eveniet excepturi unde sint quos recusandae ut officiis eum expedita perspiciatis dolor atque, enim dolorum.</p>@each $value in (left, right, center, justify) {
.ta-#{$value} {
text-align: $value;
}
}
@each $value in (100, 300, 400, normal, 700, bold, 900) {
.fw-#{$value} {
font-weight: $value;
}
}
$colors: (
"orange": #f4511e,
"blue": #1e88e5,
"red": #f44336
);
@each $color, $i in $colors {
.bg-color-#{$color} {
background-color: $i;
}
}
@each $color, $i in $colors {
.color-#{$color} {
color: $i;
}
}
body {
padding: 20px;
}
External CSS
This Pen doesn't use any external CSS resources.