Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Foundation の
 Sass を使いはじめた人と
使いたいと考えている人へ
ゆるゆるカフェ
2015年01月10日
自己紹介
名前 三柴 誠一郎
職業 フリーランス(34デザインねっと)
仕事 Web制作のディレクション、デザイン、コーディング
経歴 サラリーマン(IT業界)17年 ⇒ ニート9ヶ月 ⇒ フリーランス1年
趣味 カメラ、 旅、 料理、 滝めぐ...
本日のテーマ
①Sassって何?どんな事ができる?
②Foundationの基本機能

 - レスポンシブサイト制作編 -
③Sassの環境づくり - _s & Foundation -
④Sassの機能を使ってみよう
はじめに
Sass本体のインストール方法は
本セッション内では説明いたしません。
いろいろなサイト・書籍で詳しく解説して
いると思いますので、そちらを参考に
Windows,Mac,Linux,GUI,CUIなど
ご自身の環境や状態に合わせご準備ください。
Chapter 1
 Sassって何?
どんな事ができる?
Sassについて
Sassのバージョン
バージョン リリース 概要
3.4.9 最新 2014年11月24日
3.4.0 2014年08月18日
Using & in SassScript, Selector Functions,
Smaller Improve...
Sassの公式サイト
Sassは世界で最も安定し、成熟した、
パワフルなプロ級のCSSの拡張言語
http://sass-lang.com
言葉の意味はわからんが
とにかくすごい自信だ!
どんな機能がある?
Sassの機能 - 基本機能編 -
1.ルールのネスト
2.親セレクタの参照
3.プロパティのネスト
4.プレースホルダー
ルールのネスト
 スタイルを入れ子で書くことができます
親セレクタの参照
 アンパサンド(&)を書くことで親セレクタを参照できます
プロパティのネスト
 プロパティもネストで書くことができます
プレースフォルダ
 CSSとして生成しないセレクタ...
ルールのネスト?
Sass
CSS
コンパイル
コンパイル
Sass
CSS
@mediaもネストできる
親セレクタの参照?
Sass
親セレクタ参照
・疑似クラスの前
・セレクタの結合
親セレクタ参照
・子セレクタの後
CSS
コンパイル
Sass
CSS
コンパイル
親セレクタ参照
・親セレクタ名を子セレクタ名に結合
※Sass3.3.0以降
プロパティのネスト?
Sass
コンパイル
プロパティのネスト
CSS
プレースホルダー?
@extend と一緒に使う・・・
Chapter4で説明します
Chapter1のまとめ
Sassの機能(ネストやアンパサンド(&) )を利用す
ることで、記述量が減りメンテナンス性が向上す
同じセレクタに記述することで、関係性が解りやす
く可読性が向上する
Chapter 2
Foundation の基本機能
- レスポンシブサイト制作編 -
レスポンシブサイト制作でよく使うやつ
Visibility 表示・非表示
Grid グリッド
Block Grid ブロックグリッド
使い方〜Visibility〜
画面サイズ(横幅)によって、表示・非表示を制限
html
PC
タブレット
スマホ 1行目だけ表示される
初期値:
 small - 横幅40emまで
 medium - 横幅64emまで
 large - 横幅...
使い方〜Grid〜
レイアウトを均等に分割し、
コンテンツをマス目上に配置することができる
初期値:
 横幅1000px
 分割数12
row 分割するコンテンツを挟む
columns 分割するコンテンツ
large-? おもにPC用の分割数
...
見え方PC
タブレット
スマホ
largeが縦に
mediumとsmallは
指定した分割数で配置
largeとmediumが縦に
smallは指定した分割数で配置
Chapter 3
Sass の環境づくり
- _s & Foundation -
Sass対応版の _s
を入手する
サイトへアクセス
以下にアクセス!
http://underscores.me/
①テーマ名を入力して ②クリック!
Sass対応版は
ココをチェック!
ダウンロードして解凍
Sass対応版のFoundation
を入手する
サイトへアクセス
以下にアクセス!
http://foundation.zurb.com/
①クリック!
メニューを選択
Sass対応版は
この先を参照
インストール方法を選択
推奨インストール(CLI) or 手動でダウンロード
推奨されているやつ
コマンドでインストール - 準備編 -
npm install -g bower grunt-cli
簡単なコマンドを2つ叩くだけだよ
gem install foundation
・・・コマンド? ねえ、難しい?
難しい?
Foundatio...
- プロジェクトを開始する -
foundation new my_project
ねえ、ねえ、ねえ?
コマンドを1つくだけだよ
ねえ、難しい?
Foundation 環境がインストールされる
※前作業が終わっていて、かつCompassを使う
...
いろいろダウンロードされる
この画面では見えないけど・・・
Gitのリポジトリとかも 作られる
たくさんスタイルがココに入っている
例) WordPressの環境で実行
例)Mac + MAMP + WordPress で
yuru2cafeというプロジェクト(テーマ)を作成する場合
cd wp-content/themesでテーマディレクトリへ移動
foundation ...
推奨されていないやつ?
手動でダウンロード
①Githubからダウンロード
②bower_componentsって
ディレクトリを作成
③Githubからダウンロード
④foundationって名前に変える
こんな感じになる
①Github Foundation Compass Template
 からダウンロード
