Question

我想在特定语言中使用font-family: 'Noto Sans TC'，因此我在.scss中编写了以下代码。

body{
  &[lang="en"]{ font-family: 'Noto Sans TC', sans-serif; }
  &[lang="zh-TW"]{ font-family: 'Noto Sans TC', sans-serif; }
  &[lang="zh-CN"]{ font-family: 'Noto Sans SC', sans-serif; }
}

然后在html中

$(document).ready(function() {
  $('body').attr('lang', translationManager.getCurrentLanguage());
});

它工作正常，但我想知道是否有更好的方法来编写.scss代码？

Answer 1

SASS是一个强大的CSS工具，可以在编程中使用。它提供了许多编程逻辑支持，如if/else, each, for loop, etc.，因此在您的情况下，最好在SASS中使用@each函数 -

$langs: 'en','zh-TW','zh-CN'; // Define the array for your languages

@each $lang in $langs{
  body{
     &[lang="#{$lang}"]{
        font-family: 'Noto Sans TC', sans-serif;
     }
  }
}

这会产生类似的结果 -

body[lang="en"] {
  font-family: 'Noto Sans TC', sans-serif;
}

body[lang="zh-TW"] {
  font-family: 'Noto Sans TC', sans-serif;
}

body[lang="zh-CN"] {
  font-family: 'Noto Sans TC', sans-serif;
}

您可以在此处查看 - http://www.sassmeister.com/，

此外，它取决于您使用的是哪种编译器工具，例如。如果您正在使用gulp并且它是gulp-sass包，那么它将最小化代码并以逗号分隔的方式编写它。

有关更多实验和高级功能，请参阅以下链接 -

http://thesassway.com/intermediate/if-for-each-while

https://www.sitepoint.com/sass-maps-vs-nested-lists/

https://css-tricks.com/the-sass-ampersand/

Sass选择器组合属性

1 个答案: