如何使用sass根据body类设置不同的媒体查询断点

Question

我正在构建一组将从多个不同站点提供服务的网页，每个模板都包含一些特定于站点的内容。

它们本质上是相同的，但差异足够大，以至于我需要每个站点的媒体查询断点有几个（数百）个像素的不同。

我希望站点能够将站点名称模板化为主体容器上的类，并为该类/站点使用正确的断点。

我尝试了使用 mixin 等多种不同的方法，但没有任何效果。

我目前在abstracts/_mixins.scss中定义了断点mixin：

@mixin breakpoint ($breakpoint) {

    @if $breakpoint ==small {
        @media screen and (min-height: $xsmall) and (min-width: $xsmall-width) {
            @content
        }
    }

    @if $breakpoint ==medium {
        @media screen and (min-height: $small) and (min-width: $small-width) {
            @content
        }
    }
...

然后我使用这些断点

@include breakpoints(small){}

如果有比设置父容器类更好的方法来做到这一点，我也对此持开放态度......出于可维护性的原因，我宁愿每个站点都没有单独的样式表。

Answer 1

我不是100%确定，但你不想带这样的信息吗

@use 'info' as i; 
// the i you can use it form the information in that partial file
// partial file should have an underscore(_info.scss)
@mixin breakpoint (i.$breakpoint) {

    @if i.$breakpoint == i.$small {
        @media screen and (min-height: i.$xsmall) and (min-width: i.$xsmall-width) {
            @content
        }
    }

    @if $breakpoint == i.$medium {
        @media screen and (min-height: i.$small) and (min-width: i.$small-width) {
            @content
        }
    }

不是 100% 但也许类似的东西可以工作