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