0

次のような翡翠のテンプレートがあるとします。

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;
  }

動いていない。

スタイル タグを 2 つに分割し、次のようにする必要があります。

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 が生成されますが、実際には 1 つしか必要ありません。

誰でもこれを行う良い方法がありますか?

4

1 に答える 1

3

あなたはこれを行うことができます。.タグの直後にを配置する代わりに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;
    }
于 2017-01-12T16:17:42.790 に答える