メディアクエリ内でCSSコードの重複を防ぐにはどうすればよいですか？

Question

私は自分のグリッドシステムを開発しようとしています。これは私の最初の試みなので、何かが足りないかもしれません。私のCSSはここにあります：

.column-1 { 
    width: 6.86666666667%; 
} 

.column-2 { 
    width: 15.3333333333%; 
} 

// More such columns 

@media only screen and (max-width: 768px) { 
    .column-s-1 { 
    width: 6.86666666667%; 
    } 
    .column-s-2 { 
    width: 15.3333333333%; 
    } 
} 

値が重複していますが、クラス名は異なります。この重複を避ける方法はありますか？追加のクラスごとにますます複雑になるためです。

Answer 1

あなたはセレクタをグループ化することにより、重複の一部を回避することができます

.column-1, 
.column-s-1 { 
    width: 6.86666666667%; 
} 

.column-2, 
.column-s-2 { 
    width: 15.3333333333%; 
} 

// More such columns 
@media only screen and (max-width: 768px) { 
    .column-s-1 { 
    /* only properties characteristic for this width*/ 
    } 
} 

別のオプションを使用すると、CSSプリプロセッサを使用するために喜んでいる場合は、それがグリッドaを実装するようになりますLESSまたはSASS