Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
5
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

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

ありと便利かもしれない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
5
Help us understand the problem. What are the problem?