②作成したディレクトリ
③Github Foundation Bower Package
 からダウンロード
④名前変更したディレクト...
めんど∀.¬$%)Q・・・
入手したファイルを
自分の環境に合わせて設定する
こんな感じがいい感じ?
コンテンツの内容は_sのファイルを利用
デザイン(配置、配色など)はFoundationを利用
Foundationのバージョンアップも簡単に
例) 環境づくり①
①テーマフォルダ(wp-content/themes)で
foundation new yuru2cafe
Sass対応版Foundation環境を作成
例)yuru2cafeというプロジェクト(テーマ)を作成する場合
例) 環境づくり②
②_sでダウンロードしたファイルをコピー(追加)
Foundation
_s
_s
_sのjs配下のファイルを
Foundationのjs配下に追加
_sのsass配下のファイルを
Foundationのscss配下に追加
...
例) 環境づくり③
③scss配下を整理する
app.scss を _app.scss に変更
style.scss を _s.scss に変更
_customize.scss を新規作成
style.scss を新規作成
まとめ
ファイル名 用途
_app.scss
Foundationの利用する機能を選択(@import)
※初期は全機能がインポートされている
_cuttomize.scss
オリジナルのルールを記述していくファイル
※名称やファイルの分け方は...
補足)設定ファイルをカスタマイズ
例) style.scss のカスタマイズ
_s の Sass を読み込み
Foundation の Sass を読み込み
他の Sass を読み込み
オリジナルの Sass を読み込み
_s の設定ファイルをカスタマイズ
_s.scss を編集して機能を選択
_s で定義されている変数を呼び出し
_s で定義されているミックスインを呼び出し
リセットCSSを呼び出し
※他のリセットCSSを利用する場合はコメントアウト
呼び出す(@import)する
パーシャルフ...
_s で定義されている変数の値を変更
• variables-site/_colors.scss

背景、テキスト、リンク、ボタンのカラーが定義されている
• variables-site/_structure.scss

メインの幅とサイドバ...
でも・・・ここで変更しても
Foundationと同じセレクタに
設定されるスタイルは無効・・・
変数名 初期値 インクルード先
variables-site/_colors.scss
$color__background-body #fff _reset.scss
$color__background-screen #f1f1f1 mod...
変数名 初期値 インクルード先
variables-site/_colors.scss(つづき)
$color__border-button #ccc #ccc #bbb forms/_buttons.scss
$color__border-b...
Foundation の設定ファイルを
カスタマイズ
_app.scss を編集して機能を選択
Foundation で定義されている変数を呼び出し
初期状態は全機能を呼び出している
※個別に機能を選択する場合は
 コメントアウトする
機能を選択する場合はコメントアウト
を外し、これ移行の行で使用...
例) _app.scss を編集
Foundation で定義されている
変数の値を変更
• _setting.scss

(項番a〜e)サイズ、カラー、グリッドの分割数など基本的
な値が定義されている

(項番01〜36)各機能ごとの値が定義されている
• コメントアウトされ...
例) _settings.scss を変更
rowを指定した際の横幅 1200px
グリッドの分割数 24
余白 0
Chapter 4
Sassの機能を使ってみよう
6-2. Variables: $ (変数)
6-6. Functions (関数)
7-3. @extend (継承)
9. Mixin Directives (ミックスイン)
最低覚えておきたいSassの機能
Variables: $ (変数)
 変数に値を設定し、任意の場所で変数名を参照し値を呼び出す
Function (関数)
 引数から値を受け取って一定の処理を実行して値を返す
@extend (継承)
 セレクタを指定し、設定されているスタイ...
