レスポンシブ用にfont-size, margin, paddingなど、プロパティの値を一元管理できるSassの超軽量ライブラリ -SSCSS

デスクトップ・タブレット・スマホなどの異なるスクリーンサイズに応じて設定したブレークポイントをベースに、font-size, margin, padding, positionなど各プロパティの値を一元管理できるSassの超軽量ライブラリを紹介します。

SSCSS -GitHub

• SSCSSの特徴
• SSCSSのインストール
• SSCSSの使い方

SSCSSの特徴

SSCSSでは、ブレークポイントを独自にpx単位で定義できます。

あとは、そのブレークポイントに応じてfont-size, margin, padding, positionを定義するだけです。

• @extendを使用すると、コンポーネントの外部で生成されたスタイルを回避できます。
• .classを使用すると、グローバルの小さなユーティリティクラスを生成できます。
• 線形補間または標準的なブレークポイントで動作します。

オプション: グローバル定義の例。
デフォルトはすべて、falseです。

SSCSSのインストール

npmでインストールできます。

インポートを使用して独自の_core.scssファイルを作成します。

ファイルはSassの継承（@extend）を使用するすべてのコンポーネントにインポートする必要があります。

SSCSSの使い方

font-size

名前は$ sscss-font-size変数に基づいて生成されます。

Extensions	Class
@extend %u-font-size--{name}	.u-font-size--{name}

margin

名前は$ sscss-dimension変数に基づいて生成されます。

Extensions	Class
@extend %u-margin--{name}	.u-margin--{name}
@extend %u-margin--top-{name}	.u-margin--top-{name}
@extend %u-margin--right-{name}	.u-margin--right-{name}
@extend %u-margin--bottom-{name}	.u-margin--bottom-{name}
@extend %u-margin--left-{name}	.u-margin--left-{name}

padding

名前は$ sscss-dimension変数に基づいて生成されます。

Extensions	Class
@extend %u-padding--{name}	.u-padding--{name}
@extend %u-padding--top-{name}	.u-padding--top-{name}
@extend %u-padding--right-{name}	.u-padding--right-{name}
@extend %u-padding--bottom-{name}	.u-padding--bottom-{name}
@extend %u-padding--left-{name}	.u-padding--left-{name}

position

名前は$ sscss-dimension変数に基づいて生成されます。

Extensions	Class
@extend %u-position--{name}	.u-position--{name}
@extend %u-position--top-{name}	.u-position--top-{name}
@extend %u-position--right-{name}	.u-position--right-{name}
@extend %u-position--bottom-{name}	.u-position--bottom-{name}
@extend %u-position--left-{name}	.u-position--left-{name}