Using Sass mixin to set global variable

Question

I'm new to sass and I'm trying to use mixins for media queries. When I used these MQ I'm want to set a varible used in another font-size mixin. Is this possible??

/* Mobile First Media Queries Mixins*/
@mixin breakpoint($point) {

  /* Custom, iPhone Retina */ 
  @if $point == xsmall {
    @media (min-width: 320px) { @content; }
  }
  /* Extra Small Devices, Phones */ 
  @else if $point == small {
    @media (min-width: 480px) { @content; }
  }
  /* Small Devices, Tablets */
  @else if $point == medium {
    @media (min-width: 768px)  { @content; }
  }
  /* Medium Devices, Desktops */
  @else if $point == large {
    @media (min-width: 992px)  { @content; }
  }
  /* Large Devices, Wide Screens */
  @else if $point == xlarge {
    @media (min-width: 1200px)  { @content; }
  }
}

Using breakpoint mixin to set global font size to use in:

@include breakpoint(small) { 
    $large: 3;
    $medium: 2.5;
    $small: 2;      
}

Mixin for font-sizes:

@mixin font-size($sizeValue: 1.6) {
  font-size: ($sizeValue * 10) + px;
  font-size: $sizeValue + rem;
}

Using in p style by @include:

p{
    @include font-size($small);
    line-height:1.5em;
    padding-right:15px;

}

However I get an error that the variable '$small' is no definded. So can I declear a variable within a sass mixin to be used outside that mixin?

Thnaks

Even with global variables, I suspect your code still will not work (it's unclear from the provided code how this is being used). see: http://stackoverflow.com/questions/9122195/using-sass-variables-with-css3-media-queries — cimmanon, Sep 15 '14 at 16:30
Ah ok thanks for the info. Thats a shame ill have to think of a better solution. Thanks again — user2541153, Sep 15 '14 at 17:43

Using Sass mixin to set global variable

0 Answers0