2016-03-28 4 views
2

SASSミックスインを書いて、別の部分ファイルに含めました。いくつかの奇妙な理由のために、コンパイルされたCSSにコードブロックを含めていません。 @debugを使用して計算をダンプすることができますが、それらは正しいです。なぜ私のCSSファイルに書き込まれていないのですか? mixinと同じ場所で宣言された他のルールは、mixinではなくコンパイルされています。どんなポインタも大いに役立ちます。ここでは、コードがあります:SASSミックスインで困った

@mixin px2rem($property, $px) { 
    $property: $px; 
    $property: ($px/$base-font-size) * 1rem; 
    @debug inspect(($px/$base-font-size) * 1rem); 
} 

デバッグプロパティには、次のように出力します。ここでは

_mixins.scss:4 DEBUG: 1.06667rem 

は、それを消費セレクタは次のとおりです。

input, select { 

    @include px2rem(font-size, 15px); 
    @debug (16px/$base-font-size) * 1rem; 
    @debug (15px/16px) * 1rem; 

    height: 2.5rem; 
    line-height: 2.5rem; 
    padding: 1rem; 
    width: 70%; 
    margin-bottom: 1rem; 
    border-radius: 1px; 
    border: #bcbebf 1px solid; 
} 

コンパイルCSS:

.subscription input, 
.subscription select{ 
    height:2.5rem; 
    line-height:2.5rem; 
    padding:1rem; 
    width:70%; 
    margin-bottom:1rem; 
    border-radius:1px; 
    border:1px solid #bcbebf 
} 

デバッグ文の出力:

_subscription.scss:9 DEBUG: 1.06667rem 
_subscription.scss:10 DEBUG: 0.9375rem 

答えて

2

を補間するようにしてください:

@mixin px2rem($property, $px) { 
    #{$property}: $px; 
    #{$property}: ($px/$base-font-size) * 1rem; 
    @debug inspect(($px/$base-font-size) * 1rem); 
} 

編集:

あなたはサスは、CSSプロパティとして変数propertyを扱いたいので、あなたはそれを補間する必要があります。

それ以外の場合、Sassは変数の割り当てを行います。

関連する問題