如何访问具有多个属性的 SCSS 变量

Posted 2023-03-06

【中文标题】如何访问具有多个属性的 SCSS 变量

【英文标题】：How to access a SCSS variable with multiple properties

【发布时间】：2020-12-27 01:58:09

【问题描述】：

我正在使用具有多个属性的变量的 SCSS 框架。如何访问和使用这些变量？

我可以将变量与颜色等 CSS 属性一起使用。但其他变量有多个 CSS 属性。如何在我的 SCSS 中使用它？我试过@include 和@extend 但我得到一个错误。

下面是我可以使用的普通变量：

$hover: #e5e5e5,

下面是一个我不知道怎么用的带有multipls css属性的变量。

$heading: (
font-size: 2rem,
font-weight: 400,
line-height: 1rem,
letter-spacing: 0.5px, )

谢谢！

【问题讨论】：

它为你提供了 SASS Mixin ，它就像一个函数，点击这个链接更多细节：sass-lang.com/documentation/at-rules/mixin

【参考方案1】：

这不仅仅是一个常规变量，而是一个映射。结帐：https://sass-lang.com/documentation/values/maps 了解详情。

你可以这样使用它：

font-size: map.get($heading, font-size);

【参考方案2】：

这就是Extend/Inheritance 正确的方式

%message-shared 
  font-size: 2rem;
  font-weight: 400;
  line-height: 1rem;
  letter-spacing: 0.5px;


.message 
  @extend %message-shared;