翡翠経路から渡された変数で条件付きCSSを行う方法

Question

私は翡翠のテンプレートに変数「天気」を渡そうとしています。雨や澄んだところなどに基づいて背景が変わります。ここで

は私のルートindex.jsファイル

var express = require('express'); 
var router = express.Router(); 

/* GET home page. */ 
router.get('/', function(req, res, next) { 
    res.render('index', { title: 'Express' , ip: req.ip, weather: 'rain'}); 
}); 

module.exports = router; 

ですこれは私がちょうど変更ところ、私はここで

//styles 
    style. 
     .intro { 
     if weather == 'rain' 
     background: url(../images/rain.jpg) no-repeat bottom center scroll; 
     } 

に合格しようとしています条件付きで自分index.jadeファイル内の一部であるです条件なしの背景とそれが働いた

//styles 
    style. 
     .intro { 
     background: url(../images/rain.jpg) no-repeat bottom center scroll; 
     } 

私は翡翠の最新バージョンを持っていると私は確信していた私の構文がどこが間違っているかはわかりません。

Answer 1

残念ながら、これはあなたが記述した方法では不可能です。 this SO answerで説明されているように、styleの内容はPugによって解釈されず、そのままの状態でプレーンテキスト形式で保存されます。つまり、ページの実際の本体で条件付きロジックが発生する必要があります。

.rainyと.clearの2つ（またはそれ以上）のクラスを作成し、styleセクションに静的に定義することで、これを簡単に解決できます。本文では、weatherの値に基づいて、.intro要素にクラスを動的に追加できます。