Hacker News Reader

Comment by axblount | Hacker News Reader

> Or how about repeated blocks of styles that are used in various locations throughout the stylesheet?

  p {
  margin-bottom: 20px; font-size: 14px; line-height: 1.5;
  }
  footer {
           margin-bottom: 20px;
           font-size: 14px;
           line-height: 1.5;
  }

I don't know why this situation is a such a common example of the need for SASS & company. It's easily addressable with plain ol' CSS. No mixins required.

  p, footer {
           margin-bottom: 20px;
           font-size: 14px;
           line-height: 1.5;
  }

View on HN

I think doing it with SASS makes it cleaner when there are some differences between p and footer. So, instead of this CSS:

  p, footer {
      margin-bottom: 20px;
      font-size: 14px;
      line-height: 1.5;
  }

  p {
      text-align: justify;
  }

  footer {
      border: 1px solid black;
  }

You could do this SASS:

  @mixin default-type {
      margin-bottom: 20px;
      font-size: 14px;
      line-height: 1.5;
  }

  p {
      @include default-type;
      text-align: justify;
  }

  footer {
      @include default-type;
      border: 1px solid black;
  }

I like that last one better. It's like everything that describes what the footer looks like can be contained in the single footer block, rather than having many parts of your stylesheet apply to the footer and saying "this applies to both p and footer."

So how would you reduce this version:

p { margin-bottom: 20px; font-size: 14px; line-height: 1.5; } footer { position: fixed; margin-bottom: 20px; font-size: 14px; line-height: 1.5; }

  p, footer {
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 1.5;
  }
  footer { position: fixed; }

  p, footer {
    margin-bottom: 20px; 
    font-size: 14px; 
    line-height: 1.5;
  }
  footer {
    position: fixed;
  }

btw I'm totally pro less/sass, but that example sucked :p

Reply on news.ycombinator.com