FC2ブログ
スポンサーサイト
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


-------- -- | スポンサー広告 | トラックバック - | コメント -
sass + compass + foundation 6.4 初心者がどうにか乗り越えた高い壁
注記:
2018年現在では 「エディタ Atom + プラグイン sass-autocompile」 という選択肢もあるため、
あえて 「Sass + Compass」 を選ぶ理由はそんなにないかなと思います。

(参考) Atom + sass で快適 css ライフ♪
http://kobuchicken.blog22.fc2.com/blog-entry-172.html

でも 「Foundation の scss ファイルのどこをどういじれば良いか」 等は初心者には役立つ情報なので、
参考にしてみてくださいね。



Foundation 6.4 から導入された xy-grid を使いたい!
でも、 cell の間隔とかが広すぎてダサいので、css をカスタマイズしたい!

そんな欲望に飲まれてしまったため、何日間も暗闇の中をさまよい続ける結果にorz

そう、ver 6.4 とか xy-grid は最新版なので、ネット情報が少なすぎて、sass 初心者にとっては鬼門といっても良いくらい。

悪戦苦闘しながら、どうにかこうにかコンパイルするとこまで辿り着いたので、誰かの役に立てば、ということと、自分用メモ、という意味で、道標として記録しておきます。

うろ覚えとかいい加減な説明があると思いますが、優しくご指摘くださると嬉しいです^^


当方の環境は、

OS: Windows10 64bit
エディタ: Mery


今回の目的地は、「Wordpress で制作中のサイトに foundation 6.4 の スタイルシートを sass でカスタマイズして適用する」 です。

(ちなみに、 css 版 foundation で手書きでチマチマ cell 間隔を変えればいいじゃん! ・・・というのは、一見取り付きやすくて簡単そうですが、ひとえに cell のマージンやパディングと言っても色々な設定が複雑に絡み合ってるっぽいんで、css 編集はとんでもなく難しいと思います。)


基本的にコマンドライン上での作業がメインになります。
(いろいろなツールをインストールしていきますが、すべてコマンドライン上で動くツールになります。)


まず sass が何か、というと、 可読性・編集性をより良くして要素のネストや関数も使えるようにした超便利な css といった感じ。
sass の形式で書けば、css 書くのがすごーく楽になる。のだそう。

でも、コードの書き方がデザイナーになじまなかったようで、その点を改良した sass の派生版となる scss が出てきた。
(現在は sass のツール&コマンドが scss にも対応/同梱しているような形)

sass は ruby というプログラミング言語上で動くコマンドラインツールとして提供されています。
なので、まず ruby のインストールが必須です。
※ pyton版 sass もあるようです。

それと、sass だけでもいちいち手動でコマンド打てばコンパイルは出来るんですが、それを自動化してくれるのがこちらのツール。

・ sass + compass
・ sass + grunt

という2つの選択肢があるようです。

この compass や grunt というツールは、指定ディレクトリの scss ファイルを監視して、それが編集されたら自動的にコンパイル済みの css を生成してくれる、というスグレもの。

とってもありがたいです。

これと WinSCP といった FTPクライアントのミラーリングアップロード機能を組み合わせれば、scss を編集したらWEB上で即座に編集結果を見ることができます(要キャッシュクリア&リロード)。

※ アップロード → ブラウザリロード、までさせることが出来るらしいのですが、今回は荷が重いので割愛。

何度も試した結果、compass が使いやすい、というか compass しか動かなかったので compass で行きます。
grunt はさらに pyton が必須なようですし。pyton 入れると容量喰いそう。


A: 「Chocolatey」でWindowsでもモダンな開発環境を作る
https://wood-roots.com/web/tool-editor/1154

こちらのサイトを参考にして、Chocolatey で色々インストールしていきます。

Chocolatey は、Ubuntu でいうところの apt-get みたいなもの。
「コマンドラインによるアプリケーションの導入や削除を実現するパッケージ管理システム」 だそうです。
これで全部揃えられれば便利なんですが、そうはいかないところが初心者泣かせ。



▼ Chocolatey のインストール

管理者権限でコマンドプロンプトを開き、

以下のコマンドをコピー&ペーストして Enter キーで実行。

@powershell -NoProfile -ExecutionPolicy unrestricted -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin

chocolatey がインストールされました。


▼ 各種ツールのインストール

そのまま下記のコマンドで、 ruby、node.js、sass をインストール。

cinst ruby
cinst nodejs.install
cinst sass


nodejs.install とすることで、 node.js だけでなく node.js のパッケージマネージャー npm というツールもインストールされます。
この npm も試行錯誤中にはよく使いました。

ちなみに npm の -g オプションは、インストールしたコマンドをグローバルで使えるようにするオプションらしい。 必須かも??

node.js は未だによくわからんのでこれ読んで。

初心者向け!3分で理解するNode.jsとは何か?
https://eng-entrance.com/what-is-nodejs

さて、上記サイト A の執筆時点では cinst で compass もインストール出来たようですが、今は 「そのパッケージはありません」 とエラーになり、入れられない模様。

というわけで別の手段、

・ ruby のパッケージマネージャー gem
・ node.js のパッケージマネージャー npm

のどちらかで入れるという手があります。

少なくとも gem ではインストール出来ました。

gem install compass

これで compass が入りました。



▼ sass + compass の基本

まず任意の場所に作業用のディレクトリを作ります。

今回は c:\users\USER_NAME 以下に作成。
cd で上記ディレクトリに移ってから、

compass create NEW_PROJECT_NAME

で、基本的な scss と css フォルダと config.rb ファイルが作られます。

.config.rb は、 compass が自動監視する際に読み込む設定ファイル。

この設定ファイルがあるディレクトリで compass w と打つことで、config.rb に従って監視&コンパイルをしてくれます。

http_path : 忘れた
cdd_dir : css ファイルの生成先フォルダ
sass_dir : scss ファイルのあるフォルダ (監視先)
images_dir : 画像ファイルのあるフォルダ (初心者には何に使うのか不明)
javascripts_dir : Javascript のあるフォルダ (これも用途不明)

この辺を wordpress テーマのディレクトリ設定に合わせて↓のような感じで書き換えておきます。

# require 'zurb-foundation'
# require 'compass/import-once/activate'
# Require any additional compass plugins here.


# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "css"
sass_dir = "scss"
images_dir = "img"
javascripts_dir = "js"

# You can select your preferred output style here (can be overridden via the command line):
# output_style = :expanded or :nested or :compact or :compressed
output_style = (environment == :production) ? :compressed : :expanded

# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true

# To disable debugging comments that display the original location of your selectors. Uncomment:
# line_comments = false


# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

# add_import_path "node_modules/foundation-sites/scss"


output_style = (environment == :production) ? :compressed : :expanded

の一行は、css 生成の様式を決めています。ちなみに IF 文みたいになってます。
詳しいことは調べてみてください。

それでは監視スタート。

compass w

しばらく待つと、「>> Compass is watching for changes. 」 と出て監視を始めてくれます。
(ちなみに監視を中断するには Ctrl + C)

さっそく、試しにエディタで scss/screen.scss ファイルを開いて適当に css を書いて上書き保存してみます。

さきほど compass w したコマンドプロンプト上で、

modified scss/screen.scss
write css/screen.css


と出ればコンパイル成功。

エディタで css ファイルを開いて内容を確認してみます。

ちなみに、compass create NEW_PROJECT_NAME を打たないで自前で scss や config.rb を用意してももちろんOK。


それと、必須ではないが、 .scss ファイルの先頭に

@import 'compass'

と入れておくと、compass のコアモジュール (例えば typography とか) の mixin が呼び出せるそうだ。
compass/reset みたいに、コアには入っておらず名前を明示しないと使えないモジュールもある。

※ あくまでも Compass に同梱の mixin を使えるようにするだけなので、使わないなら書かなくていい。

詳細こちら。 sass と compass コマンドについて、すんげー詳しい。

Sass/Compass のインストールと基本的な環境設定
http://www.webdesignleaves.com/wp/htmlcss/652/



▼ パーシャルファイルと 「 _ 」 「.scss」 の省略について
それから、先頭に 「_」 があるファイルはパーシャルファイルと言って、foundation.scss などメインの scss ファイルから @import で呼び出して使うモジュールのようなもの。

パーシャルファイル (_付きのscssファイル) について
https://liginc.co.jp/designer/archives/11623/2#a21

大事な点が一つ。

sass / scss のコード上や、 sass / compass などのコマンド上、 config.rb 上では、この先頭の 「 _ 」 と拡張子 「.scss」 は省略してもよい決まりになっている。

例えば、

@import 'settings/settings'
@import 'util/util'


と書かれている場合、これは↓のどちらかの意味になる。

@import 'settings/_settings.scss'
@import 'util/_util.scss'


@import 'settings/settings.scss'
@import 'util/util.scss'




▼ foundation 6.4 の scss の入手

探すのにずいぶん手間取りましたが、ここにありました。

Github - zurb/foundation-sites
https://github.com/zurb/foundation-sites

※ 内容からして現時点 (2018/7/9) では ver6.4 になっているっぽいですが、これってどんどんバージョン上がって行ってしまうんだろうか?

下の方の Run Locally ってとこにコマンドライン経由でのこれのインストール方法も載っています。

私はそれに気付かず読んでなかったので、右上あたりにあるグリーンのボタン 「Clone or Download」 → 「Download Zip」 で PC に保存し、さっき compass create で作ったディレクトリに解凍しました。

ただし、実際必要なのは、

 ・scss フォルダ
 ・assets フォルダ
 ・js フォルダ
 ・_vendor フォルダ
 ・config.rb ( compass create で作ったやつでもOK)

位じゃないでしょうか? (間違ってたらゴメンナサイ)



▼ foundation 6.4 の編集すべきファイルと作法

少なくとも私の場合は、ですが、基本的にエディタで編集するべきファイルは、

- scss/foundation.scss
  どのコンポーネントを実装するかを選択する。 foudation の幹にあたる部分。

- scss/settings/_settings.scss
  foundation の各種コンポーネント毎の変数の設定

- scss/_global.scss
  全般的なスタイルの変数の設定

- scss/app.scss
  ユーザーによる foundation 以外のスタイル設定
  (※zipには同梱されてないので自前で作る)



の4つ。 (上の説明間違ってるかもです。)

foundation 関連のスタイルは出来る限り _settings で修正し、それ以外のオリジナルのスタイルは app.scss の一番後ろに書く、というのが作法だそうです。

Zurb Foundation 6 Sassバージョンを使用する上で、理解すべき2つのscssファイル
https://qiita.com/kohki-shikata/items/2d80c11f509cc804af9a

foundation の修正では、上記4つの scss ファイルを目をこらしてよく読みつつ、テキスト検索掛けたりしながら、必要な部分を書き換えて修正していきます。


しかしその前にやっておくべきことが多々あります(=o=;)

↓ ↓ ↓



▼ 最新の _settings.scss ファイルを入手 (ここうろ覚えです)

_settings.scss を見ると、 xy-grid に関する設定がどうやら無いっぽい。これでは xy-grid のクラスが生成されないはず。
いえいえちゃんとありました(^_^;) すぐ下の 追記) を読んでね

検索してみるとここが出てきた。

Zurb Foundation - sass版について
https://foundation.zurb.com/sites/docs/sass.html

上の記事を良くみると、

「Download the latest settings file here.」 (最新版の settings ファイルはこちらからダウンロード)

とあるので、これをダウンロードして _settings.scss として scss フォルダに上書き保存する。


追記)
念のためテキスト差分を比較してみたけど、下記のとおりほとんど同じみたいです(^_^;)
ファイルサイズも 21.8KB とほぼ同じです。
なので、下の差異が気にならなければ、このダウンロード&上書きはやらなくてもOKかも。

