less中使用 @supports

在Less中使用@supports
@supports 是CSS的条件规则，用于检测浏览器是否支持特定的CSS属性或值。在Less中，你可以像在普通CSS中一样使用@supports，同时还能利用Less的特性来增强它。

基本用法

/* 检测浏览器是否支持display: flex */
@supports (display: flex) {
  .container {
    display: flex;
    // 其他Flexbox相关样式
  }
}

结合Less变量

// 定义变量
@my-property: grid;

// 使用变量进行特性检测
@supports (display: @my-property) {
  .grid-container {
    display: @my-property;
    grid-template-columns: repeat(3, 1fr);
  }
}

Less嵌套中的@supports

.container {
  display: block;
  
  @supports (display: grid) {
    display: grid;
    grid-gap: 20px;
    
    .item {
      // grid-specific item styles
    }
  }
}

AND/OR/NOT逻辑

// AND条件
@supports (display: flex) and (flex-wrap: wrap) {
  .flex-container { 
    flex-wrap: wrap;
  }
}

// OR条件
@supports (transform-style: preserve-3d) or (-webkit-transform-style: preserve-3d) {
  
}

// NOT条件
@supports not (display: grid) {
  
}

Less mixin中使用@supports

.flexbox-mixin() {
  @supports (display: flex) {
    display: flex;
    
    &.column {
      flex-direction: column;
    }
    
    // mixin内容...
  }
}

.container {
  .flexbox-mixin();
}

PostCSS注意事项
如果你使用PostCSS处理你的Less/CSS，确保你的PostCSS配置中包含postcss-preset-env或类似的插件，以确保@supports规则能在旧版浏览器中得到正确处理。

记住，@supports是一个CSS特性查询，不是Less特有的功能。Less编译器会原样保留这些规则（不会预处理它们），最终的样式将由浏览器根据其支持情况来决定是否应用。

使用@supports定义IOS安全区域

/** iPhone安全区域适配 */
.safe-area-adapt (@key: padding-bottom, @extra: 0px) {
  @safepadding: var(--safe-area-inset-bottom, '34px');
  @{key}: calc(@safepadding + @extra);
}
@supports (bottom: constant(safe-area-inset-bottom)) {
  padding-bottom: calc(5px + constant(safe-area-inset-bottom));
}

这段CSS代码使用了@supports规则来检测浏览器是否支持constant(safe-area-inset-bottom)特性，这是一种处理iPhone X及更新机型上"刘海屏"和底部Home指示条安全区域的方法。

代码解释：

@supports (padding-bottom: constant(safe-area-inset-bottom))

这是一个特性查询(CSS Feature Query)，检查浏览器是否支持constant()函数和safe-area-inset-bottom变量
如果支持，则应用其中的样式
padding-bottom: calc(8px + constant(safe-area-inset-bottom));

设置元素的底部内边距为：8px + 设备提供的安全区域插入值
constant(safe-area-inset-bottom)获取设备底部的安全区域距离（在iPhone X及更新机型上，这会返回底部Home指示条的高度）
注意事项：
constant()是旧版语法，现代浏览器使用env()替代：

@supports (padding-bottom: env(safe-area-inset-bottom)) {
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
}

最佳实践是同时使用两者，因为不同浏览器版本支持不同：

padding-bottom: calc(8px + env(safe-area-inset-bottom));
padding-bottom: calc(8px + constant(safe-area-inset-bottom)); /* 兼容旧版 */

这种技术常用于固定在底部的元素（如底部导航栏），确保它们不会被设备的圆角或Home指示条遮挡。

safe-area-inset-*系列变量还包括：

safe-area-inset-top
safe-area-inset-right
safe-area-inset-left
这个解决方案特别适用于需要在所有设备上保持良好显示效果的移动端网页设计。