of 114 /114
Introduction to Sass/Compass for Web Designer Web デザイナーのための Sass/Compass 入門 Ameba Headquarters Game Division Web Developer Koji Ishimoto 2013.09.27

WebデザイナーのためのSass/Compass入門

  • Upload
    t32k

  • View
    878

  • Download
    0

Embed Size (px)

DESCRIPTION

HTML/CSSコーディングを取り巻くWeb開発環境は日々進化しています。Sass/LESS/StylusなどのCSSプリプロセッサと呼ばれるCSSをより便利に速く記述できるフレームワークが登場し、Webデザイナーにもプログラミング的な知識を求められるようになってきました。 この授業ではその中でもSassとその拡張フレームワークであるCompassを取り上げて解説します。Sass/Compassを使えば、面倒な記述、タイピングを少なくすることができ、コーディング速度を高めることができます。また、急なデザイン仕様の変更にも変数や継承と言ったSassの機能を使えば柔軟に対応することができます。 ただSassを使用するにあたって、いわゆる『黒い画面』、ターミナルを使って通常のCSSにコンパイル(変換)する作業を伴ったり、変数、ミックスイン、継承といったプログラミング的な概念も必要になってきます。 なにごとも新しいものを取り入れることは苦労を伴いますが、私自身、転職を機にWebデザイナーからWebデベロッパーに職種が変わりました。その時に戸惑いながらも自分なりのペースでSass/Compassを導入していった経験をこの授業を通して共有できれば幸いです。

Citation preview

Page 1: WebデザイナーのためのSass/Compass入門

Introduction to Sass/Compass for Web Designer

WebデザイナーのためのSass/Compass 入門

Ameba Headquarters Game Division

Web Developer Koji Ishimoto2013.09.27

Page 2: WebデザイナーのためのSass/Compass入門

@t32k

Page 3: WebデザイナーのためのSass/Compass入門

Web DesignerDesign, HTML/CSS

Page 4: WebデザイナーのためのSass/Compass入門

Web DirectorDirection, Google Analytics

Web DesignerDesign, HTML/CSS

Page 5: WebデザイナーのためのSass/Compass入門

Web DeveloperDevelopment, HTML/CSS/JavaScript

Web DirectorDirection, Google Analytics

Web DesignerDesign, HTML/CSS

Page 6: WebデザイナーのためのSass/Compass入門

<- イマココ2012/06 ~

Web DeveloperDevelopment, HTML/CSS/JavaScript

Web DirectorDirection, Google Analytics

Web DesignerDesign, HTML/CSS

Page 7: WebデザイナーのためのSass/Compass入門

AgendaなぜSassを使うのか?開発環境の構築Sass/Compassの機能

まとめ質疑応答

Page 8: WebデザイナーのためのSass/Compass入門

なぜSassを使うのか?

Page 10: WebデザイナーのためのSass/Compass入門

*.scss*.sass

*.cssSass Compiler

Page 11: WebデザイナーのためのSass/Compass入門

*.scss*.sass

*.cssSass Compiler

便利なSass

Page 12: WebデザイナーのためのSass/Compass入門

*.scss*.sass

*.cssSass Compiler

便利なSass 普通のCSS

Page 13: WebデザイナーのためのSass/Compass入門
Page 14: WebデザイナーのためのSass/Compass入門

無理して使う必要はない

Page 15: WebデザイナーのためのSass/Compass入門

学習コストの増加

Page 16: WebデザイナーのためのSass/Compass入門

学習コストの増加

開発環境の不一致

Page 17: WebデザイナーのためのSass/Compass入門

学習コストの増加

開発環境の不一致

コードの肥大化

Page 18: WebデザイナーのためのSass/Compass入門

Sassをキッカケにエンジニア文化を知る

Page 19: WebデザイナーのためのSass/Compass入門

Front-end

Engineer

HTML

JavaScript

DesignerCSS

Page 20: WebデザイナーのためのSass/Compass入門

Front-end

Engineer

JavaScript

DesignerCSS

Page 21: WebデザイナーのためのSass/Compass入門

Front-end

Engineer

JavaScript

Designer

