<p class="ta-justify fw-bold color-1">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-2">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>
@colors: #f4511e, #1e88e5, #f44336;
@colorsLength: length(@colors);

@alignments: left, right, center, justify;
@alignmentsLength: length(@alignments);

@weights: 100, 300, 400, normal, 700, bold, 900;
@weightsLength: length(@weights);

.colors(@colors, @index) when (@index > 0) {
  .colors(@colors, (@index - 1));
  @color: extract(@colors, @index);
  .color-@{index} {
    color: @color;
  }
}
.colors(@colors; @colorsLength);

.ta(@alignments, @index) when (@index > 0) {
  .ta(@alignments, (@index - 1));
  @alignment: extract(@alignments, @index);
  .ta-@{alignment} {
    text-align: @alignment;
  }
}
.ta(@alignments; @alignmentsLength);

.fw(@weights, @index) when (@index > 0) {
  .fw(@weights, (@index - 1));
  @weight: extract(@weights, @index);
  .fw-@{weight} {
    font-weight: @weight;
  }
}
.fw(@weights; @weightsLength);

body {
  padding: 1rem;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js