> fc _settings_zip.scss _settings.scss

ファイル _settings_zip.scss と _SETTINGS.SCSS を比較しています

***** _settings_zip.scss
$global-prototype-breakpoints: false;
$global-button-cursor: pointer;
$global-color-pick-contrast-tolerance: 0;
***** _SETTINGS.SCSS
$global-prototype-breakpoints: false;
$global-button-cursor: auto;
$global-color-pick-contrast-tolerance: 0;
*****

***** _settings_zip.scss
$menu-item-color-active: $white;
$menu-item-color-alt-active: $black;
$menu-item-background-active: get-color(primary);
***** _SETTINGS.SCSS
$menu-item-color-active: $white;
$menu-item-background-active: get-color(primary);
*****

***** _settings_zip.scss
$tab-item-padding: 1.25rem 1.5rem;
$tab-content-background: $white;
***** _SETTINGS.SCSS
$tab-item-padding: 1.25rem 1.5rem;
$tab-expand-max: 6;
$tab-content-background: $white;
*****





▼ _settings.scss ファイルを import する設定

仮コンパイルしてわかったのですが、

このままだと _settings.scss が読み込まれていない様子なので、

scss/foundation.scss ファイル
// --- Settings ---
// import your own `settings` here or
// import and modify the default settings through
// @import 'settings/settings';


この最後の行を、下記のとおりコメント解除する。

@import 'settings/settings';

よし、と。



▼ _settings.scss ファイルの修正

仮コンパイルを試すと、

util/util が見つからない (settings/settings ファイルの63行目)

というエラーが出ている。どれどれ・・・

settings/_settings.scss (63行目位)
@import 'util/util';

なるほど。 _settings.scss のあるフォルダを調べると、この _util.scss ファイルは確かにそこに無い。 ていうか util フォルダごと無い。

そっか、ディレクトリ指定が間違っているんだ。

おそらく、同梱されていた _settings.scss ファイルではなく外部から持ち込んだものだからだろう。 →同梱版も同じ間違いになってました。

_settings.scss ファイルから見ると、本来 ../util/util が正しい。 ../ は一つ上の階層を表す。

なので下記のように修正した。

settings/_settings.scss (63行目位)
@import '../util/util';



▼ foundation-normalize を include する

Foundation 製の normalize を適用しておきたい。

