如何使用 :lang() 在 scss 中设置字体变量答案

【问题标题】：How to use :lang() to set font variable in scss如何使用 :lang() 在 scss 中设置字体变量
【发布时间】：2016-08-29 10:08:17
【问题描述】：

如何使用 SCSS 使用 :lang() 选择器设置字体变量？我尝试了几种不同的方法，但最后总是输出默认语言。

我最初的想法很简单，比如方法。

$font-main:    "Open Sans",Helvetica,Arial,sans-serif;
:lang(fa)  {
    $font-main:  "IranianSansRegular", serif;
  }

body {font-family: $font-main;}

然后也尝试了这个

$font-main: "Open Sans",Helvetica,Arial,sans-serif;

body {
    font-family: $font-main;    
        &:lang(fa)  {
        $font-main:  "IranianSansRegular", serif;
        }

但无论如何，我总是以 open sans 作为我唯一的字体。我认为它不相关，但这是基于 bootstrap 3+ 的项目

【问题讨论】：

标签： sass

【解决方案1】：

你不需要变量来做到这一点，你可以使用 CSS 语法：

body {
    font-family: Arial,sans-serif; 
    color:blue;
}

:lang(fa)  {
    font-family: Georgia, serif;
    color:red;
}

<p>Normal text</p>
<p lang="fa">Text width lang attribute and "fa" value</p>

无论如何，如果你想使用变量，你可以这样做：

$font-main: "Open Sans",Helvetica,Arial,sans-serif;

body{
    font-family: $font-main;
}   

:lang(fa) {
    $font-main: "IranianSansRegular", serif;
    &{
        font-family: $font-main;
    } 
}

【讨论】：