Step 6~9: Download a LESS or Sass Compiler でのStyles変更をなぞるSaSSわからんけどわかったことにする。

Pocket

Step 6: Download a LESS or Sass Compilerをなぞる

現時点でのboneテーマを使ったサイトはこちら。

boneテーマスタイルは、wp-content/themes/theme-bones-master/library/lessフォルダ内のlessファイルを変更してカスタマイズします。(ディレクトリ構成およびファイルはStep5を試すを参照)

lessに関しては、とほほのLess入門が分かりやすいです。

ほんとはわかってないけどね。
残念クン
残念クン

ツール(WinLESS)は、BonesのスタイルをプロダクションCSSファイルにコンパイルおよび縮小するために必要です。(訳 google先生翻訳)

DOWNLOADボタンを押してインストーラーをダウンロードし実行させ、Winlessをインストールする。

使用方法は、松風さんのブログMach3.laBlogを参照してください。

lessよくわからない

SassだのLessだのよくわからん。
ラッキー
ラッキー
やりすぎ君
やりすぎ君
WEBSAEに戻って知らない人用のとこ読めこんな様にかいてあったぞ。

以下 出典WEBSAEホームページ

CSSの編集
CSSをいじくるのは、上述通りSassがおすすめです。

Sassを知らない人は「library」の中にある「style.css」を編集します。

|– library
| |– css
| | |– admin.css
| | |– editor-style.css
| | |– ie.css
| | |– login.css
| | -- style.css ←コイツ!
でも、せっかくなのでこれを機に一度Sassをトライしてみましょうよ。

1分で。『Sass→Mac』へインストールする手順。
スゲぇと噂のスタイルシート!『Sass』をサクッとブラウザで試すところまでやる。
Sassで編集するファイルは「scssフォルダ」に以下のようにまとまってます。ここも、いじくらなそうなファイルはリストアップしてません。

| |-- scss
| | |-- admin.scss(管理画面)
| | |-- breakpoints
| | | |-- _1030up.scss(画面サイズ1030px以上)
| | | |-- _1240up.scss(画面サイズ1240以上)
| | | |-- _2x.scss(画面サイズ1030px以上)
| | | |-- _481up.scss(画面サイズ481px以上)
| | | |-- _768up.scss(画面サイズ768px以上)
| | |
— _base.scss(ベースになるスタイル。モバイルファーストってことを忘れずに)
| | |– ie.scss(ie用)
| | |– modules
| | | |– _alerts.scss(アラート)
| | | |– _buttons.scss(ボタン)
| | | -- _forms.scss(フォーム)
| | |-- partials
| | | |-- _functions.scss(追加機能)
| | | |-- _grid.scss(グリッド/レイアウト用)
| | | |-- _ie_grid.scss(ie用グリッド/レイアウト用)
| | | |-- _mixins.scss(ミックスイン)
| | | |-- _print.scss(印刷用)
| | | |-- _typography.scss(タイポグラフィ、テキストまわりのスタイル)
| | |
— _variables.scss(変数)
| | `– style.scss(コンパイル後)
デザインをパーツごとに分けてくれてるので、ピンポイントでカスタマイズできますね。

「variables.scss(変数)」や「mixins.scss(ミックスイン)」をうまく利用して、繰り返しの記述を省いたり、頻繁に使うスタイルを使い回す旨味を味わいましょう。CSS一本でカスタマイズするより、うんと速く進められます。

Sass勉強する時間ないしこれでわかったことにするよ。
ラッキー
ラッキー
いつもと同じだね。 あとはこっそり勉強するよ。。。
残念クン
残念クン

アウト~~~~~
審査員
審査員

前へ戻る 次へ進む

シェアする

  • このエントリーをはてなブックマークに追加

フォローする