Help us understand the problem. What is going on with this article?

css counter用のmixin【あると便利かもしれないsass用mixin】

More than 5 years have passed since last update.

ありと便利かもしれないmixinシリーズです。

今回はたまーに使いたくなる css counter篇。

css counterとは?

css counterとは、ネイティブのcssで使えるカウンタのことです(そのまんま)。

順序付きリストだったり、セクション番号をつけるのによく使います。(存在が忘れられがちなのでよく使いません)便利です。

初期値の設定や、カウンタの増加値の設定などができます。

:before:after擬似要素のcontentプロパティに入れることでcss カウンタの値を表示できます。

mixin

@mixin resetCounter($name, $int: 0) {
    counter-reset: $name $int;
    list-style-type: none;
}

@mixin addCounter($name, $before: '', $after: '', $int: 1) {
    &:before {
        counter-increment: $name $int;
        content: "#{$before}"counter($name)"#{$after}";
    }
}
@mixin addCounters($name, $split: '.', $before: '', $after: '', $int: 1) {
    &:before {
        counter-increment: $name $int;
        content: "#{$before}"counters($name, $split)"#{$after}";
    }
}

$name: カウンターの名前。カウンターの名前ごとにカウンターが管理されます。必須です。
$before: 出力される数字の前に付けたい文字列。デフォルトは空文字列。
$after: 出力される数字の後に付けたい文字列。デフォルトは空文字列。
$int:
- resetの場合は初期化後のカウンター値。デフォルトは0。(0なら表示は1から)。
- addの場合は加算されるカウンターの値。デフォルトは1。
$split: addCounters()で、カウンターの値を接続する文字列。デフォルトは'-'。(例 3-1-2)

使い方

キャプションに章番号つけるときなど。

addCounter()します。

$counterName: oreoreCounter;
.parent-section {
    @include resetCounter($counterName);
    h2 {
        @include addCounter($counterName, '第', '章');
    }
}

使い方その2

入れ子になってるリストに通し番号(1-1-1みたいな)を付けたいときなど。

addCounters()します。こちらはsがつきます。

$counterName: listCounter;
ol {
    @include resetCounter($counterName);
    li {
        @include addCounters($counterName, '-');
    }
}

表示結果はご自分でお確かめ下さいまし。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした