为啥@custom-media 没有在 sass 中应用各自的样式

Posted 2023-03-06

【中文标题】为啥@custom-media 没有在 sass 中应用各自的样式

【英文标题】：Why @ custom-media does not apply the respective styles in sass为什么@custom-media 没有在 sass 中应用各自的样式

【发布时间】：2018-08-25 00:46:30

【问题描述】：

我正在尝试使用 CSS 网格和新规范 CSS level 4 的响应部分进行基本布局，但是在编译 sass 的内容时它对我不起作用，我有什么失败吗？我错过了任何细节吗？

custom-media.scss

* margin: 0 ; padding: 0

@custom-media --phone  ( 320px < width < 480px); 
@custom-media --tablets (481px < width  < 767px);
@custom-media --ipad-landscape  (768px < width < 1024px) and (orientation: landscape);
@custom-media --ipad-normal  (768px < width < 1024px);
@custom-media --desktop  (1025px < width  < 1280px);
@custom-media --large  (width > 1281px);

app.scss

@import 'custom-media';

/**
 *
 * Login Page
 *
 */
 .container
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-columns: 60% 1fr;
    grid-row: 1fr;

    .presentation
        background:#CB3BBF;
    

    .loginsection

    

    @media  (--desktop) 
        .container 
            grid-template-columns: 1fr; 
        

        .presentation
            background:blue;
        
    

我尝试将蓝色背景颜色设置为 1025 像素到 1280 像素之间的宽度，但它在 Chrome 版本 64.0.3282.186 中不起作用

【问题讨论】：

你安装github.com/postcss/postcss-custom-media了吗？

【参考方案1】：

你可以使用

@mixin responsive($size)  @if $size == large  /* 1920px / @media (max-width: 120em)  @content;   @if $size == small  / 1199px */ @media (max-width: 74.938em)  @content;    @include responsive(large) font-size: 42px;  @include responsive(small) font-size: 22px; 

这会起作用。

【参考方案2】：

截至目前（2021 年 12 月），似乎在规范中，@custom-media 尚未在任何地方实现。 caniuse 和 MDN 都不知道 @custom-media。