将css属性值传递给mixins参数

Question

在sass/scss中可以使用下面的dummyexample吗？ 我需要这样的东西来防止对不同设备进行无尽的mediaquery重复。

// 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

萨斯不允许到位的属性/值语法的使用任意的字符串。

对于大多数混入的@content指令是用于传递样式信息你最好的选择：（社科院3.2及以上或列表的列表）

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

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

否则，样式信息可以为映射传递中：

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