catpow-scss

catpow-scssは色やサイズの設定設定値を複数のscssファイルで共有するためのmixin集です。 2〜3文字の短い名前のmixinで、複数のプロパティを同じく2〜3文字の短い名前で指定して設定します。

Install

git submodule add https://github.com/synchrovision/catpow-scss.git scss/catpow

INDEX

Main Mixin

	プロパティ	概要	Document	GitHub
anm	animation	アニメーション関連のプロパティを設定します。
bdr	border border-radius	ボーダー関連のプロパティを設定します。
bg	background background-image background-position background-size	背景色・背景画像関連のプロパティを設定します。
bnd	display position width height margin padding overflow object-fit object-position	レイアウト関連のプロパティを設定します。
bp	@media	画面幅によるメディアクエリを設定します。
clp	clip-path	クリッピングパスを設定します。傾斜や矢印などの簡易な形状のクリッピングパスを簡単に作成できます。
cnt	counter-reset counter-increment content	カウンター関連のプロパティを設定します。
col	column column-rule column-gap	カラム関連のプロパティを設定します。
ctn	@container	コンテナクエリを設定します。
flx	flex justify-content align-content justify-items align-items	フレックスレイアウト関連のプロパティを設定します。
grd	grid	グリッドレイアウト関連のプロパティを設定します。
msk	mask-image mask-border	マスク関連のプロパティを設定します。
shd	box-shadow text-shadow	ドロップシャドウ関連のプロパティを設定します。
svg	fill stroke text-anchor dominant-baseline	SVG関連のプロパティを設定します。
tbl	table-layout border-collapse border-spacing	テーブル関連のプロパティを設定します。
trn	transition transform mix-blend-mode filter animation perspective	トランジション、変形、透明などのプロパティを設定します。
txt	text-align font-size line-height font-family color vertical-align	テキスト関連のプロパティを設定します。
plh	::placeholder	プレースホルダーのテキストのプロパティを設定します。
usr	cursor pointer-event user-select	カーソル、ユーザー操作・選択の受付などに関するプロパティを設定します。

mixin

	概要	Document	GitHub
default_break	ブラウザのデフォルトの余白や境界線の設定、モバイルブラウザの文字サイズ調整などをなくし、ブラウザによる表示の差異を抑制します。
hide_scrollbar	スクロールバーを非表示にします。
define_color_vars	get_color_vars関数が定義されている場合に、引数の色の値のマップまたはグローバル変数$colorsを元にそれらのCSS変数を:rootに定義するコードを出力します。catpow-ssg環境下では各色をhslaに分解したCSS変数が定義されます。
define_color_classes	get_color_classes関数が定義されている場合に、引数の色の値のマップまたはグローバル変数$colorsを元に色の設定を行うクラスを定義するコードを出力します。catpow-ssg環境下ではdefine_color_varsによって各CSS変数が定義されていることを前提に、12段階で色相を分割した各色のクラスを定義します。
clear_float	回り込み解除のスタイルを適用します。
clear_fix	フロートレイアウトのコンテナのafter擬似要素に回り込み解除のスタイルを適用します。
pull_left	左回り込みのスタイルを適用します。
pull_right	右回り込みのスタイルを適用します。
flex_equalize	子要素の数によってflex-basisを調整し、行ごとの要素数の差が１以上にならないようにします。
gradient	グラデーションを作成します。
linear-gradient	線型グラデーションを作成します。
radial-gradient	円形グラデーションを作成します。
shade	陰によって立体感を表現するグラデーションを作成します。
glass	ガラスのような光沢を表現するグラデーションを作成します。
mist	うっすらとかかるもやを表現するグラデーションを作成します。
stripe	縞模様を表現するグラデーションを作成します。
round_table	表の４隅を角丸にします。
text-decoration	下線や打ち消し線などのテキスト装飾を短縮表現の値のリストで設定します。
text-emphasis	テキストの圏点を短縮表現の値のリストで設定します。
wp_admin_color	wordpressのwp-admin/css/colors/_variables.scssで定義されるSCSS変数を一括で定義します。

function

	概要	Document	GitHub
is_quoted	変数がクオート付の文字列であるかを判定します。正確にはget_real_typeの関数が存在する場合に、get_real_typeから得られる値の型がstringであるかを判定します。scssphpではクオートで括られていない文字列の型はstringではなくkeywordです。get_real_typeが定義されていない環境下では単にstring型であるかどうかの判定をします。
tint	色の濃さを変更してrgb形式で返します。
ease	animation-timing-functionやtransition-timing-functionで用いるイージングのキーワードやeasing-funcitonを返します。
replace_values	第一引数の値、もしくはリスト内の値を、第二引数のマップに基づいて置き換えます。
fill_4_values	値が４つ未満のリストをmarginやpaddingの値の補完と同様のルールで４つの値をもつリストに補完します。
img	background-imageなどで用いる画像URLの値を返します。グローバル変数$imagesが定義されていればそこから画像のURLの値を取得します。
sel	グローバル変数$selectorsを用いてセレクタの値を置き換えます。
clr	colorやbackground-colorなどで用いる色の値を返します。translate_color関数が定義されていればその関数から、グローバル変数$colorsが定義されていればそれから色の値を取得します。
sz	widthやheightなどで用いるサイズの値を返します。translate_size関数が定義されていればその関数から、グローバル変数$sizesが定義されていればそれからサイズの値を取得します。
szs	marginやpaddingなどで用いるサイズの値のリストを返します。translate_size関数が定義されていればその関数から、グローバル変数$sizesが定義されていればそれからサイズの値のリストを取得します。
wt	font-weightで用いる文字の太さを表す値を名を返します。 translate_weight関数が定義されていればその関数から、グローバル変数$weightsが定義されていればそれから文字の太さの値を取得します。
fnt	font-familyで用いるフォント名を返します。translate_font関数が定義されていればその関数から、グローバル変数$fontsが定義されていればそれからフォント名を取得します。
slice	リストから範囲を指定して部分を取り出し新たなリストを取得します。