求助：img标签无法继承祖父元素transition属性的解决方法

CSS的transition属性属于非继承属性，默认不会自动传递给后代元素，所以你设置在祖父元素.section-about--card上的transition不会被img继承。以下是两种满足你"不重复写代码"需求的解决方案：

方案1：用CSS变量统一复用transition配置 #

把transition的参数定义成变量，在需要的元素中引用，既避免重复代码，又能保证属性一致。

修改后的SCSS代码：

& .section-about--card {
  text-align: center;
  text-transform: capitalize;
  // 定义自定义属性存储transition配置
  --transition-config: all 0.3s linear;
  transition: var(--transition-config);
  -webkit-transition: var(--transition-config);
  -moz-transition: var(--transition-config);
  -ms-transition: var(--transition-config);
  -o-transition: var(--transition-config);

  & img {
    width: 15rem;
    aspect-ratio: 1;
    border: 1px solid var(--red);
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    // 直接引用自定义属性，复用transition配置
    transition: var(--transition-config);
    -webkit-transition: var(--transition-config);
    -moz-transition: var(--transition-config);
    -ms-transition: var(--transition-config);
    -o-transition: var(--transition-config);

    &:hover {
      transform: rotateY(180deg);
      -webkit-transform: rotateY(180deg);
      -moz-transform: rotateY(180deg);
      -ms-transform: rotateY(180deg);
      -o-transform: rotateY(180deg);
    }
  }
}

如果习惯用SCSS变量，也可以这样写：

$transition-config: all 0.3s linear;

& .section-about--card {
  text-align: center;
  text-transform: capitalize;
  transition: $transition-config;
  -webkit-transition: $transition-config;
  -moz-transition: $transition-config;
  -ms-transition: $transition-config;
  -o-transition: $transition-config;

  & img {
    width: 15rem;
    aspect-ratio: 1;
    border: 1px solid var(--red);
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    transition: $transition-config;
    -webkit-transition: $transition-config;
    -moz-transition: $transition-config;
    -ms-transition: $transition-config;
    -o-transition: $transition-config;

    &:hover {
      transform: rotateY(180deg);
      -webkit-transform: rotateY(180deg);
      -moz-transform: rotateY(180deg);
      -ms-transform: rotateY(180deg);
      -o-transform: rotateY(180deg);
    }
  }
}

方案2：强制让img继承祖父元素的transition #

直接给img设置transition: inherit，显式继承祖父元素的transition属性，无需重复写完整参数：

& .section-about--card {
  text-align: center;
  text-transform: capitalize;
  transition: all 0.3s linear;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -ms-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;

  & img {
    width: 15rem;
    aspect-ratio: 1;
    border: 1px solid var(--red);
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    // 显式继承祖父的transition属性
    transition: inherit;
    -webkit-transition: inherit;
    -moz-transition: inherit;
    -ms-transition: inherit;
    -o-transition: inherit;

    &:hover {
      transform: rotateY(180deg);
      -webkit-transform: rotateY(180deg);
      -moz-transform: rotateY(180deg);
      -ms-transform: rotateY(180deg);
      -o-transform: rotateY(180deg);
    }
  }
}

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