scss 响应值SASS功能

Posted 2021-05-17

// @include u-responsive-value(margin-top, (small:18px, medium:25px, large:29px, xlarge:40px));
// dependencies: $mq
@mixin u-responsive-value($property, $values-map) {
  @if type-of($values-map) == 'map' {
    @each $mq, $value in $values-map {
      @if map-has-key($mq-breakpoints, $mq) {
        @if $mq == small {
          #{$property}:$value;
        } @else {
          @include mq($from: $mq) {
            #{$property}:$value;
          }
        }
      }
    }
  }
}