scss/_global.scss (136行目~)
@mixin foundation-global-styles {
// @include foundation-normalize;


のコメントアウトを外す。

@mixin foundation-global-styles {
  @include foundation-normalize;


これでOK。

これをやらないと、 「vender/normalize が見つかりません」 というエラーが出たりする。
scss/vender/_normalize.scss のファイル自体はちゃんと存在してるはずなので、たぶん上記の手順やればエラー収まるはず。

それから私は Wordpress のテーマ _s (underscores) を使用していて、その中にも Normalize のスタイル設定が書かれています。
foundation-normalize と重複になるため、 _s の style.css から該当部分をバッサリ削除しました。


追記)
もちろん normalize.css は自前で用意することも出来る。

_s (underscores) の Wordpress テーマの css reset は、こちらを使っているそうです。
https://necolas.github.io/normalize.css/



▼ 超重要! foundation.scss で @mixin foundation-everything を記述する

※※※ 初心者なのでこのやり方が正しいのかはわかりません ※※※

で、いくらコンパイルしても、

/**
* Foundation for Sites by ZURB
* Version 6.4.3
* foundation.zurb.com
* Licensed under MIT Open Source
*/





のコメント部分が foundation.css に出力されるだけで、中身がほとんど空っぽなのです。

悩み続けて最後に辿り着いたのが、 foundation.scss にある、

@mixin foundation-everything( [中略] );

という mixin (≒関数) の存在。

XY-Grid クラスの読み込みを含め、ほとんどすべての Foundation のスタイルやパーシャルファイルを読み込んでいる部分です。

でもこれ、mixin なんで、要するにプログラミングでいう関数みたいなものなんですが、これは関数の定義にあたる部分。
なので、ここで即実行されるわけじゃないんです。

だから、どこかでこれを呼び出してあげないといけないじゃん!

scss/foundation.scss の最終行に追記
@include foundation-everything;

これです。 この一行。これで完璧。 (関数定義より後ろに追記のこと)

初心者のため、ここに書くべきなのかどうかはわかりません。もしかしたら他のやり方かもしれないし、他のファイルの他の場所かもです。

さぁこれでコンパイルも正常に行われ、foundation.css もファイルサイズが 200~300KBくらいと立派になり、中身がしっかり出力されていることを確認しました。



ここまででようやく foundation を修正するための手はずが整いました。

さて次項から実際の修正へ。



▼ XY Grid を有効にする

ver6.4 ならデフォルトで XY-Grid が出力されるはずなんだけど、うーん、何度コンパイルしても、XY-Grid のスタイルが出力されません。

生成された css に grid-container / grid-x とかのクラスが見当たらない。

foundation.scss を良く見てみると・・・

scss/foundation.scss (79行目~)

@mixin foundation-everything(
 $flex: true,
 $prototype: false,
 $xy-grid: $xy-grid
) {
 @if $flex {
  $global-flexbox: true !global;
 }

 @if $xy-grid {
  $xy-grid: true !global;
 }

 // Global styles
 @include foundation-global-styles;
 @include foundation-forms;
 @include foundation-typography;

 // Grids
 @if not $flex {
  @include foundation-grid;
 }
 @else {
  @if $xy-grid {
   @include foundation-xy-grid-classes;
  }
  @else {
   @include foundation-flex-grid;
  }
 }


// Grids 以下をよく読むと、 $flex = true の場合のみ、else 文内に入れる。
その else 文では、 $xy-grid = true の場合には XY-Grid のクラスを読み込み、false の場合は flex-grid を読み込む、となっている。

要するに、XY-Grid を読み込ませるためには、

 $flex = true かつ $xy-grid = true

でなければならない、ということです。

「私が使いたいのは XY-Grid なんで Flex-Grid じゃない!」ということでついつい $flex: false としてしまいたくなりますが、

XY-Grid を使いたければ、$flex: true, はいじらずそのままにしておきましょう。

※ ここでいう $flex は Flex-Grid のことを指すのでしょうか? …とりあえず今は深く考えないでおきます。

ちなみに最初のあたrで $xy-grid に $xy-grid を代入する、という変なことをしてるように見えますが、
前の $xy-grid はこの mixin 内で有効な Empty な変数、後ろの $xy-grid はグローバルな変数で _settings.scss で値を定義済み、同名でも別物、というこだろうと思われます。

また、$xy-grid の設定も必要です。

scss/settings/_settings.scss (855行目~)
// 56. Xy Grid
// -----------

$xy-grid: $xy-grid;


これを

$xy-grid: true;

に書き換えます。

もしここで $xy-grid に値を設定してあげないままだと、

undefined variable: "$xy-grid"

というエラーになります。


おし!これでちゃんと XY-Grid 関連のスタイルが出力されるようになりました!


この時点でコンパイル、アップロードしてブラウザで見ると、ちゃんと XY-Grid のスタイルが生成されておりました! やった!



▼ 「foundation-grid という mixin が定義されていません」 というエラーが出た場合

コンパイルすると、なぜか

error scss/foundation.scss (Line 100: Undefined mixin 'foundation-grid'.)

というエラーが出る場合。

これの原因は、

$flex と $xy-grid の変数の組み合わせによっては、scss/foundation.scss の @mixin foundation-everything() の中の IF 文内の @include foundation-grid が実行されず、 mixin である foundation-grid が読み込まれないから

です。

$xy-grid を true にするなら、 $flex も true にしてあげましょう。これでこのエラーがでなくなります。



▼ .grid-container の幅を変えたい

規定の幅でボックスを中央寄せにしてくれる便利なクラス .grid-container。

たぶんこんな風に使う。
<div class='grid-container'>
  <div class='grid-x'>
    <div clss='medium-4'>Cell-1</div>
    <div clss='medium-4'>Cell-2</div>
    <div clss='medium-4'>Cell-3</div>
  </div>
</div>


その幅は、基本的に $global-width 変数が決定している。

デフォルトではこのようになっている。

scss/_global.scss (21行目~)
/// Global width of your site. Used by the grid to determine row width.
/// @type Number
$global-width: rem-calc(1200) !default;


rem-calc(n) は、nピクセルの長さを単位 rem に変換するための mixin (≒関数)。

なので、ここでは$global-width が 1200px に設定されているとわかる。

なんでわざわざ px から rem に直すのかは調べたけどもう忘れました(^_^;)

さて、1200px だと広すぎるので、980px にしよう。  ※ 後に 960px に修正した

/// Global width of your site. Used by the grid to determine row width.
/// @type Number
$global-width: rem-calc(980) !default;


.grid-container の幅の設定はこれでOKだ。

と思ったら、生成された css で幅の値が変わっていない。

Grep 掛けると、これが見つかった。

scss/settings/_settings.scss (69行目)
$global-width: rem-calc(1200);

_settings.scss でも $global-width の設定があり、これで上書きされてしまっているようだ。

_settings.scss → _global.scss の順に読み込んでいるのにおかしいなぁ。

_settings.scss で
$global-width: rem-calc(980);
として、

さっき修正した _global.scss では1200に戻してコメントアウトしておこうか。
// Commented out because of Duplication in _settings.scss(line 69)
// $global-width: rem-calc(1200) !default;

わかるように上にコメント書いた。

OK、foundation.css 上もちゃんと _settings.scss で指定した幅になっている。

これで正常に $global-width の指定が効くようになった。


逆に、 $global-width はいじらずに、 $grid-container の値を直接書き換えることも出来る。

scss/settings/_settings.scss (859行目)
$grid-container: $global-width;
↓ ↓ ↓
$grid-container: rem-calc(980);



▼ XY-Grid のマージンを狭くしたい

grid-x と cell で3つ横並びのボックスを作りました。

HTMLコードはこんな感じ
<div class='grid-x'>
  <div clss='medium-4'>Cell-1</div>
  <div clss='medium-4'>Cell-2</div>
  <div clss='medium-4'>Cell-3</div>
</div>



でも、それぞれのスキマというか間隔が広すぎて、このままだと、何だかかなり・・・すごく・・・・ダサかっこ悪い。

そういう場合はここ。

scss/settings/_settings.scss (861行目あたり)
$grid-margin-gutters: (
small: 20px,
medium: 30px
);


この値を小さくすればいい。

$grid-margin-gutters: (
small: 5px,
medium: 15px
);


small / medium は恐らくブレークポイントでいう small / medium サイズのことだろう。実際そうだった。

これでだいぶちょうど良い感じに狭くなりました。

▼ ブレークポイントを変更したい場合

ブレークポイントを変更するには、

scss/settings/_settings.scss (104行目~)
// 2. Breakpoints
// --------------

$breakpoints: (
  small: 0,
  medium: 640px,
  large: 1024px,
  xlarge: 1200px,
  xxlarge: 1440px,
);
$print-breakpoint: large;
$breakpoint-classes: (small medium large);


をいじればいい。

$breakpoints で small~xxlarge の各ブレークポイントの下限サイズを px で決定している。

ちょっとわかりにくいので、わかりやすく書き直すとこういうことかな。
small: 0~639px
medium: 640~1023px
large: 1024~1199px
xlarge: 1200~1439px
xxlarge: 1440px~


また、 $breakpoint-classes で実際に使用する ( css に出力する) ブレークポイントを決定しているようです。

私の場合は small と medium では両方ともスマホ仕様のスタイルにし、large 以上~ で PC 用のスタイルを適用したいと思います。

あれ、でも PC では常にブラウザの左右枠と右端のスクロールバーで幅を取られるから、1024px幅の古めのPCではスマホ表示になってしまうなぁ。

レスポンシブのブレイクポイントを設定する前に知っておくべきこと (2017/7/3 更新)
https://deaimobi.com/breakpoint/

なるほど、960px をタブレットと PC の境目 (ブレークポイント) にしたら良い、と。
言い換えると、960px~の幅の時に PC 用のスタイルにする。

ブラウザサイズのうち、 WEB を表示できる範囲、が大事なんですが、
960px なら、 1024px の古い PC で見ても、スクロールバー等に多少幅を取られても大丈夫だろう。


だろう、では不安なので、実際の値を計算してみる。

一般的ではないが、Vivaldi だと左端のパネルに 34px、スクロールバーに 17px 、合計 51px を取られている。 左パネルがある分、普通のブラウザより取り幅が多いので良いサンプルだ。

表示できる幅は、1024 - 51 = 973px

コラおいー、前に設定した $global-width & $grid-container の 980px じゃ幅が広すぎるじゃないか。

960px に修正しておこうっと。

scss/_global.scss (21行目~)
/// Global width of your site. Used by the grid to determine row width.
/// @type Number
$global-width: rem-calc(960) !default;


これでよし。

連動して、ブレークポイントも large の下限をいじってこうしよう
small: 0~639px
medium: 640~960px
large: 960~1199px
xlarge: 1200~1439px
xxlarge: 1440px~


ま、xlarge とか xxlarge は使わないんで、そのままで OK。


結果、こうなりました。
// 2. Breakpoints
// --------------

$breakpoints: (
  small: 0,
  medium: 640px,
  large: 960px, // ここだけ修正
  xlarge: 1200px,
  xxlarge: 1440px,
);
$print-breakpoint: large;
$breakpoint-classes: (small medium large); // これはそのまま


メディアクエリはこうなるんでしょうか。
/* Small & Medium = まずはスマホのスタイル記述 */

@media screen and (min-width: 960px) {
  /* Large = PC 用のスタイル記述 */

}


ちなみに、この面倒くさいメディアクエリも、 scss を使えば変数や mixin で簡単に書けるそうです。



▼ 最後にコンパイル

諸々を上書き保存すると、 compass がコンパイルしてくれます。

生成された css/foundation.css を見ると、しっかり XY-Grid のクラス (.grid-container / .grid-x 等) が含まれています!

そして、これを所定の場所にアップロードして、ブラウザで(キャッシュクリアしてから) リロードすると、しっかり幅が狭くなっています! レイアウト崩れもないので、ちゃんと XY-Grid が効いています!

やったーバンザーイ!



とまぁ整然と書き連ねていますが、

ここに至るまでは、たーーーーーーーーくさんの試行錯誤がありました。

間違いだらけでようやく辿り着いたので、出来たときに嬉しいったらありゃしない!



皆さんも素敵な sass ライフを~☆


初心者なんでなんか勘違いとかあったらご指摘くださいね^^



追記)
あ、bower ってなんだっけ?入れた気がするけど。
https://www.visualive.jp/blog/archives/388/#Bower

追記)
Github から拾ってきた foundation-sitezip 内の .version ファイルを見てみると、
zurb:foundation-sites@6.3.0

となってる。 6.4 じゃなく 6.3 やんけ(^_^;)

でも xy-grid が効いてるのは謎だ。
スポンサーサイト


2018-07-09 Mon | WEBデザイン | トラックバック:0 | コメント:0
□ コメントの投稿
管理者にだけ表示を許可する

Thank you for visiting me !
プロフィール

kobuchicken

  • 管理人: kobuchicken
  • Linux 初心者です。XP 無しで過ごした長い長い 98 の日々。Ubuntu & 派生ディストリの有難さを感じる今日この頃です。フリーの OS がもっと身近になりますように。
  • RSS
カレンダー
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -
10月 « 2018/11 » 12月
ブログ内を検索
Search this site.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。