5

しばらくTwitter Bootstrap 3を使用していましたが、 Twitter Bootstrap 4が登場します。そして newには、たとえばに名前をTwitter Booststrap 変更するなど、いくつかの変更が伴います。現在のバージョンから将来のバージョンへの将来の移行の可能性のために、HTML コードを CSS クラス名の変更から独立させる方法はありますか? たとえば、クラスがある場合、独自のクラスを作成し、既存のクラスから作成する方法はありますか? (疑似コード) のようなもの:.table-condensed.table-sm.table-condensedtable-smallTwitter Bootstraptable-condensed

.table-small {
    join(".table-condensed")
}

私はこの瞬間まで純粋なだけを使用しますCSS（私はフルスタックではなく、時々フロントエンド開発者です:)）、これが何らかの方法で可能である場合、誰かが私に答えるなら、おそらくプリプロセッサまたはそのようなもので、私はとても感謝しています - よろしくお願いします！

4

2 に答える 2

3

SASSを使用している場合は、@extend関数を使用できます。

ただし、選択したクラスを新しいクラスにコピーするため、基本的に CSS のサイズが 2 倍になるため、これを行うことは避けることをお勧めします。

解決策は、必要がない限り、BS-4 にアップグレードしないことです。または、そうするときにすべての HTML を更新するには

編集

SASS docsを読むと、コンマ構文を使用して動作するように機能が変更されたようです。したがって、これが今後の最良の選択肢になります。

クラスの数を 2 倍にすることで余分な CSS を生成しますが、すべての CSS を複製するほどではありません。

于 2016-02-06T16:08:10.773 に答える
1

以下の CSS を使用して、次のことを行うことができます。

.table-small {
    &:extend(.table-condensed);
}

これは、sass のようにクラスをコピーするのではなく、セレクターを追加するだけです。

生成された css:

.table-condensed,
.table-small {
    background: red;
}

オンラインのプリプロセッサ: http://lesscss.org/less-preview/

于 2016-02-06T16:13:31.820 に答える