主页 / 问题 / 1105649
Accepted
MoloF
Asked:2020-04-05 06:13:34 +0000 UTC2020-04-05 06:13:34 +0000 UTC

SASS 使用函数和参数创建媒体查询

  • 772

我有以下SASS包含一些数据的文件：

@import './functions'

$media-1024: 1024
$media-1280: 1280
$media-default: 1920
$media-2560: 2560


@function calcResolution($value, $resolution, $originalResolution: $media-2560)
    $difference: $resolution / $originalResolution
    @return to-fixed($value * $difference)


@mixin media-1024 
    @media (max-width: #{$media-1024 + 1px})
        @content

@mixin media-1280
    @media (max-width: #{$media-1280 + 1px})
        @content

@mixin media-default
    @media (max-width: #{$media-default + 1px})
        @content

@mixin media-2560
    @media (max-width: #{$media-2560 + 1px})
        @content

有一个函数calcResolution()可以根据权限之间的差异返回一个值。因此，对于大多数图像，您可以编写以下代码，它将正常工作：

@include media-default // 1920
    width: calcResolution(50, $media-default) // 1920 / 2560 * 50 = ‭37.5‬
    height: calcResolution(100, $media-default) // 1920 / 2560 * 100 = 75

在视觉上它看起来像这样：

.btn
    $font-size: 18px
    font-size: $font-size

    @include media-default
        font-size: calcResolution($font-size, $media-default)

    @include media-1280
        font-size: calcResolution($font-size, $media-1280)

    @include media-1024
        font-size: calcResolution($font-size, $media-1024)

很多看起来很讨厌的重复代码：

无效的

如何在不重复代码的情况下将 mixins 合并为一个？

也许还有其他方法可以解决它？

css

1 个回答

  1. Best Answer

    例如，您可以制作一个包含大小列表并一次显示所有必要媒体的混音，而不是几个相同的混音

    @mixin media($sizes) {
  @each $size in $sizes {
    @media (max-width: #{$size + 1px}) {
      @content($size);
    }
  }
}

    同时，在传输的内容里面，可以参考变量$size

    $sizes: $media-default, $media-1280, $media-1024;

@include media($sizes) using ($size){
  font-size: calcResolution($font-size, $size);
}
    • 1

相关问题