Page 22: WebデザイナーのためのSass/Compass入門

Front-end

Engineer Designer

Page 23: WebデザイナーのためのSass/Compass入門

Terminal

Command Prompt

Page 24: WebデザイナーのためのSass/Compass入門

黒い画面を日常的に使っている人

Page 25: WebデザイナーのためのSass/Compass入門

Sass使いたい (ヽ́ ー` )ノ

Page 26: WebデザイナーのためのSass/Compass入門

Sass使いたい (ヽ́ ー` )ノ

黒い画面こわい(́ Д⊂ヽ

Page 27: WebデザイナーのためのSass/Compass入門

Sass使いたい (ヽ́ ー` )ノ

黒い画面こわい(́ Д⊂ヽ

GUIアプリ使う(・∀・)

Page 28: WebデザイナーのためのSass/Compass入門

Sass使いたい (ヽ́ ー` )ノ

黒い画面こわい(́ Д⊂ヽ

GUIアプリ使う(・∀・)

なんか違う、黒い画面使う(;́ Д` )

Page 29: WebデザイナーのためのSass/Compass入門

Sass使いたい (ヽ́ ー` )ノ

黒い画面こわい(́ Д⊂ヽ

GUIアプリ使う(・∀・)

なんか違う、黒い画面使う(;́ Д` )

ほかの場面でも使う( ・̀ω・́ )

Page 30: WebデザイナーのためのSass/Compass入門

Sass使いたい (ヽ́ ー` )ノ

黒い画面こわい(́ Д⊂ヽ

GUIアプリ使う(・∀・)

なんか違う、黒い画面使う(;́ Д` )

ほかの場面でも使う( ・̀ω・́ )

黒い画面最高 \(̂ o )̂/

Page 32: WebデザイナーのためのSass/Compass入門

スプライト画像の生成

スタイルガイドの生成

Webフォントの生成

静的サーバー起動

ライブリロード

画像の最適化

CSSの縮小化

CSSのリント

CSSプロパティのソート

Sass/Compassのコンパイル

プロジェクトのスキャフォー

ルディング

Page 33: WebデザイナーのためのSass/Compass入門

Demo

Page 34: WebデザイナーのためのSass/Compass入門

エンジニアは怠け者

Page 35: WebデザイナーのためのSass/Compass入門

だが、それがいい!

Page 36: WebデザイナーのためのSass/Compass入門

開発環境の構築

Page 37: WebデザイナーのためのSass/Compass入門

必要なもの

テキストエディタ

Sassコンパイラ

Page 38: WebデザイナーのためのSass/Compass入門

好きなエディタって何ですか?

Page 41: WebデザイナーのためのSass/Compass入門

Terminal

Page 42: WebデザイナーのためのSass/Compass入門

Terminal

Page 43: WebデザイナーのためのSass/Compass入門

Prepros

Page 45: WebデザイナーのためのSass/Compass入門

Demo

Page 47: WebデザイナーのためのSass/Compass入門

自分に合ったスタイルで無理せず導入する

Page 48: WebデザイナーのためのSass/Compass入門

Sass/Compassの機能

Page 52: WebデザイナーのためのSass/Compass入門

変数

ネスト

ミックスイン

Page 53: WebデザイナーのためのSass/Compass入門

変数

継承ネスト

ミックスイン

Page 54: WebデザイナーのためのSass/Compass入門

変数

継承ネスト

ミックスイン

+

Page 55: WebデザイナーのためのSass/Compass入門

拡張フレームワークCompass

Page 57: WebデザイナーのためのSass/Compass入門

@import "compass";

Sass

Page 58: WebデザイナーのためのSass/Compass入門

@import "compass";

読み込みます!

Sass

Page 59: WebデザイナーのためのSass/Compass入門

何のファイルを?

@import "compass";

読み込みます!

Sass

Page 60: WebデザイナーのためのSass/Compass入門

Prepros

Page 61: WebデザイナーのためのSass/Compass入門

Prepros

Page 62: WebデザイナーのためのSass/Compass入門

変数Variables

Page 63: WebデザイナーのためのSass/Compass入門

$hensu: #ffffff;

Sass

Page 64: WebデザイナーのためのSass/Compass入門

$hensu: #ffffff;

変数の接頭辞

Sass

Page 65: WebデザイナーのためのSass/Compass入門

$hensu: #ffffff;

変数の接頭辞

変数名

Sass

Page 66: WebデザイナーのためのSass/Compass入門

$hensu: #ffffff;

変数の接頭辞

変数名

Sass

Page 67: WebデザイナーのためのSass/Compass入門

// Comment$main-color: #cc0000;$space: 10px;.global-header { background-color: $main-color;}

.module { margin: $space * 2; padding: $space / 2;}

Sass

Page 68: WebデザイナーのためのSass/Compass入門

CSS

.global-header { background-color: #cc0000;}

.module { margin: 20px; padding: 5px;}

Page 69: WebデザイナーのためのSass/Compass入門

Variables変数を一元管理して使用すればスタイルに一貫性があり修正に強いサイトができる

変数

Page 70: WebデザイナーのためのSass/Compass入門

ネストNesting

{ }

Page 71: WebデザイナーのためのSass/Compass入門

.oya { color: #000;

.kodomo { color: #111; .mago { color: #222; } }}

Sass

Page 72: WebデザイナーのためのSass/Compass入門

.oya { color: #000;

.kodomo { color: #111; .mago { color: #222; } }}

入れ子

Sass

Page 73: WebデザイナーのためのSass/Compass入門

.oya { color: #000;

.kodomo { color: #111; .mago { color: #222; } }}

入れ子

入れ子の入れ子

Sass

Page 74: WebデザイナーのためのSass/Compass入門

.oya { color: #000;

.kodomo { color: #111; .mago { color: #222; } }}

入れ子

入れ子の入れ子

入れ子の入れ子の入れ子

Sass

Page 75: WebデザイナーのためのSass/Compass入門

.oya { color: #000;}.oya .kodomo { color: #111;}.oya .kodomo .mago { color: #222;}

CSS

Page 76: WebデザイナーのためのSass/Compass入門

.oya { color: #000;}.oya .kodomo { color: #111;}.oya .kodomo .mago { color: #222;}

親のセレクタも適用

CSS

Page 77: WebデザイナーのためのSass/Compass入門

.oya { color: #000;}.oya .kodomo { color: #111;}.oya .kodomo .mago { color: #222;}

親のセレクタも適用

親のセレクタも適用

CSS

Page 78: WebデザイナーのためのSass/Compass入門

.login-module { padding: 10px; .headline { font: { family: bold; size: 18px; } } .sentence { color: #666; }}

Sass

Page 79: WebデザイナーのためのSass/Compass入門

.login-module { padding: 10px; .headline { font: { family: bold; size: 18px; } } .sentence { color: #666; }}

プロパティのネストも可能

Sass

Page 80: WebデザイナーのためのSass/Compass入門

.login-module { padding: 10px;}.login-module .headline { font-family: bold; font-size: 18px;}.login-module .sentence { color: #666;}

CSS

Page 81: WebデザイナーのためのSass/Compass入門

Nestingモジュール単位でCSSを管理する3階層以上ネストしてはいけない

ネスト

Page 82: WebデザイナーのためのSass/Compass入門

ミックスインMixins

@mixin@include

Page 83: WebデザイナーのためのSass/Compass入門

@mixin marumi($hankei) { -moz-border-radius: $hankei; -webkit-border-radius: $hankei; border-radius: $hankei;}.box { border: 1px #000 solid; @include marumi(4px);}

Sass

Page 84: WebデザイナーのためのSass/Compass入門

@mixin marumi($hankei) { -moz-border-radius: $hankei; -webkit-border-radius: $hankei; border-radius: $hankei;}.box { border: 1px #000 solid; @include marumi(4px);}

ミックスインの定義 Sass

Page 85: WebデザイナーのためのSass/Compass入門

@mixin marumi($hankei) { -moz-border-radius: $hankei; -webkit-border-radius: $hankei; border-radius: $hankei;}.box { border: 1px #000 solid; @include marumi(4px);}

ミックスイン名ミックスインの定義 Sass

Page 86: WebデザイナーのためのSass/Compass入門

@mixin marumi($hankei) { -moz-border-radius: $hankei; -webkit-border-radius: $hankei; border-radius: $hankei;}.box { border: 1px #000 solid; @include marumi(4px);}

ミックスイン名ミックスインの定義

引数

Sass

Page 87: WebデザイナーのためのSass/Compass入門

@mixin marumi($hankei) { -moz-border-radius: $hankei; -webkit-border-radius: $hankei; border-radius: $hankei;}.box { border: 1px #000 solid; @include marumi(4px);}

ミックスイン名ミックスインの定義

引数

ミックスインの呼び出し

Sass

Page 88: WebデザイナーのためのSass/Compass入門

.box { border: 1px #000 solid; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;}

CSS

Page 89: WebデザイナーのためのSass/Compass入門

.box { border: 1px #000 solid; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;}

ミックスインが展開された部分

CSS

Page 90: WebデザイナーのためのSass/Compass入門

.marui-marui { @include border-radius(4px);}

Sass

Page 91: WebデザイナーのためのSass/Compass入門

.marui-marui { -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px;}

CSS

Page 92: WebデザイナーのためのSass/Compass入門

Mixins最初からミックスインを作ろうとは思わないCompassのミックスインを研究してみる

ミックスイン

Page 93: WebデザイナーのためのSass/Compass入門

継承Selector Inheritance

@extend

Page 94: WebデザイナーのためのSass/Compass入門

@extend .keishooo;

Sass

Page 95: WebデザイナーのためのSass/Compass入門

継承します!

@extend .keishooo;

Sass

Page 96: WebデザイナーのためのSass/Compass入門

何のセレクタを?継承します!

@extend .keishooo;

Sass

Page 97: WebデザイナーのためのSass/Compass入門

.message-box { padding: 5px 10px; border: 1px black solid; font-size: 14px; font-weight: bold;}

.alert-box { @extend .message-box; border: 1px red solid; color: red;}

Sass

Page 98: WebデザイナーのためのSass/Compass入門

.message-box { padding: 5px 10px; border: 1px black solid; font-size: 14px; font-weight: bold;}

.alert-box { @extend .message-box; border: 1px red solid; color: red;}

Sass

継承元を指定

Page 99: WebデザイナーのためのSass/Compass入門

.message-box, .alert-box { padding: 5px 10px; border: 1px black solid; font-size: 14px; font-weight: bold;}

.alert-box { border: 1px red solid; color: red;}

CSS

Page 100: WebデザイナーのためのSass/Compass入門

.message-box, .alert-box { padding: 5px 10px; border: 1px black solid; font-size: 14px; font-weight: bold;}

.alert-box { border: 1px red solid; color: red;}

CSS継承したセレクタ

Page 101: WebデザイナーのためのSass/Compass入門

Selector Inheritanceモジュール単位でうまく継承できればコードを格段に削減することができる

継承

Page 102: WebデザイナーのためのSass/Compass入門

基本の機能をちゃんと理解する

Page 103: WebデザイナーのためのSass/Compass入門

まとめ

Page 104: WebデザイナーのためのSass/Compass入門

最初からスゴイことはできない

Page 105: WebデザイナーのためのSass/Compass入門

基本の積み重ねが応用になる

Page 106: WebデザイナーのためのSass/Compass入門
Page 107: WebデザイナーのためのSass/Compass入門

“その時”が来てからでは遅い 先行者はずっと先にいる

Page 108: WebデザイナーのためのSass/Compass入門

両方できるとカッコイイ(*́ ω` *)

Page 109: WebデザイナーのためのSass/Compass入門

次のステップのために

Page 114: WebデザイナーのためのSass/Compass入門

Photo Credithttp://www.flickr.com/photos/eneas/2522135992/

http://www.flickr.com/photos/morch/3427998257/

http://www.flickr.com/photos/alper/9311087323/

http://www.flickr.com/photos/krakow81/287771868/

http://www.flickr.com/photos/39463459@N08/3678526285/

http://www.flickr.com/photos/eurich/6959899839/

http://www.flickr.com/photos/burningredstudio/5080766621/