0

I'm trying to create a mixin that will take a rule (e.g. margin) and return media queries. This is what I've tried so far:

$screen_smx: 767px;
$screen_sm:  768px;
$screen_md:  960px;
$screen_lg:  1200px;

$header_height_xs: 50px;
$header_height_sm: 80px;
$header_height_md: 60px;
$header_height_lg: 60px;

@mixin header_height($rule) {

    @media (max-width: $screen_smx) {
        $rule: $header_height_xs;
    }
    @media (min-width: $screen_sm) {
        $rule: $header_height_sm;
    }
    @media (min-width: $screen_md) {
        $rule: $header_height_md;
    }
    @media (min-width: $screen_lg) {
        $rule: $header_height_lg;
    }
}

So I can do something like the following:

#header {
    position:fixed;
    @include header_height(height);

}
body > .container {

    @include header_height(padding-top);
}

The above code doesn't throw any errors it just doesn't create any code. Is there something I'm missing out or is what I'm trying to do just not achievable?

Thanks.

Rwd
  • 34,180
  • 6
  • 64
  • 78

1 Answers1

1

It turns out that to use a mixin param as a css rule the variable has to be wrapped in #{}

e.g.

@mixin header_height($rule) {

    @media (max-width: $screen_smx) {
        #{$rule}: $header_height_xs;
    }
    @media (min-width: $screen_sm) {
        #{$rule}: $header_height_sm;
    }
    @media (min-width: $screen_md) {
        #{$rule}: $header_height_md;
    }
    @media (min-width: $screen_lg) {
        #{$rule}: $header_height_lg;
    }
}
Rwd
  • 34,180
  • 6
  • 64
  • 78
  • 1
    Btw, in this case it might be a good idea to use @content to pull through all your rules. You call it like a class-ish function `@include header_height(){}`, but everything between { and } can be printed using the `@content` variable. You could make your function more universal by passing it more stuff and looping through it... More info here: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#mixin-content – somethinghere Sep 24 '14 at 16:39