我如何在 css 块中使用 jade(pug) 的 "if statement"？

Question

假设我有一个像这样的玉模板：

style.
  .someclass1{
    font-size:10px;
  }
  .someclass2{
    font-size:10px;
  }
  .someclass3{
    font-size:10px;
  }
  .someclass4{
    font-size:10px;
  }
  .someclass5{
    font-size:10px;
  }

而且我想.someclass3在渲染翡翠模板时通过不同的选项得到不同的结果。

类似于：

style.
  .someclass1{
    font-size:10px;
  }
  .someclass2{
    font-size:10px;
  }
  if(options.key1=='a')
    .someclass3{
      font-size:10px;
    }
  else
    .someclass3{
      font-size:8px;
    }
  .someclass4{
    font-size:10px;
  }
  .someclass5{
    font-size:10px;
  }

没用。

我必须将样式标签分成两部分并执行如下操作：

style.
  .someclass1{
    font-size:10px;
  }
  .someclass2{
    font-size:10px;
  }
if(options.key1=='a')
  style.
    .someclass3{
      font-size:10px;
    }
else
  style.
    .someclass3{
      font-size:8px;
    }
style.
  .someclass4{
    font-size:10px;
  }
  .someclass5{
    font-size:10px;
  }

这将导致 3 种样式的标签 HTML，实际上只需要一个。

谁有好的方法吗？

Answer 1

你可以做到。不要将 . 紧跟在 style 标记之后（它告诉 pug 整个块都是纯文本），您可以将 . 放在每个纯文本块之前。例如

style
  .
    .someclass1{
      font-size:10px;
    }
    .someclass2{
      font-size:10px;
    }
  if options.key1=='a'
    .
      .someclass3{
        font-size:10px;
      }
  else
    .
      .someclass3{
        font-size:8px;
      }
  .
    .someclass4{
      font-size:10px;
    }
    .someclass5{
      font-size:10px;
    }

我如何在 css 块中使用 jade(pug) 的 "if statement"？

How do I use jade(pug)'s "if statement" inside a css block?

pugjs

pug