根据CSS类中的属性值设置CSS样式属性

06odsfpq  于 2023-06-25  发布在  其他
关注(0)|答案(1)|浏览(179)

假设一个元素有一个类,比如'my-css-class'。该类定义为:

my-css-class {
  font-family: 'RobotoBold';
  text-transform: lowercase;
  ... (some other properties)
}

在SCSS中有没有一种方法可以将一个特定的属性(比如font-weight或font-style或background-color)设置为一个基于font-family的值?
例如,如果font-family设置为'RobotoBold',则将font-weight设置为粗体。类似地,如果font-family设置为'RobotoItalic',则将font-style设置为斜体。字体家族的集合很小,如果需要的话,我可以列举出来。
制约因素:有许多类,改变每个类的名称,以便我可以模式匹配CSS类名是不切实际的。改变HTML也是不切实际的,因为有很多元素。
谢谢你的好心帮助。

hrirmatl

hrirmatl1#

这个简单的jQuery代码就可以完成这项工作

if( $(".my-css-class").css('font-family').toLowerCase() == 'robotobold') {
    $(".my-css-class").css('font-weight', 'bold');
}

如果您可以将字体名称分配给一个变量,那么在SCSS中也是可能的:

$myfont: 'robotobold';

.my-css-class{
    font-family: $myfont;
    
    @if ($myfont == robotobold){
        font-weight: bold;
    }
}

相关问题