syg-flocss5

Caracol で使用している CSS フレームワーク。

【要注意】@use @forward など使っているので古い仕様の node-sass などでは動かない。 dart-sass を使う必要がある。

参考：https://qiita.com/sygnas/items/53d0ba6c5b4a9ffe710e

バージョン表記

a.b.c（例：1.2.33）

a .. 破壊的変更がある / import した config に変更が必要 b .. 機能追加 c .. 修正・調整

使用方法

インストール

$ npm install @sygnas/syg-flocss5

インポート用ファイルをコピー

インポート用ファイルのフォルダ syg-flocss5-import をコピーする。

# 例：プロジェクトのルートからsassのフォルダにコピー
$ cp -R ./node_modules/@sygnas/syg-flocss5/syg-flocss5-import ./src/sass

使用するエントリーポイントから読み込む

@layer 機能を使っているので。プロジェクト独自のスタイルは @layer project {} 内に記載する。

/src/sass/common.scss から利用する例。

@use "sass:map";
@use "sass:meta";

// フレームワークの設定
@use "./syg-flocss5-import/config" as *;
@use "./syg-flocss5-import/method";

// フレームワークの mixin を読み込み
@use '../../node_modules/@sygnas/syg-flocss5/foundation' as syg-flocss5-foundation;
@use '../../node_modules/@sygnas/syg-flocss5/layout' as syg-flocss5-layout;
@use '../../node_modules/@sygnas/syg-flocss5/object/component' as syg-flocss5-component;
@use '../../node_modules/@sygnas/syg-flocss5/object/effect' as syg-flocss5-effect;
@use '../../node_modules/@sygnas/syg-flocss5/object/utility' as syg-flocss5-utility;

// レイヤー定義
@layer reset, vendor, syg-flocss5, project, utility;

// フレームワーク適用
@layer syg-flocss5 {
  @include syg-flocss5-foundation.foundation($config);
  @include syg-flocss5-layout.layout($config);
  @include syg-flocss5-component.component($config);
  @include syg-flocss5-effect.effect($config);
}

///////////////////////////
// ユーザー作成のスタイル読み込み。下記は一例
@layer project {
  // layout/index.scss を読んでいる
  @include meta.load-css(layout);
  // object/index.scss を読んでいる
  @include meta.load-css(object);
}

// utility クラス適用
@layer utility {
  @include syg-flocss5-utility.utility($config);
}

設定を変更する

syg-flocss5-import/config/ 内のファイルを変更する。

メディアクエリー別設定の追加変更

メディアクエリーによって差異のある設定を追加する時は、syg-flocss5-import/config/core/_media-query.scss 内のキー名と一致させる必要がある。