使用一个断点，在 Sass 中使用 Mixin 或 Placeholder

Question

我正在为这样的断点使用 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

中使用断点的最佳方式

Answer 1

检查这个断点mixin。

@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;
    }
}

Answer 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 */
}

使用一个断点，在 Sass 中使用 Mixin 或 Placeholder

Using a Breakpoint which one is to be used Mixin or Placeholder in Sass

css

sass

placeholder

mixins