在 Sass 中使用要使用 Mixin 或占位符的断点答案

【问题标题】：Using a Breakpoint which one is to be used Mixin or Placeholder in Sass在 Sass 中使用要使用 Mixin 或占位符的断点
【发布时间】：2019-08-07 15:01:46
【问题描述】：

我正在使用 Mixin 作为这样的断点

$breakpoints: ( 'tiny': ( max-width: 480px ), 'small': ( max-width: 767px ), 'medium': ( max-width: 992px ), 'large': ( max-width: 1199px ) ); // Creating the mixin

在 SCSS 中，我正在调用类似

  @include breakpoint(small) {

        }

我的意思是我在很多地方都调用了这个 mixin，所以 css 的大小会增加。

这是在SASS中使用断点的最佳方式enter code here

【问题讨论】：

“我的意思是……css的大小增加了。”所以？您是否证明这是一个合法的问题？

标签： css sass placeholder mixins

【解决方案1】：

检查这个断点混合。

@mixin respond-to($breakpoint) {
  @if $breakpoint == "mobile-small" {
    @media (min-width: 320px) {
      @content;
    }
  }

  @else if $breakpoint == "mobile-big" {
    @media (min-width: 640px) {
      @content;
    }
  }

  @else if $breakpoint == "small" {
    @media (min-width: 768px) {
      @content;
    }
  }

  @else if $breakpoint == "medium" {
    @media (min-width: 1025px) {
      @content;
    }
  }

  @else if $breakpoint == "large" {
    @media (min-width: 1200px) {
      @content;
    }
  }

  @else if $breakpoint == "ex-large" {
    @media (min-width: 1920px) {
      @content;
    }
  }
}

然后像这样调用 mixin。例如

.wrapper {
    width: 100%;
    padding: 0 15px;
    @include respond-to(small) {
      width: 750px;
      margin: 0 auto;
    }
    @include respond-to(medium) {
      width: 980px;
      padding: 0 15px;
    }
    @include respond-to(large) {
      width: 1140px;
    }
    @include respond-to(ex-large) {
      width: 1600px;
    }
}

【讨论】：

【解决方案2】：

希望这会有所帮助。这始终应该是移动优先的，并且可以轻松管理任何和所有断点。

$breakpoints: (
    "watch":        0,
    "phone-small":      320px,
    "phone-mid":        480px,
    "phone":            560px,
    "tablet-small":     640px,
    "tablet-mid":       768px,
    "tablet":           1024px,
    "desktop":          1248px,
    "desktop-large":    1440px,
    "desktop-xlarge":   2060px
);

@mixin screen-size($width, $type: min) {
    @if map_has_key($breakpoints, $width) {
        $width: map_get($breakpoints, $width);
        @if $type == max {
            $width: $width - 1px;
        }
        @media only screen and (#{$type}-width: $width) {
            @content;
        }
    }
}

希望你喜欢它。

用法如下所示

@include screen-size('tablet-small') {
    /* your css */
}

【讨论】：