2015年1月10日ゆるゆるカフェ

1. Foundation の
Sass を使いはじめた人と
使いたいと考えている人へ
ゆるゆるカフェ
2015年01月10日

2. 自己紹介
名前 三柴 誠一郎
職業 フリーランス（３４デザインねっと）
仕事 Web制作のディレクション、デザイン、コーディング
経歴 サラリーマン（IT業界）17年 ⇒ ニート9ヶ月 ⇒ フリーランス1年
趣味 カメラ、 旅、 料理、 滝めぐり、 ダムめぐり、 城めぐり
特徴 絶望的に方向音痴

3. 本日のテーマ
①Sassって何？どんな事ができる？
②Foundationの基本機能
- レスポンシブサイト制作編 -
③Sassの環境づくり - _s & Foundation -
④Sassの機能を使ってみよう

4. はじめに

5. Sass本体のインストール方法は
本セッション内では説明いたしません。
いろいろなサイト・書籍で詳しく解説して
いると思いますので、そちらを参考に
Windows,Mac,Linux,GUI,CUIなど
ご自身の環境や状態に合わせご準備ください。

6. Chapter 1
Sassって何？
どんな事ができる？

7. Sassについて

8. Sassのバージョン
バージョン リリース 概要
3.4.9 最新 2014年11月24日
3.4.0 2014年08月18日
Using & in SassScript, Selector Functions,
Smaller Improvements
3.3.0 2014年03月07日
SassScript Maps, Source Maps(@at-root,…etc),
Smaller Improvements
3.2.0 2012年08月10日
@content, Placeholder Selectors: %foo, Variable
Arguments, Directive Interpolation,Smaller Improvements
3.1.0 2012年04月24日 -
3.0.0 2010年05月09日 -

9. Sassの公式サイト
Sassは世界で最も安定し、成熟した、
パワフルなプロ級のCSSの拡張言語
http://sass-lang.com

10. 言葉の意味はわからんが
とにかくすごい自信だ！

11. どんな機能がある？

12. Sassの機能 - 基本機能編 -
1.ルールのネスト
2.親セレクタの参照
3.プロパティのネスト
4.プレースホルダー

13. ルールのネスト
スタイルを入れ子で書くことができます
親セレクタの参照
アンパサンド（&）を書くことで親セレクタを参照できます
プロパティのネスト
プロパティもネストで書くことができます
プレースフォルダ
CSSとして生成しないセレクタを書くことができます

14. ルールのネスト？

15. Sass
CSS
コンパイル

16. コンパイル
Sass
CSS
@mediaもネストできる

17. 親セレクタの参照？

18. Sass
親セレクタ参照
・疑似クラスの前
・セレクタの結合
親セレクタ参照
・子セレクタの後
CSS
コンパイル

19. Sass
CSS
コンパイル
親セレクタ参照
・親セレクタ名を子セレクタ名に結合
※Sass3.3.0以降

20. プロパティのネスト？

21. Sass
コンパイル
プロパティのネスト
CSS

22. プレースホルダー？

23. @extend と一緒に使う・・・
Chapter4で説明します

24. Chapter1のまとめ
Sassの機能（ネストやアンパサンド（&） ）を利用す
ることで、記述量が減りメンテナンス性が向上す
同じセレクタに記述することで、関係性が解りやす
く可読性が向上する

25. Chapter 2
Foundation の基本機能
- レスポンシブサイト制作編 -

26. レスポンシブサイト制作でよく使うやつ
Visibility 表示・非表示
Grid グリッド
Block Grid ブロックグリッド

27. 使い方〜Visibility〜
画面サイズ（横幅）によって、表示・非表示を制限
html
PC
タブレット
スマホ １行目だけ表示される
初期値：
small - 横幅40emまで
medium - 横幅64emまで
large - 横幅９０emまで
２、３行目が表示される
２、４、５行目が表示される

28. 使い方〜Grid〜
レイアウトを均等に分割し、
コンテンツをマス目上に配置することができる
初期値：
横幅1000px
分割数12
row 分割するコンテンツを挟む
columns 分割するコンテンツ
large-? おもにPC用の分割数
medium-? おもにタブレット用の分割数
small-? おもにスマホ用の分割数
初期値：
small - 横幅40emまで
medium - 横幅64emまで
large - 横幅９０emまで
html

29. 見え方PC
タブレット
スマホ
largeが縦に
mediumとsmallは
指定した分割数で配置
largeとmediumが縦に
smallは指定した分割数で配置

30. Chapter 3
Sass の環境づくり
- _s & Foundation -

31. Sass対応版の _s
を入手する

