:ruby
  text = '
    So here we are again — back with more placeholder text for another example.
    You’re sticking around to read it, too.
    Fascinating.
    We’re paused for a moment here, reading and learning together.
    Relaxing, isn’t it?
  '
  text2 = '
    Now we’re on the second paragraph.
    Feel free to stop reading and look at the indentation.
    That’s why we’re both here after all.
  '

.mhc.mw3
  .mb1l.mw05
    %p= text
    %p.ti05= text2

  .mb1l.mw1
    %p= text
    %p.ti1= text2

  .mb1l.mw2
    %p= text
    %p.ti2= text2

  .mhc.mw3
    %p= text
    %p.ti3= text2
View Compiled
@import url('https://fonts.googleapis.com/css?family=Source+Serif+Pro:400')

html
  background: #f7f7f6
  font-family: 'Source Serif Pro', serif
  font-size: 17px
  line-height: 1.35
  padding: 37.5px

.mhc
  margin-left: auto
  margin-right: auto

.mw05
  max-width: 460 / 19 * 1em
.mw1
  max-width: 620 / 19 * 1em
.mw2
  max-width: 750 / 19 * 1em
.mw3
  max-width: 900 / 19 * 1em

p
  margin: 0

  + p

    &.ti05
      text-indent: 0.5em
    &.ti1
      text-indent: 1em
    &.ti2
      text-indent: 2em
    &.ti3
      text-indent: 3em

.mb1l
  margin-bottom: 17px * 1.35

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.