indented paragraphs

view source

Indent paragraphs instead of spacing them, as tends to happen in those "books" and "magazines" that old people read.

use-name

scut-indented-ps

type

mixin, with default-values placeholder

arguments

$indent

default

1.5em
$no-first-indent

default

true

It is a not uncommon printing practice to leave the first paragraph un-indented.

example

SCSS

.eg-indented-ps-1 {
  @include scut-indented-ps;
  // or @extend %scut-indented-ps;
}
.eg-indented-ps-2 {
  @include scut-indented-ps(3em, false);
}

compiled CSS

.eg-indented-ps-1 p {
  margin: 0;
  text-indent: 1.5em;
}
.eg-indented-ps-1 p:first-of-type {
  text-indent: 0;
}

.eg-indented-ps-2 p {
  margin: 0;
  text-indent: 3em;
}

Result

Default (first line un-indented)

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.

Variant (first line is no exception; larger indent)

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.