※ ChatGPTを利用し、要約された質問です（原文：SASSで簡潔に書く方法）
SASSで簡潔に書く方法
このQ&Aのポイント
SASSを使って複数のスタイルを一括して指定する方法について学びましょう。
セレクタの指定を@eachを使ってまとめる方法を説明します。
スタイルの適用を簡潔にするためにSASSの機能を利用しましょう。
現在このような形で一つずつ打っています。
/* news */
.column .news .tag { color:$orange !important; }
.column .news .target { background-color:lighten( $orange, 25% ); }
.column .news.hover h2 a,
.column .news:hover h2 a { background-color:$orange !important; }
/* information */
.column .service .tag { color:$accent !important; }
.column .service .target { background-color:lighten( $accent, 25% ); }
.column .service.hover h2 a,
.column .service:hover h2 a { background-color:$accent !important; }
/* child essay */
.column .essay .tag { color:$red !important; }
.column .essay .target { background-color:lighten( $red, 25% ); }
.column .essay.hover h2 a,
.column .essay:hover h2 a { background-color:$red !important; }
/* child dialy */
.column .dialy .tag { color:$water !important; }
.column .dialy .target { background-color:lighten( $water, 25% ); }
.column .dialy.hover h2 a,
.column .dialy:hover h2 a { background-color:$water !important; }
/* child book */
.column .book .tag { color:$pink !important; }
.column .book .target { background-color:lighten( $pink, 25% ); }
.column .book.hover h2 a,
.column .book:hover h2 a { background-color:$pink !important; }
/* child web */
.column .web .tag { color:$mint !important; }
.column .web .target { background-color:lighten( $mint, 25% ); }
.column .web.hover h2 a,
.column .web:hover h2 a { background-color:$mint !important; }
/* child graphic */
.column .graphic .tag { color:$viridian !important; }
.column .graphic .target { background-color:lighten( $viridian, 25% ); }
.column .graphic.hover h2 a,
.column .graphic:hover h2 a { background-color:$viridian !important; }
これを@eachを使ってまとめて指定することは可能ですか？
@each $category in .news, .service, .essay, .dialy, .book, .web, .graphic, '' {
.column {$category} ............
}
よろしくお願い致します。
お礼
遅くなりましたが、ありがとうございます。