Foundation5でレスポンシブをオフにする方法(sassのみ)

自分用にメモ。

CSSフレームワーク Foundation5 でレスポンシブの機能をオフにする方法です。
_settings.scss を開きます。

以下の箇所を探します。
[css]
// $screen: “only screen”;

// $landscape: “#{$screen} and (orientation: landscape)”;
// $portrait: “#{$screen} and (orientation: portrait)”;

// $small-up: $screen;
// $small-only: “#{$screen} and (max-width: #{upper-bound($small-range)})”;

// $medium-up: “#{$screen} and (min-width:#{lower-bound($medium-range)})”;
// $medium-only: “#{$screen} and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})”;

// $large-up: “#{$screen} and (min-width:#{lower-bound($large-range)})”;
// $large-only: “#{$screen} and (min-width:#{lower-bound($large-range)}) and (max-width:#{upper-bound($large-range)})”;

// $xlarge-up: “#{$screen} and (min-width:#{lower-bound($xlarge-range)})”;
// $xlarge-only: “#{$screen} and (min-width:#{lower-bound($xlarge-range)}) and (max-width:#{upper-bound($xlarge-range)})”;

// $xxlarge-up: “#{$screen} and (min-width:#{lower-bound($xxlarge-range)})”;
// $xxlarge-only: “#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (max-width:#{upper-bound($xxlarge-range)})”;
[/css]

以下に修正
[css]
$screen: “only screen”;

$small-up: $screen;
$small-only: $screen;

$medium-up: $screen;
$medium-only: $screen;

$large-up: $screen;
$large-only: $screen;

$xlarge-up:$screen;
$xlarge-only: $screen;

$xxlarge-up: $screen;
$xxlarge-only: $screen;
[/css]

要はメディアクエリを全部同じ値にしてしまう強引な方法です。
無駄なソースは出力されてしまいますが、PC版だけで取り急ぎ作成したい場合にどうぞ。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*