Question

我正在尝试将元素的高度定义为@media函数中调用的屏幕宽度的函数。我希望此函数具有乘数，以便每个元素可以在屏幕上具有相对于其宽度的自定义高度，跨越所有可能的断点。这是我第一次尝试自定义功能。

我知道我错过了设计中的一些重要元素。虽然我熟悉SASS的概念，但我缺乏执行能力，因此我不知道缺少什么/错误。

我的断点：

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

我的样板断点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.";
   }
  }

这些内容来自网络教程。我很快就意识到，如果我在每个类中写出并编辑6次响应mixin，我会有非常难看的sass代码。

我希望能够使用单个@include同时处理所有断点，以便我可以快速将响应式网站放在一起。在我明白了之后，我可以单独调整个别元素。

我在第一段中提到的目标是创建一个高度（$ multiplier）mixin，其中输入数$乘数乘以计算中调用的任何特定$断点的整数。

我是否需要再次拨打地图？或者称混合'响应'是否足够？

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

将一段断点映射拉入包含修饰符

0 个答案: