scss之自适应媒体查询:

//feature.scss
div {
    text-align: right;
    margin: 0 0 10px 0;

    @include bp-small {
        padding-left: 20px;
        padding-right: 20px;
    }

    @include bp-medium {
        padding-left: 50px;
        padding-right: 50px;
    }

    @include bp-large {
        padding-left: 50px;
        padding-right: 50px;
    }
}

//common.scss:
@mixin bp-small {
  @media only screen and (max-width: 40em) {
    @content;
  }
}

@mixin bp-medium {
  @media only screen and (min-width: 40.063em) {
    @content;
  }
}

@mixin bp-large {
  @media only screen and (min-width: 60em) {
    @content;
  }
}

//上面两个scss文件在同级目录下

代码分析:

这段样式和 SCSS 代码使用了响应式设计的思想，根据不同屏幕宽度应用不同的样式。这里使用了 mixin 来定义媒体查询，然后在 div 元素的样式中调用这些 mixin。下面是对代码的分析：

div { ... }: 这是一个选择器，应用于所有 div 元素。

text-align: right;: 设置文本在 div 中右对齐。

margin: 0 0 10px 0;: 设置 div 的上、右、下、左边距为0、0、10px、0。

嵌套了三个媒体查询 mixin，分别是 bp-small、bp-medium、bp-large。

@include bp-small { ... }: 当屏幕宽度小于等于40em时，应用以下样式。

padding-left: 20px;: 在小屏幕上设置左内边距为20px。
padding-right: 20px;: 在小屏幕上设置右内边距为20px。
@include bp-medium { ... }: 当屏幕宽度大于40.063em时，应用以下样式。

padding-left: 50px;: 在中等屏幕上设置左内边距为50px。
padding-right: 50px;: 在中等屏幕上设置右内边距为50px。
@include bp-large { ... }: 当屏幕宽度大于60em时，应用以下样式。

padding-left: 50px;: 在大屏幕上设置左内边距为50px。
padding-right: 50px;: 在大屏幕上设置右内边距为50px。
这样的设计使得在不同屏幕尺寸上都能有合适的内边距，提升页面在不同设备上的可读性和用户体验。 mixin 中定义的媒体查询允许在多个地方重用相同的屏幕宽度条件，提高了代码的可维护性。