title: How to add margin to nested comments?
body: <p>I am creating a Reddit clone, and right now have the ability to create comments, and sub-comments. Using CSS I was able to add a margin (indentation) to "child" comments (sub-comments). But my "grand-child" comments (sub sub-comments) retain the same level of indentation as my "child" comments. </p>
  
  <p>How can I go about adding a logic that would increment the margin for each sub-comment? Someone suggested using sass, but i've never used it... if that's the best way to go about it, give me a hint (I want to learn). </p>
  
  <p>This is my comment partial </p>
  
  <pre><code>&lt;%= div_for(comment) do %&gt;
      &lt;div class="comments_wrapper clearfix"&gt;
          &lt;div class="pull-left"&gt;
  
              &lt;!-- Parent Comments --&gt;
              &lt;!-- Determines if the comment is parent or not--&gt;
              &lt;% if !comment.ancestry? %&gt; 
  
              &lt;p class="parent"&gt;&lt;%= comment.body %&gt;&lt;/p&gt;
              &lt;p&gt;&lt;small&gt;Submitted &lt;strong&gt;&lt;%= time_ago_in_words(comment.created_at) %&gt; ago&lt;/strong&gt; by &lt;%= comment.user.email %&gt;&lt;/small&gt;&lt;/p&gt;
  
              &lt;!--Reply button for parent comment--&gt;
              &lt;button onClick="$('#reply&lt;%=comment.id%&gt;').show()" class="btn btn-sm btn-default"&gt;Reply&lt;/button&gt;
  
                  &lt;!--Reply form for parent comment--&gt;
                  &lt;div id="reply&lt;%=comment.id%&gt;" style="display:none;"&gt;
                  &lt;%= form_for [@link, @comment = Comment.new] do |f| %&gt;
                  &lt;%= f.hidden_field :ancestry, :value =&gt; comment.id %&gt;
                    &lt;%= f.text_area :body %&gt; &lt;br&gt;
                    &lt;%= f.submit %&gt;
                    &lt;% end %&gt;
                  &lt;/div&gt;
  
              &lt;% else %&gt;
  
              &lt;!-- Child Comments --&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-md-3-offset-3 child"&gt;
                      &lt;p class="child"&gt;&lt;%= comment.body %&gt;&lt;/p&gt;
                      &lt;p&gt;&lt;small&gt;Submitted &lt;strong&gt;
                          &lt;%= time_ago_in_words(comment.created_at) %&gt; ago&lt;/strong&gt; by &lt;%= comment.user.email %&gt;&lt;/small&gt;&lt;/p&gt;
  
                      &lt;!--Reply button for child comment--&gt;
                      &lt;button onClick="$('#reply&lt;%=comment.id%&gt;').show()" class="btn btn-sm btn-default"&gt;Reply&lt;/button&gt;
  
                      &lt;!--Reply form for child comment--&gt;
                      &lt;div id="reply&lt;%=comment.id%&gt;" style="display:none;"&gt;
                          &lt;%= form_for [@link, @comment = Comment.new] do |f| %&gt;
                          &lt;%= f.hidden_field :ancestry, :value =&gt; comment.id %&gt;
                            &lt;%= f.text_area :body %&gt; &lt;br&gt;
                            &lt;%= f.submit %&gt;
                            &lt;% end %&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;% end %&gt;
  
  
          &lt;/div&gt;
  
          &lt;div class="btn-group pull-right"&gt;
              &lt;% if comment.user == current_user -%&gt;
                  &lt;%= link_to 'Destroy', comment, method: :delete, data: { confirm: 'Are you sure?' }, class: "btn btn-sm btn-default" %&gt;
              &lt;% end %&gt;
  
  
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;% end %&gt;
  </code></pre>
  
  <p>Lastly, this is my CSS</p>
  
  <pre><code>@import "bootstrap-sprockets";
  @import "bootstrap";
  
  #logo {
      font-size: 26px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: -1px;
      padding: 15px 0;
      a {
          color: #2F363E;
      }
  }
  
  #main_content {
      #content {
          float: none;
      }
      padding-bottom: 100px;
      .link {
          padding: 2em 1em;
          border-bottom: 1px solid #e9e9e9;
          .title {
  
              a {
                  color: #FF4500;
              }
          }
      }
      .comments_title {
          margin-top: 2em;
      }
      #comments {
          .comment {
              padding: 1em 0;
              border-top: 1px solid #E9E9E9;
              .lead {
                  margin-bottom: 0;
              }
          }
      }
  }
  
  
  .child {
      padding-left: 15%;
      font-size: 20px;
  }
  </code></pre>