qrac / musubii

Simple CSS Framework for JP
https://musubii.qranoko.jp
150 stars 6 forks source link

List:四角と米印のスタイルを追加 #266

Closed qrac closed 4 years ago

qrac commented 4 years ago

リスト装飾 list-style-typedisc circle decimal では足らない部分が出ている。オーバーライド・CSS装飾の頻度を減らすためにもバリュエーションを増やす。

また、list-style-type には <string> 形式も使えるため、.is-note の使い方も再検討する。

list-style-image は汎用的なスタイルが作れれば実装。

qrac commented 4 years ago

image

.is-square .is-kome 一旦、この2つを採用。

.is-note は合判つきの※をコピペする場合に合判がずれるとまずいので続投。list-style-image はプロジェクトの独自コンポーネントで書くほうが早そう。

qrac commented 4 years ago

$list-kome-item-list-style: "\203B"outside !default; だとPrettierがoutsideとの間を詰めてしまうため、$list-kome-item-list-style: "※" outside !default; にする。

また、日本語がCSS内に含まれた影響で @charset "UTF-8"; が追加されてしまう。

qrac commented 4 years ago

Sassのデフォルト関数などを駆使して回避する。

java - SASS is prepending unicode content with backslash () - Stack Overflow

@function unicode($str) {
  @return unquote("\"")+unquote(str-insert($str, "\\", 1))+unquote("\"");
}

$list-kome-unicode: unicode("203B") !default;
$list-kome-item-list-style: $list-kome-unicode outside !default;

または

$list-kome-unicode: unquote('"') + unquote(str-insert("203B", "\\", 1)) + unquote('"') !default;
$list-kome-item-list-style: $list-kome-unicode outside !default;

今回はここ以外でFunctionを使うことがないので、後者の通り関数を変数内に埋め込んだ。

qrac commented 4 years ago

v7.0.0から反映。