財団-サス

SASSは、Foundationでコードをより柔軟でカスタマイズ可能にするのに役立ちます。

互換性

Foundation用のSASSベースのバージョンをインストールするには、WindowsにRubyをインストールする必要があります。 Foundationは、Ruby SASSとlibsassでコンパイルできます。 SASSをコンパイルするには、 node-sass 3.4.2 + バージョンをお勧めします。

オートプレフィックスが必要

AutoprefixerはSASSファイルを処理します。 _gulp-autoprefixer_はプロセスをビルドするために使用されます。次のautoprefixer設定は、適切なブラウザーサポートを取得するために使用されます。

autoprefixer ({
   browsers: ['last 2 versions', 'ie >= 9', 'and_chr >= 2.3']
});

フレームワークをロードする

NPMを使用してフレームワークファイルをインストールできます。コマンドラインインターフェイス（CLI）を使用して、Sassファイルをコンパイルできます。以下は、フレームワークをロードするコマンドです-

npm install foundation-sites --save

上記のコマンドラインコードを実行した後、次の行を取得します-

Foundation sass

手動でコンパイルする

フレームワークファイルは、ビルドプロセスに応じてインポートパスとして追加できますが、パスは同じ_packages_folder/foundation-sites/scss_になります。 _ @ import_ステートメントは、_foundation-sites.scss_ファイルの上部に含まれています。指定されたコードの次の行は、* CSS出力の調整*セクションで説明されています。

@import 'foundation';
@include foundation-everything;

コンパイル済みCSSの使用

事前にコンパイルされたCSSファイルを含めることができます。 CSSファイルには2種類あります。縮小および非縮小。縮小版は実稼働に使用され、縮小版はフレームワークCSSを直接編集するために使用されます。

<link rel = "stylesheet" href = "node_modules/foundation-sites/dist/foundation-sites.css">
<link rel = "stylesheet" href = "node_modules/foundation-sites/dist/foundation-sites.min.css">

CSS出力の調整

さまざまなコンポーネントの場合、Foundation出力は多くのクラスで構成されます。フレームワークのCSS出力を制御するために使用されます。次のコード行を追加して、すべてのコンポーネントを一度に含めます。

@include foundation-everything;

以下は、上記のコードをscssファイルに書き込むときにインポートされるコンポーネントのリストです。不要なコンポーネントはコメントすることができます。 _Your_folder_name/node_modules/foundation-sites/scss/foundation.scss_ファイル内の以下のコード行を表示できます。

@import 'foundation';

@import 'grid/grid';
@import 'typography/typography';
@import 'forms/forms';
@import 'components/visibility';
@import 'components/float';
@import 'components/button';
@import 'components/button-group';
@import 'components/accordion-menu';
@import 'components/accordion';
@import 'components/badge';
@import 'components/breadcrumbs';
@import 'components/callout';
@import 'components/close-button';
@import 'components/drilldown';
...
...
...
//so on....

設定ファイル

設定ファイルは、基盤プロジェクト全体に含まれています。 _settings.scss。 Yeti LaunchまたはCLIを使用してFoundation for Sitesプロジェクトを作成している場合、src/assets/scss/に設定ファイルがあります。

npmを使用してFoundationをインストールしているため、_your_folder_name/node_modules/foundation-sites/scss/settings/_settings.scss_の下に設定ファイルが含まれています。これを独自のSassファイルに移動して作業できます。

変数を使用してカスタマイズできない場合は、独自のCSSを作成できます。以下は、ボタンのデフォルトのスタイルを変更する変数のセットです。

$button-padding: 0.85em 1em;
$button-margin: 0 $global-margin $global-margin 0;
$button-fill: solid;
$button-background: $primary-color;
$button-background-hover: scale-color($button-background, $lightness: -15%);
$button-color: #fff;
$button-color-alt: #000;
$button-radius: $global-radius;

$button-sizes: (
   tiny: 0.6rem,
   small: 0.75rem,
   default: 0.9rem,
   large: 1.25rem,
);
$button-opacity-disabled: 0.25;

Foundation-sass