SASS - динамическая генерация цвета из карты внутри медиазапроса - PullRequest
Новая
       7

SASS - динамическая генерация цвета из карты внутри медиазапроса

0 голосов
/ 17 мая 2018

Я использую @ include-media для sass точек останова (https://include -media.com / ). Я хочу сгенерировать вспомогательный текст динамической точки останова, который меняет bg / color на разных размерах носителя.

Примечание

Точка останова mixin - https://raw.githubusercontent.com/eduardoboucas/include-media/master/dist/_include-media.scss Я хочу простое решение. Результат должен динамически создавать цвета из карты или списков.

SCSS 

//  BREAKPOINT (Mobile first)
    $breakpoints: (        
        'sm':   540px,
        'md':   768px,
        'lg':   1025px,
        'xl':   1360px
    )!default;

    $breakpoint-colors: ( 
        red, green, yellow, blue
    )

//  Container (Mobile first)
    $container: (        
        'sm':   520px,
        'md':   740px,
        'lg':   1024px,
        'xl':   1320px,
    )!default;

//  generate
    @each $name, $value in $breakpoints{
        @include media('>=#{$name}') {
            &:after {
                content: "#{$name} >= #{$value}";
            }
        }
    }
}

Ожидаемый результат 

@media (min-width: 540px) {
    body:after {
        content: "Media: sm >= 540px | Container: 520px;";
        background-color: red;
    }
}

@media (min-width: 1024px) {
    body:after {
        content: "Media: sm >= 768px | Container: 740px;";
        background-color: green;
    }
}

@media (min-width: 1200px) {
    body:after {
        content: "Media: sm >= 1025px | Container: 1024px;";
        background-color: yellow;
    }
}

@media (min-width: 1600px) {
    body:after {
        content: "Media: sm >= 1360px | Container: 1320px;";
        background-color: blue;
    }
}

1 Ответ

0 голосов
/ 18 мая 2018

Проблема, с которой вы сталкиваетесь - это проблема, связанная с областью действия.Вы определяете переменную breakpoints внутри тега body, поэтому вы не можете правильно переписать определение breakpoints по умолчанию из используемых вами sass миксинов.

Я также преобразовал ваш$breakpoint-colors на карту, так что вы можете легко сопоставить соответствующие значения точек останова.

Попробуйте следующее, скомпилируйте точно так, как вы хотите: 

$breakpoints: (        
  'sm': 540px,
  'md': 768px,
  'lg': 1025px,
  'xl': 1360px
);

$breakpoint-colors: ( 
  'sm': red, 
  'md': green,
  'lg': yellow,
  'xl': blue
);

$containers: (        
  'sm': 520px,
  'md': 740px,
  'lg': 1024px,
  'xl': 1320px,
);

body {
  @each $name, $value in $breakpoints {
    $container: map_get($containers, $name);
    $background: map_get($breakpoint-colors, $name);
    @include media('>=#{$name}') {
      &:after {
        content: "Media: #{$name} >= #{$value} | Container: #{$container}";
        background: $background;
      }
    }
  }
}

Это скомпилируется в: 

@media (min-width: 540px) {
  body:after {
    content: "Media: sm >= 540px | Container: 520px";
    background: red;
  }
}
@media (min-width: 768px) {
  body:after {
    content: "Media: md >= 768px | Container: 740px";
    background: green;
  }
}
@media (min-width: 1025px) {
  body:after {
    content: "Media: lg >= 1025px | Container: 1024px";
    background: yellow;
  }
}
@media (min-width: 1360px) {
  body:after {
    content: "Media: xl >= 1360px | Container: 1320px";
    background: blue;
  }
}
...