Css

首页 / 知识 / Css

带变量的参数值

.text-cardNo {
  font-size: 24rpx;
  font-weight: 400;
  color: var(--user-avatar-info-card-no-color, #ffffff);

}

如上所示，color使用了变量，var(变量名，默认值)，其中变量名必须是两个横杠开头；默认值是当没有给变量赋值时的取值

给变量赋值

<view class="header">
    <view class="text-cardNo"></view>
</view>
.header {
  padding-left: 50rpx;
  position: relative;
  padding-top: 38rpx;
  --user-avatar-info-card-no-color: #F65FAF;
}

如上所示结构，当在header中给变量指定值后，下级的text-cardNo的color，将使用该值

使用注意事项

  1. 变量名必须是两个横杠开头
  2. 变量名不能包含$，[，^，(，%等字符，普通字符局限在只要是“数字[0-9]”“字母[a-zA-Z]”“下划线_”和“短横线-”这些组合，但是可以是中文，日文或者韩文。
  3. 变量名是大小写敏感的
  4. 变量值当直接用于css时，跟css类似，没有字符串一说，上面的不能写成--user-avatar-info-card-no-color: '#F65FAF'

更多示例

拼接字符串

// 字符串
--bar: 'hello';   
--foo: var(--bar)' world';

使用数字变量

// 变量值是数值
foo { 
  --gap: 20; 
  margin-top: var(--gap)px;  /* 无效 */  
}

// 上面代码中，数值与单位直接写在一起，这是无效的。必须使用calc() 函数，将它们连接，
foo { 
  --gap: 20; 
  margin-top: calc(var(--gap) * 1px); 
}