css - css property：valueをsassmixin引数として渡す

Question

次のダミーの例のようなものがsass/scssで可能ですか？さまざまなデバイスで無限のメディアクエリが繰り返されるのを防ぐために、このようなものが必要です。

// The dummy mixin
@mixin iphone_rules($webapp_portrait:null){


  @if($webapp_portrait != null){
    // Portrait (webapp)
    @media screen and (max-height: 460px){

     // The following line is just a dummy 
     eg. echo $webapp_portrait;
    }
  }
}

// How I want to use it
.mySelector{

   margin-left:10px;
   padding:0px;

   @include iphone_rules('margin-left:20px; padding:2px;');
}

Answer 1

Sassでは、プロパティ/値の構文の代わりに任意の文字列を使用することはできません。

ほとんどのミックスインでは、@contentディレクティブはスタイリング情報を渡すための最善の策です。

@mixin iphone_rules {
    @media screen and (max-height: 460px){
        @content;
    }
}

.mySelector {
    @include iphone_rules {
        margin-left:10px;
        padding:0px;
    }
}

それ以外の場合は、スタイリング情報をマッピング（またはSass 3.2以前のリストのリスト）として渡すことができます。

@mixin iphone_rules($styles: ()) {
    @media screen and (max-height: 460px){
        @each $p, $v in $styles {
            #{$p}: $v;
        }
    }
}

.mySelector {
    margin-left:10px;
    padding:0px;

    @include iphone_rules(('margin-left': 20px, 'padding': 2px));
}