メディアクエリーについての質問です。

Question

下記のように画面幅によって、特定の要素が出現するように、記述しているのですが、もう少し簡素化できる方法があれば教えて下さい。よろしくお願いします。

<div class="red"> <a> あ </a> </div>
<div class="blue"> <a> い </a> </div>

@media screen and (min-width:400px){
.red: a{
   color: red;}
.blue a{
   display: none;}
}}

@media screen and (max-width:400px){
.red: a{
   display: none;}
}
.blue a{
   color: blue;
}}

Comments

[Lhankor_Mhy]

ないんじゃないかな、と思います。

それとは別に文法エラーをたくさん含んでいるので、それは直した方がいいかと思います。

[miyabi_takatsuk]

もしかして、Sassの文法での簡略化という意味でしょうか。