如何在Angular项目的SCSS中使用@property定义的CSS变量

Angular 中 SCSS 里使用@property注册的自定义属性不生效，通常由两个问题导致：

• Angular 默认启用视图样式封装（ViewEncapsulation.Emulated），会给组件内所有样式选择器加上组件专属的哈希属性前缀，但@property是浏览器全局级别的CSS规则，不支持绑定到带作用域的选择器下，加了前缀后浏览器无法识别注册逻辑，--rotate就会变成无类型的普通自定义属性，无法支持角度动画。
• 部分版本SCSS编译器会对嵌套层级内的at-rule做错误处理，把@property、@keyframes这类全局规则挂到父选择器下，最终编译出的CSS不符合语法要求。

方案1：全局注册@property规则（兼容性最好，推荐优先使用） #

• 把@property --rotate注册代码、配套的spin动画代码，全部移到项目全局样式文件（angular.json配置中styles数组引入的全局SCSS文件，默认为src/styles.scss），不要写在组件独立SCSS文件中。
  全局样式中写入以下代码：

@property --rotate {
  syntax: "<angle>";
  initial-value: 132deg;
  inherits: false;
}

@keyframes spin {
  0% {
    --rotate: 0deg;
  }
  100% {
    --rotate: 360deg;
  }
}

注意：动画规则必须和@property注册规则保持同一作用域，否则组件样式哈希会导致动画名匹配失败

• 在对应组件的SCSS文件中直接编写卡片样式，无需重复注册属性：

.card {
  // 必须设置相对定位，否则伪元素会相对于根节点定位
  position: relative;
  border-radius: 8px;
  background: #191c29;
  // 其余卡片业务样式按需编写
}

.card::before {
  content: "";
  width: 104%;
  height: 102%;
  border-radius: 8px;
  background-image: linear-gradient(
    var(--rotate),
    #5ddcff,
    #3c67e3 43%,
    #4e00c2
  );
  position: absolute;
  z-index: -1;
  top: -1%;
  left: -2%;
  animation: spin 2.5s linear infinite;
}

方案2：关闭组件视图封装（适合不想污染全局样式的场景） #

如果不希望把自定义属性规则放到全局，可以通过修改组件封装策略+SCSS特殊指令绕过编译问题：

• 修改对应组件的TS文件，关闭视图封装：

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-your-card-component',
  templateUrl: './card.component.html',
  styleUrls: ['./card.component.scss'],
  // 关闭当前组件的样式作用域隔离
  encapsulation: ViewEncapsulation.None
})

• 在组件SCSS文件中，用@at-root指令把全局规则提升到最外层，避免SCSS嵌套时给规则加多余选择器前缀：

@at-root {
  @property --rotate {
    syntax: "<angle>";
    initial-value: 132deg;
    inherits: false;
  }

  @keyframes spin {
    0% {
      --rotate: 0deg;
    }
    100% {
      --rotate: 360deg;
    }
  }
}

// 后续卡片样式写法和方案1一致
.card {
  position: relative;
  /* 其余卡片样式 */
}
.card::before {
  /* 伪元素样式和方案1一致 */
}

• 确认卡片根节点.card设置了position: relative，否则绝对定位的伪元素会脱离卡片层级，出现效果错位、不显示的问题
• 确认目标浏览器支持@property规则：Chrome/Edge 85+、Firefox 128+、Safari 16.4+原生支持该特性，低版本浏览器会降级显示固定角度的渐变，无法实现旋转动画效果
• 不要给--rotate加SCSS变量的$前缀，它是原生CSS自定义属性，调用时必须写为var(--rotate)
• 如果构建时开启了CSS压缩，确认压缩工具没有误删@property规则，可以临时关闭压缩验证是否为工具配置问题

内容的提问来源于stack exchange，提问作者solimanware