将css属性：value传递给mixins参数 [英] Passing css property:value into a mixins argument

问题描述

像sass / scss中的下列dummyexample可能吗？
我需要这样的东西，以防止不同媒体查询重复为不同的设备。

Is something like the following dummyexample possible in sass/scss? I need something like this to prevent the endless mediaquery repeats for different devices.

// 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;');
}

推荐答案

Sass不允许使用

对于大多数mixin， @content 指令是你的最佳投注方式是传递样式信息：

For most mixins, the @content directive is your best bet for passing in styling information:

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

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

否则，样式信息可以作为映射（或Sass 3.2及更旧版本的列表列表）：

Otherwise, styling information can be passed in as a mapping (or list of lists for Sass 3.2 and older):

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

这篇关于将css属性：value传递给mixins参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！