Sassセレクター結合属性

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ツールです。あなたの状況では、それは@eachの機能を利用するために、より良いですので、これはあなたができるthis-

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; 
} 

のようなものになりますSASS-

で、プログラミングロジックの多くは if/else, each, for loop, etc.ようにサポートし

$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; 
    } 
    } 
} 

を提供しますこれをここで確認してください - 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/