32. サイトへアクセス
以下にアクセス！
http://underscores.me/
①テーマ名を入力して ②クリック！
Sass対応版は
ココをチェック！

33. ダウンロードして解凍

34. Sass対応版のFoundation
を入手する

35. サイトへアクセス
以下にアクセス！
http://foundation.zurb.com/
①クリック！

36. メニューを選択
Sass対応版は
この先を参照

37. インストール方法を選択
推奨インストール（CLI） or 手動でダウンロード

38. 推奨されているやつ

39. コマンドでインストール - 準備編 -
npm install -g bower grunt-cli
簡単なコマンドを2つ叩くだけだよ
gem install foundation
・・・コマンド？ ねえ、難しい？
難しい？
Foundation5で利用している bower
（パッケージマネージャ）がインストールされる
Foundation のCLI（コマンド）が使えるようになる

40. - プロジェクトを開始する -
foundation new my_project
ねえ、ねえ、ねえ？
コマンドを1つくだけだよ
ねえ、難しい？
Foundation 環境がインストールされる
※前作業が終わっていて、かつCompassを使う
（使える状態）状態である場合

41. いろいろダウンロードされる
この画面では見えないけど・・・
Gitのリポジトリとかも 作られる
たくさんスタイルがココに入っている

42. 例) WordPressの環境で実行
例）Mac + MAMP + WordPress で
yuru2cafeというプロジェクト（テーマ）を作成する場合
cd wp-content/themesでテーマディレクトリへ移動
foundation new yuru2cafeでプロジェクト作成

43. 推奨されていないやつ？

44. 手動でダウンロード
①Githubからダウンロード
②bower_componentsって
ディレクトリを作成
③Githubからダウンロード
④foundationって名前に変える

45. こんな感じになる
①Github Foundation Compass Template
からダウンロード
②作成したディレクトリ
③Github Foundation Bower Package
からダウンロード
④名前変更したディレクトリ
この画面では見えないけど・・・
Gitの設定ファイルとかもある

46. めんど∀．¬＄％）Q・・・

47. 入手したファイルを
自分の環境に合わせて設定する

48. こんな感じがいい感じ？
コンテンツの内容は_sのファイルを利用
デザイン（配置、配色など）はFoundationを利用
Foundationのバージョンアップも簡単に

49. 例) 環境づくり①
①テーマフォルダ（wp-content/themes）で
foundation new yuru2cafe
Sass対応版Foundation環境を作成
例）yuru2cafeというプロジェクト（テーマ）を作成する場合

50. 例) 環境づくり②
②_sでダウンロードしたファイルをコピー（追加）
Foundation
_s
_s
_sのjs配下のファイルを
Foundationのjs配下に追加
_sのsass配下のファイルを
Foundationのscss配下に追加
_s
Foundation

51. 例) 環境づくり③
③scss配下を整理する
app.scss を _app.scss に変更
style.scss を _s.scss に変更
_customize.scss を新規作成
style.scss を新規作成

52. まとめ
ファイル名 用途
_app.scss
Foundationの利用する機能を選択（@import）
※初期は全機能がインポートされている
_cuttomize.scss
オリジナルのルールを記述していくファイル
※名称やファイルの分け方は任意
_reset.scss
リセットCSS
※_s.scss からインポートされる
_s.scss
_sの利用する機能を選択（@import）
※初期は全機能がインポートされている
_settings.scss
Foundationのカスタマイズ
※_app.scss からインポートされる
style.scss
各ファイル（パーシャルファイル）をインポートする
※基本ルールは記述しない

53. 補足）設定ファイルをカスタマイズ

54. 例) style.scss のカスタマイズ
_s の Sass を読み込み
Foundation の Sass を読み込み
他の Sass を読み込み
オリジナルの Sass を読み込み

55. _s の設定ファイルをカスタマイズ

56. _s.scss を編集して機能を選択
_s で定義されている変数を呼び出し
_s で定義されているミックスインを呼び出し
リセットCSSを呼び出し
※他のリセットCSSを利用する場合はコメントアウト
呼び出す（@import）する
パーシャルファイル（_ファイル名.scss）を選択
これ以降の行を編集
※不要の場合はコメントアウト

57. _s で定義されている変数の値を変更
• variables-site/_colors.scss
背景、テキスト、リンク、ボタンのカラーが定義されている
• variables-site/_structure.scss
メインの幅とサイドバーの幅が定義されている
• variables-site/_typography.scss
フォントと行の高さが定義されている

58. でも・・・ここで変更しても
Foundationと同じセレクタに
設定されるスタイルは無効・・・

