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

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

サイトのキャプチャ

SSCSS -GitHub

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}

sponsors

top of page

©2019 coliss