0

I'm trying to define the heights of elements as a function of the size of the screen width being called in the @media function. I want this function to have a multiplier, so that each element can have a custom height relative to it's width on the screen, across all possible breakpoints. This is my first attempt at a custom function.

I know I'm missing some important elements in the design. Though I am familiar with the concepts of SASS I am lacking executive prowess, therefore I don't know what's missing/wrong.

My breakpoints:

$breakpoints:(
  'micro' : (min-width: 320px),
  'mobile' : (min-width:600px),
  'small' : (min-width: 767px ),
  'medium' : (min-width: 992px ),
  'large' : (min-width: 1200px )
);

My boilerplate breakpoint mixin:

@mixin respond-to($name){
  //If the key exists in the map
  @if map-has-key($breakpoints, $name){
    // Prints a media query based on the value
    @media #{inspect(map-get($breakpoints, $name))}{

@content;
    }
   }

  // If the key doesn't exist in the map
  @else{ 
    @warn "Unfortunately, no value could be retrieved from '#(breakpoint}`."
      + "Please make sure it is defined in `$breakpoints` map.";
   }
  }

Those things were pulled from a web tutorial. I quickly realized that I would have very ugly sass code if I write out and edit the respond-to mixin 6 times in every single one of the classes.

I want to be able to handle all of my breakpoints simultaneously, with a single @include so that I can throw together a responsive website quickly. I can tweak individual elements seperately after I've got my idea out.

My objective as mentioned in the first paragraph is to create a height($multiplier) mixin where an input number $multiplier is multiplied by the interger in whatever particular $breakpoint is being called in the calculation.

Do I need to call the map again? Or is calling the mixin 'respond-to' sufficient?

//HERO HEIGHT
//remember to check that the length of the str slice matches the length
//of the value in $breakpoint map.

@mixin height($multiplier){
    @include respond-to('micro'){
     height: str-slice($name,12,15)*$multipler; 
     }
    @include respond-to('mobile'){
      height: str-slice($name,12,15)*$multiplier ;
      }
    @include respond-to('small'){ 
       height: str-slice($name,12,15)*$multiplier ;
      }
    @include respond-to('medium'){
     height: str-slice($name,12,15)*$multiplier ;
     } 
    @include respond-to('large'){
      height: str-slice($name,12,16)*$multiplier;
    }
}

.mainhero{
//@include span(full);
@include height(1.25);
background: {
    image: url("images/executive communication.jpg");
    repeat: no-repeat;
    attachment: fixed;
    size: cover;
    position: center;
    }
}
Andrew
  • 737
  • 2
  • 8
  • 24
  • I don't see what the problem here is? – cimmanon Oct 07 '15 at 00:16
  • i get the error message that sass cant find $name. i suspect that i may not be properly loading the $breakpoints map into the height mixin. I read the docs and I had understood that adding a mixin with a map into another mixin was sufficient. It appears not to be the case. – Andrew Oct 07 '15 at 13:21
  • I know how to set a global variable. that's obvious that it has already been done here inside of the sass code of this question (see $breakpoints). the question is how to reference the variables of mixin B inside of mixin A through which it has been called. – Andrew Oct 07 '15 at 13:43
  • But you didn't set a global variable. Mixins don't have access to variables that only exist within the scope of another mixin. – cimmanon Oct 07 '15 at 13:45
  • In this case the first mixin is being used by the second. respond-to is part of the breakpoint mixin and it's also being used inside of the second mixin. Nesting mixins works, right? the variable, in this case, $name, is actually part of the $breakpoints map. so technically it is global. What I want to do with the the second mixin is to include user input (a height multiplier) to determine the heights of each element according to my breakpoints map. – Andrew Oct 07 '15 at 13:50
  • so that i can say the height of element will be 1.5x the width at each breakpoint, and just set it once. – Andrew Oct 07 '15 at 13:51
  • the question obviously is not how to set a global variable. that's been set with $breakpoints. now is $name the right element of the map to be calling? i want to pull the value of the proper min-width: inside of the $breakpoints map.. which is already an established set of global variables. – Andrew Oct 07 '15 at 13:54
  • Alternate duplicate: http://stackoverflow.com/questions/14054003/passing-a-variable-from-inside-a-mixin-declaration-into-the-attached-content-blo – cimmanon Oct 07 '15 at 14:19
  • 1
    @AndÚ If you try the answer provided in the duplicate and that doesn't solve your issue, please [edit] your question and share what didn't work with that answer or what is different in relation to the duplicate and your setup. – rene Oct 07 '15 at 14:25

0 Answers0