59. 変数名 初期値 インクルード先
variables-site/_colors.scss
$color__background-body #fff _reset.scss
$color__background-screen #f1f1f1 modules/_accessibility.scss
$color__background-hr #ccc elements/_elements.scss
$color__background-button #e6e6e6 forms/_buttons.scss
$color__background-pre #eee typography/_copy.scss
$color__background-ins #fff9c0 typography/_copy.scss
$color__text-screen #21759b modules/_accessibility.scss
$color__text-input #666 forms/_fields.scss
$color__text-input-focus #111 forms/_fields.scss
$color__link royalblue navigation/_links.scss
$color__link-visited purple navigation/_links.scss
$color__link-hover midnightblue navigation/_links.scss
$color__text-main #404040 typography/_typography.scss
定義されている変数

60. 変数名 初期値 インクルード先
variables-site/_colors.scss（つづき）
$color__border-button #ccc #ccc #bbb forms/_buttons.scss
$color__border-button-hover #ccc #bbb #aaa forms/_buttons.scss
$color__border-button-focus #aaa #bbb #bbb forms/_buttons.scss
$color__border-input #ccc forms/_fields.scss
$color__border-abbr #666 typography/_copy.scss
variables-site/_typography.scss
$font__main sans-serif typography/_typography.scss
$font__code Monaco, Consolas, ・・・・・・ typography/_copy.scss
$font__pre "Courier 10 Pitch",・・・・ typography/_copy.scss
$font__line-height-body 1.5 typography/_typography.scss
$font__line-height-pre 1.6 typography/_copy.scss
variables-site/_structure.scss
$size__site-main 100% layout/_sidebar-content.scss, _content-sidebar.scss
$size__site-sidebar 25% layout/_sidebar-content.scss, _content-sidebar.scss
定義されている変数
つづき

61. Foundation の設定ファイルを
カスタマイズ

62. _app.scss を編集して機能を選択
Foundation で定義されている変数を呼び出し
初期状態は全機能を呼び出している
※個別に機能を選択する場合は
コメントアウトする
機能を選択する場合はコメントアウト
を外し、これ移行の行で使用する
※使用する機能のコメントアウトを外す

63. 例) _app.scss を編集

64. Foundation で定義されている
変数の値を変更
• _setting.scss
（項番a〜e）サイズ、カラー、グリッドの分割数など基本的
な値が定義されている
（項番01〜36）各機能ごとの値が定義されている
• コメントアウトされた状態では変数として有効にならない

65. 例) _settings.scss を変更
rowを指定した際の横幅 1200px
グリッドの分割数 24
余白 0

66. Chapter 4
Sassの機能を使ってみよう

67. 6-2. Variables: $ （変数）
6-6. Functions （関数）
7-3. @extend （継承）
9. Mixin Directives （ミックスイン）
最低覚えておきたいSassの機能

68. Variables: $ （変数）
変数に値を設定し、任意の場所で変数名を参照し値を呼び出す
Function （関数）
引数から値を受け取って一定の処理を実行して値を返す
@extend （継承）
セレクタを指定し、設定されているスタイルを継承する
@mixin （ミックスイン）
（複数の）スタイルをひとまとめに定義し、任意の場所で呼び出す

69. よくあるケース

70. フォントサイズを rem, px で設定

71. _s のミックスインを利用する
Sass
CSS
mixins¥_mixins-master.scss
@mixin は @include で呼び出す

72. フォントサイズと行の高さを設定

73. _s のミックスインを利用する
変更できる箇所を引数で設定
（初期値：1.6）設定
_sのミックスインを読み込む
新しいルール（行の高さ）を指定
ミックスインを読み込む
ceil: 計算した結果を切り上げする関数
Sass
CSS

74. Webフォントを設定

75. Webフォントを行頭に表示
変更する箇所を引数で設定
初期値（フォント種別：f422、サイズ：1.6）
サイズを変更
最後の行のフォントを変更
他のミックスインを読み込む
Sass

76. CSS html
web

77. よく使う配色を設定

78. Sass
CSS
変数（メインカラー）に値を設定
変数（サブカラー）にメインカラーの補色を設定
complement: 引数の補色を返す
mystyleの
スタイルを継承
クラス（mystyle）を定義
背景色を変更
lighten: 明度を上げる
darken: 明度を下げる

79. @extend でグリッドを設定

80. 横幅全体を４等分して表示
html

81. でも任意のクラスを追加できない
そんな時あるよね？

82. @extend を使ってみる
html
web
Sass

83. まとめ
• 色やサイズをコピーした時、変数にすることを考えてみる！
• 同じスタイルを繰り返した時、@mixinが使えるか考えてみる！
• 配色やサイズを変えた時、関数や演算が使えるか考えてみる！
• とりあえず @extend できるか考えてみる！

84. おわり！