Optimize css with stylus

2019-07-25 11:55发布

问题:

I have such css:

p{
    margin: .85em auto;
    line-height: 1.7;
    text-indent: 2em;
  }
  blockquote p {
      text-indent: 0;
  }

Is there any way to optimize that using stylus?

Just to do something like that:

      p{
        margin: .85em auto;
        line-height: 1.7;
        (not if blockquote) text-indent: 2em;
      }

HTML I am trying to apply that to

  <div class="entry">
     <p></p> //text-indent here
     <blockquote>
      <p></p> //no text-indent here
     </blockquote>
    </div>

回答1:

Stylus can't read the HTML to know if you have a blockquote wrapping the p tag. Even if your code works I don't see any advantage over the CSS you have. Maybe in plain CSS you can use :not pseudo-class to save one line of code:

p {
  margin: .85em auto;
  line-height: 1.7;
}

:not(blockquote) > p {
  text-indent: 2em;
}


标签: css stylus