私はLESSの使用に慣れていますが、現在SCSSを使用しています。
Less では、次のことができます。
.sidebar_styles { background: red; border: 1px solid blue; }
aside[role="complementary"] { .sidebar_styles; }
SCSSに相当するものは次のとおりです。
.sidebar_styles { background: red; border: 1px solid blue; }
aside[role="complementary"] { @extend .sidebar_styles; }
Foundation フレームワークを使用していて、html でプレゼンテーション クラスを使用しないようにしています。Chrome の実行速度が遅いことに気付き、インスペクターを開きました。一部の要素の一致する CSS ルールは膨大です。
以下は、Chrome がハングする前に要素の 1 つからコピーできたものの約 5% です。
.row.collapse .column, body.full_width div[role="main"] form .row.collapse .column, body.two_columns div[role="main"] form .row.collapse .column, body.homepage div[role="main"] .hero_container form .row.collapse .column, .row form .collapse.top_bar .column, .top_bar form .collapse.top_bar .column, header[role="banner"] form .collapse.top_bar .column, footer[role="contentinfo"] form .collapse.top_bar .column, body.full_width div[role="main"] form .collapse.top_bar .column, body.two_columns div[role="main"]