用Scss写一个关于媒体查询的mixin

我们需要支持多端适配，采用的媒体查询的方案；但是每次写断点的时候都记不住断点的值，还得去查一下，就很麻烦。于是，用Scss写了一个关于媒体查询的mixin; 话不多说，上代码；

$map: (
  "pc_big": 1584px,
  "pc_small": (
    1056px,
  )
  (
    1583px,
  ),
  "pad": (
    672px,
  )
  (
    1055px,
  ),
  "mobile": (
    320px,
  )
  (
    671px,
  ),
);

@mixin respond-to($terminal) {
  @if ($terminal == "pc_big") {
    @media screen and (min-width: map-get($map, $terminal)) {
      @content;
    }
  } @else {
    @media screen and (min-width: nth(map-get($map, $terminal), 1)) and (max-width: nth(map-get($map, $terminal), 2)) {
      @content;
    }
  }
}

项目中使用

@use "@carbon/type";
@import "../../../../tools.scss";

.tabsContent {
  $padding: calc(50% - 752px);
  $bg-color: var(--cds-layer-01, #f4f4f4);
  $section-gap: 32px;

  .tabListFixedLine {
    width: 100%;
  }

  .tabList {
    width: 100%;
    $bg-color: var(--cds-layer-01, #f4f4f4);
    $tabListPadding: calc(50% - 768px);

    background-color: $bg-color;
    padding: 0 $tabListPadding;
  }

  .tabFixedList {
    position: fixed;
    top: 88px;
    left: 0;
    z-index: 100;
  }

  .tabFixedListHeight {
    height: 40px;
  }

  .overView {
    padding: 40px 0;
  }

  .overViewImgSlider {
    margin-bottom: $section-gap;
  }

  .functionIntroduction {
    margin-bottom: $section-gap;
    padding: 0 $padding;
  }

  .functionIntroductionTitle {
    margin-bottom: 16px;
    color: var(--cds-text-secondary, #525252);

    /* Fixed heading styles/heading-01 */
    @include type.type-style("heading-01");
  }

  .functionIntroductionContent {
    color: var(--cds-text-primary, #161616);

    /* Body styles/body-02 */
    @include type.type-style("body-02");
  }

  .otherEntries {
    display: flex;
    flex-direction: column;
    padding: 0 $padding;
    gap: 24px;
  }

  .subscriptionPlan {
    padding: 40px $padding;
  }

  :global(.cds--tab-content:focus) {
    outline: none !important;
  }

  @include respond-to("pc_small") {
    $padding: 32px;

    .functionIntroduction {
      padding: 0 $padding;
    }

    .otherEntries {
      padding: 0 $padding;
    }

    .subscriptionPlan {
      padding: 40px $padding;
    }
  }

  @include respond-to("pad") {
    $padding: 32px;

    .functionIntroduction {
      padding: 0 $padding;
    }

    .otherEntries {
      padding: 0 $padding;
    }

    .subscriptionPlan {
      padding: 40px $padding;
    }
  }

  @include respond-to("mobile") {
    $padding: 16px;

    .functionIntroduction {
      padding: 0 $padding;
    }

    .otherEntries {
      padding: 0 $padding;
    }

    .subscriptionPlan {
      padding: 40px $padding;
    }
  }
}