よくあるケース
フォントサイズを rem, px で設定
_s のミックスインを利用する
Sass
CSS
mixins¥_mixins-master.scss
@mixin は @include で呼び出す
フォントサイズと行の高さを設定
_s のミックスインを利用する
変更できる箇所を引数で設定
(初期値:1.6)設定
_sのミックスインを読み込む
新しいルール(行の高さ)を指定
ミックスインを読み込む
ceil: 計算した結果を切り上げする関数
Sass
CSS
Webフォントを設定
Webフォントを行頭に表示
変更する箇所を引数で設定
初期値(フォント種別:f422、サイズ:1.6)
サイズを変更
最後の行のフォントを変更
他のミックスインを読み込む
Sass
CSS html
web
よく使う配色を設定
Sass
CSS
変数(メインカラー)に値を設定
変数(サブカラー)にメインカラーの補色を設定
complement: 引数の補色を返す
mystyleの
スタイルを継承
クラス(mystyle)を定義
背景色を変更
lighten: 明度を上...
@extend でグリッドを設定
横幅全体を4等分して表示
html
でも任意のクラスを追加できない
そんな時あるよね?
@extend を使ってみる
html
web
Sass
まとめ
• 色やサイズをコピーした時、変数にすることを考えてみる!
• 同じスタイルを繰り返した時、@mixinが使えるか考えてみる!
• 配色やサイズを変えた時、関数や演算が使えるか考えてみる!
• とりあえず @extend できるか考えて...
おわり!
Upcoming SlideShare
Loading in …5
×

FoundationのSassを使いはじめた人と使いたいと考えている人へ

4,367 views

Published on

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

Published in: Internet
  • Be the first to comment

FoundationのSassを使いはじめた人と使いたいと考えている人へ

  1. 1. Foundation の  Sass を使いはじめた人と 使いたいと考えている人へ ゆるゆるカフェ 2015年01月10日
  2. 2. 自己紹介 名前 三柴 誠一郎 職業 フリーランス(34デザインねっと) 仕事 Web制作のディレクション、デザイン、コーディング 経歴 サラリーマン(IT業界)17年 ⇒ ニート9ヶ月 ⇒ フリーランス1年 趣味 カメラ、 旅、 料理、 滝めぐり、 ダムめぐり、 城めぐり 特徴 絶望的に方向音痴
  3. 3. 本日のテーマ ①Sassって何?どんな事ができる? ②Foundationの基本機能
  - レスポンシブサイト制作編 - ③Sassの環境づくり - _s & Foundation - ④Sassの機能を使ってみよう
  4. 4. はじめに
  5. 5. Sass本体のインストール方法は 本セッション内では説明いたしません。 いろいろなサイト・書籍で詳しく解説して いると思いますので、そちらを参考に Windows,Mac,Linux,GUI,CUIなど ご自身の環境や状態に合わせご準備ください。
  6. 6. Chapter 1  Sassって何? どんな事ができる?
  7. 7. Sassについて
  8. 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. 9. Sassの公式サイト Sassは世界で最も安定し、成熟した、 パワフルなプロ級のCSSの拡張言語 http://sass-lang.com
  10. 10. 言葉の意味はわからんが とにかくすごい自信だ!
  11. 11. どんな機能がある?
  12. 12. Sassの機能 - 基本機能編 - 1.ルールのネスト 2.親セレクタの参照 3.プロパティのネスト 4.プレースホルダー
  13. 13. ルールのネスト  スタイルを入れ子で書くことができます 親セレクタの参照  アンパサンド(&)を書くことで親セレクタを参照できます プロパティのネスト  プロパティもネストで書くことができます プレースフォルダ  CSSとして生成しないセレクタを書くことができます
  14. 14. ルールのネスト?
  15. 15. Sass CSS コンパイル
  16. 16. コンパイル Sass CSS @mediaもネストできる
  17. 17. 親セレクタの参照?
  18. 18. Sass 親セレクタ参照 ・疑似クラスの前 ・セレクタの結合 親セレクタ参照 ・子セレクタの後 CSS コンパイル
  19. 19. Sass CSS コンパイル 親セレクタ参照 ・親セレクタ名を子セレクタ名に結合 ※Sass3.3.0以降
  20. 20. プロパティのネスト?
  21. 21. Sass コンパイル プロパティのネスト CSS
  22. 22. プレースホルダー?
  23. 23. @extend と一緒に使う・・・ Chapter4で説明します
  24. 24. Chapter1のまとめ Sassの機能(ネストやアンパサンド(&) )を利用す ることで、記述量が減りメンテナンス性が向上す 同じセレクタに記述することで、関係性が解りやす く可読性が向上する
  25. 25. Chapter 2 Foundation の基本機能 - レスポンシブサイト制作編 -
  26. 26. レスポンシブサイト制作でよく使うやつ Visibility 表示・非表示 Grid グリッド Block Grid ブロックグリッド
  27. 27. 使い方〜Visibility〜 画面サイズ(横幅)によって、表示・非表示を制限 html PC タブレット スマホ 1行目だけ表示される 初期値:  small - 横幅40emまで  medium - 横幅64emまで  large - 横幅90emまで 2、3行目が表示される 2、4、5行目が表示される
  28. 28. 使い方〜Grid〜 レイアウトを均等に分割し、 コンテンツをマス目上に配置することができる 初期値:  横幅1000px  分割数12 row 分割するコンテンツを挟む columns 分割するコンテンツ large-? おもにPC用の分割数 medium-? おもにタブレット用の分割数 small-? おもにスマホ用の分割数 初期値:  small - 横幅40emまで  medium - 横幅64emまで  large - 横幅90emまで html
  29. 29. 見え方PC タブレット スマホ largeが縦に mediumとsmallは 指定した分割数で配置 largeとmediumが縦に smallは指定した分割数で配置
  30. 30. Chapter 3 Sass の環境づくり - _s & Foundation -
  31. 31. Sass対応版の _s を入手する
  32. 32. サイトへアクセス 以下にアクセス! http://underscores.me/ ①テーマ名を入力して ②クリック! Sass対応版は ココをチェック!
  33. 33. ダウンロードして解凍
  34. 34. Sass対応版のFoundation を入手する
  35. 35. サイトへアクセス 以下にアクセス! http://foundation.zurb.com/ ①クリック!
  36. 36. メニューを選択 Sass対応版は この先を参照
  37. 37. インストール方法を選択 推奨インストール(CLI) or 手動でダウンロード
  38. 38. 推奨されているやつ
  39. 39. コマンドでインストール - 準備編 - npm install -g bower grunt-cli 簡単なコマンドを2つ叩くだけだよ gem install foundation ・・・コマンド? ねえ、難しい? 難しい? Foundation5で利用している bower (パッケージマネージャ)がインストールされる Foundation のCLI(コマンド)が使えるようになる
  40. 40. - プロジェクトを開始する - foundation new my_project ねえ、ねえ、ねえ? コマンドを1つくだけだよ ねえ、難しい? Foundation 環境がインストールされる ※前作業が終わっていて、かつCompassを使う  (使える状態)状態である場合
  41. 41. いろいろダウンロードされる この画面では見えないけど・・・ Gitのリポジトリとかも 作られる たくさんスタイルがココに入っている
  42. 42. 例) WordPressの環境で実行 例)Mac + MAMP + WordPress で yuru2cafeというプロジェクト(テーマ)を作成する場合 cd wp-content/themesでテーマディレクトリへ移動 foundation new yuru2cafeでプロジェクト作成
  43. 43. 推奨されていないやつ?
  44. 44. 手動でダウンロード ①Githubからダウンロード ②bower_componentsって ディレクトリを作成 ③Githubからダウンロード ④foundationって名前に変える
  45. 45. こんな感じになる ①Github Foundation Compass Template  からダウンロード ②作成したディレクトリ ③Github Foundation Bower Package  からダウンロード ④名前変更したディレクトリ この画面では見えないけど・・・ Gitの設定ファイルとかもある
  46. 46. めんど∀.¬$%)Q・・・
  47. 47. 入手したファイルを 自分の環境に合わせて設定する
  48. 48. こんな感じがいい感じ? コンテンツの内容は_sのファイルを利用 デザイン(配置、配色など)はFoundationを利用 Foundationのバージョンアップも簡単に
  49. 49. 例) 環境づくり① ①テーマフォルダ(wp-content/themes)で foundation new yuru2cafe Sass対応版Foundation環境を作成 例)yuru2cafeというプロジェクト(テーマ)を作成する場合
  50. 50. 例) 環境づくり② ②_sでダウンロードしたファイルをコピー(追加) Foundation _s _s _sのjs配下のファイルを Foundationのjs配下に追加 _sのsass配下のファイルを Foundationのscss配下に追加 _s Foundation
  51. 51. 例) 環境づくり③ ③scss配下を整理する app.scss を _app.scss に変更 style.scss を _s.scss に変更 _customize.scss を新規作成 style.scss を新規作成
  52. 52. まとめ ファイル名 用途 _app.scss Foundationの利用する機能を選択(@import) ※初期は全機能がインポートされている _cuttomize.scss オリジナルのルールを記述していくファイル ※名称やファイルの分け方は任意 _reset.scss リセットCSS ※_s.scss からインポートされる _s.scss _sの利用する機能を選択(@import) ※初期は全機能がインポートされている _settings.scss Foundationのカスタマイズ ※_app.scss からインポートされる style.scss 各ファイル(パーシャルファイル)をインポートする ※基本ルールは記述しない
  53. 53. 補足)設定ファイルをカスタマイズ
  54. 54. 例) style.scss のカスタマイズ _s の Sass を読み込み Foundation の Sass を読み込み 他の Sass を読み込み オリジナルの Sass を読み込み
  55. 55. _s の設定ファイルをカスタマイズ
  56. 56. _s.scss を編集して機能を選択 _s で定義されている変数を呼び出し _s で定義されているミックスインを呼び出し リセットCSSを呼び出し ※他のリセットCSSを利用する場合はコメントアウト 呼び出す(@import)する パーシャルファイル(_ファイル名.scss)を選択 これ以降の行を編集 ※不要の場合はコメントアウト
  57. 57. _s で定義されている変数の値を変更 • variables-site/_colors.scss
 背景、テキスト、リンク、ボタンのカラーが定義されている • variables-site/_structure.scss
 メインの幅とサイドバーの幅が定義されている • variables-site/_typography.scss
 フォントと行の高さが定義されている
  58. 58. でも・・・ここで変更しても Foundationと同じセレクタに 設定されるスタイルは無効・・・
  59. 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. 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. 61. Foundation の設定ファイルを カスタマイズ
  62. 62. _app.scss を編集して機能を選択 Foundation で定義されている変数を呼び出し 初期状態は全機能を呼び出している ※個別に機能を選択する場合は  コメントアウトする 機能を選択する場合はコメントアウト を外し、これ移行の行で使用する ※使用する機能のコメントアウトを外す
  63. 63. 例) _app.scss を編集
  64. 64. Foundation で定義されている 変数の値を変更 • _setting.scss
 (項番a〜e)サイズ、カラー、グリッドの分割数など基本的 な値が定義されている
 (項番01〜36)各機能ごとの値が定義されている • コメントアウトされた状態では変数として有効にならない
  65. 65. 例) _settings.scss を変更 rowを指定した際の横幅 1200px グリッドの分割数 24 余白 0
  66. 66. Chapter 4 Sassの機能を使ってみよう
  67. 67. 6-2. Variables: $ (変数) 6-6. Functions (関数) 7-3. @extend (継承) 9. Mixin Directives (ミックスイン) 最低覚えておきたいSassの機能
  68. 68. Variables: $ (変数)  変数に値を設定し、任意の場所で変数名を参照し値を呼び出す Function (関数)  引数から値を受け取って一定の処理を実行して値を返す @extend (継承)  セレクタを指定し、設定されているスタイルを継承する @mixin (ミックスイン)  (複数の)スタイルをひとまとめに定義し、任意の場所で呼び出す
  69. 69. よくあるケース
  70. 70. フォントサイズを rem, px で設定
  71. 71. _s のミックスインを利用する Sass CSS mixins¥_mixins-master.scss @mixin は @include で呼び出す
  72. 72. フォントサイズと行の高さを設定
  73. 73. _s のミックスインを利用する 変更できる箇所を引数で設定 (初期値:1.6)設定 _sのミックスインを読み込む 新しいルール(行の高さ)を指定 ミックスインを読み込む ceil: 計算した結果を切り上げする関数 Sass CSS
  74. 74. Webフォントを設定
  75. 75. Webフォントを行頭に表示 変更する箇所を引数で設定 初期値(フォント種別:f422、サイズ:1.6) サイズを変更 最後の行のフォントを変更 他のミックスインを読み込む Sass
  76. 76. CSS html web
  77. 77. よく使う配色を設定
  78. 78. Sass CSS 変数(メインカラー)に値を設定 変数(サブカラー)にメインカラーの補色を設定 complement: 引数の補色を返す mystyleの スタイルを継承 クラス(mystyle)を定義 背景色を変更 lighten: 明度を上げる darken: 明度を下げる
  79. 79. @extend でグリッドを設定
  80. 80. 横幅全体を4等分して表示 html
  81. 81. でも任意のクラスを追加できない そんな時あるよね?
  82. 82. @extend を使ってみる html web Sass
  83. 83. まとめ • 色やサイズをコピーした時、変数にすることを考えてみる! • 同じスタイルを繰り返した時、@mixinが使えるか考えてみる! • 配色やサイズを変えた時、関数や演算が使えるか考えてみる! • とりあえず @extend できるか考えてみる!
  84. 84. おわり!

×