1

私は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"]

4

1 に答える 1

2

@extendcss セレクターをカンマ区切りのリストにグループ化します。の後に追加のルールを追加する@extendと、それらのルールは独自のセレクターとして保持されます。

scss

.sidebar_styles {
    background: red;
    border: 1px solid blue;
}

aside[role="complementary"] {
    @extend .sidebar_styles;
    color: black;
}

css出力

.sidebar_styles, aside[role="complementary"] {
    background: red;
    border: 1px solid blue;
}

aside[role="complementary"] {
    color: black;
}

ルールを分けておきたい場合は、ミックスインを使用してルールに含めることができます。

scss

@mixin test {
    background: red;
    border: 1px solid blue;
}

.sidebar_styles {
    @include test;
}

aside[role="complementary"] {
    @include test;
}

css出力

.sidebar_styles {
    background: red;
    border: 1px solid blue;
}

aside[role="complementary"] {
    background: red;
    border: 1px solid blue;
}
于 2013-02-19T06:46:19.047 に答える