View
878
Download
0
Category
Preview:
DESCRIPTION
HTML/CSSコーディングを取り巻くWeb開発環境は日々進化しています。Sass/LESS/StylusなどのCSSプリプロセッサと呼ばれるCSSをより便利に速く記述できるフレームワークが登場し、Webデザイナーにもプログラミング的な知識を求められるようになってきました。 この授業ではその中でもSassとその拡張フレームワークであるCompassを取り上げて解説します。Sass/Compassを使えば、面倒な記述、タイピングを少なくすることができ、コーディング速度を高めることができます。また、急なデザイン仕様の変更にも変数や継承と言ったSassの機能を使えば柔軟に対応することができます。 ただSassを使用するにあたって、いわゆる『黒い画面』、ターミナルを使って通常のCSSにコンパイル（変換）する作業を伴ったり、変数、ミックスイン、継承といったプログラミング的な概念も必要になってきます。 なにごとも新しいものを取り入れることは苦労を伴いますが、私自身、転職を機にWebデザイナーからWebデベロッパーに職種が変わりました。その時に戸惑いながらも自分なりのペースでSass/Compassを導入していった経験をこの授業を通して共有できれば幸いです。
Citation preview
Introduction to Sass/Compass for Web Designer
WebデザイナーのためのSass/Compass 入門
Ameba Headquarters Game Division
Web Developer Koji Ishimoto2013.09.27
@t32k
Web DesignerDesign, HTML/CSS
Web DirectorDirection, Google Analytics
Web DesignerDesign, HTML/CSS
Web DeveloperDevelopment, HTML/CSS/JavaScript
Web DirectorDirection, Google Analytics
Web DesignerDesign, HTML/CSS
<- イマココ2012/06 ~
Web DeveloperDevelopment, HTML/CSS/JavaScript
Web DirectorDirection, Google Analytics
Web DesignerDesign, HTML/CSS
AgendaなぜSassを使うのか？開発環境の構築Sass/Compassの機能
まとめ質疑応答
なぜSassを使うのか？
Sass makes CSS fun again. Sass is an extension of CSS3, adding nested rules, variables, mixins,selector inheritance, and more.
*.scss*.sass
*.cssSass Compiler
*.scss*.sass
*.cssSass Compiler
便利なSass
*.scss*.sass
*.cssSass Compiler
便利なSass 普通のCSS
無理して使う必要はない
学習コストの増加
学習コストの増加
開発環境の不一致
学習コストの増加
開発環境の不一致
コードの肥大化
Sassをキッカケにエンジニア文化を知る
Front-end
Engineer
HTML
JavaScript
DesignerCSS
Front-end
Engineer
JavaScript
DesignerCSS
Front-end
Engineer
JavaScript
Designer
Front-end
Engineer Designer
Terminal
Command Prompt
黒い画面を日常的に使っている人
Sass使いたい (ヽ́ ー` )ノ
Sass使いたい (ヽ́ ー` )ノ
黒い画面こわい(́ Д⊂ヽ
Sass使いたい (ヽ́ ー` )ノ
黒い画面こわい(́ Д⊂ヽ
GUIアプリ使う(・∀・)
Sass使いたい (ヽ́ ー` )ノ
黒い画面こわい(́ Д⊂ヽ
GUIアプリ使う(・∀・)
なんか違う、黒い画面使う(；́ Д` )
Sass使いたい (ヽ́ ー` )ノ
黒い画面こわい(́ Д⊂ヽ
GUIアプリ使う(・∀・)
なんか違う、黒い画面使う(；́ Д` )
ほかの場面でも使う( ･̀ω･́ )
Sass使いたい (ヽ́ ー` )ノ
黒い画面こわい(́ Д⊂ヽ
GUIアプリ使う(・∀・)
なんか違う、黒い画面使う(；́ Д` )
ほかの場面でも使う( ･̀ω･́ )
黒い画面最高 ＼(̂ o )̂／
https://github.com/t32k/maple
スプライト画像の生成
スタイルガイドの生成
Webフォントの生成
静的サーバー起動
ライブリロード
画像の最適化
CSSの縮小化
CSSのリント
CSSプロパティのソート
Sass/Compassのコンパイル
プロジェクトのスキャフォー
ルディング
Demo
エンジニアは怠け者
だが、それがいい！
開発環境の構築
必要なもの
テキストエディタ
Sassコンパイラ
好きなエディタって何ですか？
http://www.sublimetext.com/
https://github.com/t32k/Sublime-Text-2-Icon/tree/moreskine
Terminal
Terminal
Prepros
http://alphapixels.com/prepros/
Demo
http://sassmeister.com/
自分に合ったスタイルで無理せず導入する
Sass/Compassの機能
拡張フレームワークCompass
http://compass-style.org/
@import "compass";
Sass
@import "compass";
読み込みます！
Sass
何のファイルを？
@import "compass";
読み込みます！
Sass
Prepros
Prepros
変数Variables
＄
$hensu: #ffffff;
Sass
$hensu: #ffffff;
変数の接頭辞
Sass
$hensu: #ffffff;
変数の接頭辞
変数名
Sass
$hensu: #ffffff;
変数の接頭辞
変数名
値
Sass
// Comment$main-color: #cc0000;$space: 10px;.global-header { background-color: $main-color;}
.module { margin: $space * 2; padding: $space / 2;}
Sass
CSS
.global-header { background-color: #cc0000;}
.module { margin: 20px; padding: 5px;}
Variables変数を一元管理して使用すればスタイルに一貫性があり修正に強いサイトができる
変数
ネストNesting
｛ ｝
.oya { color: #000;
.kodomo { color: #111; .mago { color: #222; } }}
Sass
.oya { color: #000;
.kodomo { color: #111; .mago { color: #222; } }}
入れ子
Sass
.oya { color: #000;
.kodomo { color: #111; .mago { color: #222; } }}
入れ子
入れ子の入れ子
Sass
.oya { color: #000;
.kodomo { color: #111; .mago { color: #222; } }}
入れ子
入れ子の入れ子
入れ子の入れ子の入れ子
Sass
.oya { color: #000;}.oya .kodomo { color: #111;}.oya .kodomo .mago { color: #222;}
CSS
.oya { color: #000;}.oya .kodomo { color: #111;}.oya .kodomo .mago { color: #222;}
親のセレクタも適用
CSS
.oya { color: #000;}.oya .kodomo { color: #111;}.oya .kodomo .mago { color: #222;}
親のセレクタも適用
親のセレクタも適用
CSS
.login-module { padding: 10px; .headline { font: { family: bold; size: 18px; } } .sentence { color: #666; }}
Sass
.login-module { padding: 10px; .headline { font: { family: bold; size: 18px; } } .sentence { color: #666; }}
プロパティのネストも可能
Sass
.login-module { padding: 10px;}.login-module .headline { font-family: bold; font-size: 18px;}.login-module .sentence { color: #666;}
CSS
Nestingモジュール単位でCSSを管理する3階層以上ネストしてはいけない
ネスト
ミックスインMixins
@mixin@include
@mixin marumi($hankei) { -moz-border-radius: $hankei; -webkit-border-radius: $hankei; border-radius: $hankei;}.box { border: 1px #000 solid; @include marumi(4px);}
Sass
@mixin marumi($hankei) { -moz-border-radius: $hankei; -webkit-border-radius: $hankei; border-radius: $hankei;}.box { border: 1px #000 solid; @include marumi(4px);}
ミックスインの定義 Sass
@mixin marumi($hankei) { -moz-border-radius: $hankei; -webkit-border-radius: $hankei; border-radius: $hankei;}.box { border: 1px #000 solid; @include marumi(4px);}
ミックスイン名ミックスインの定義 Sass
@mixin marumi($hankei) { -moz-border-radius: $hankei; -webkit-border-radius: $hankei; border-radius: $hankei;}.box { border: 1px #000 solid; @include marumi(4px);}
ミックスイン名ミックスインの定義
引数
Sass
@mixin marumi($hankei) { -moz-border-radius: $hankei; -webkit-border-radius: $hankei; border-radius: $hankei;}.box { border: 1px #000 solid; @include marumi(4px);}
ミックスイン名ミックスインの定義
引数
ミックスインの呼び出し
Sass
.box { border: 1px #000 solid; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;}
CSS
.box { border: 1px #000 solid; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;}
ミックスインが展開された部分
CSS
.marui-marui { @include border-radius(4px);}
Sass
.marui-marui { -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px;}
CSS
Mixins最初からミックスインを作ろうとは思わないCompassのミックスインを研究してみる
ミックスイン
継承Selector Inheritance
@extend
@extend .keishooo;
Sass
継承します！
@extend .keishooo;
Sass
何のセレクタを？継承します！
@extend .keishooo;
Sass
.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
.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
継承元を指定
.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
.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継承したセレクタ
Selector Inheritanceモジュール単位でうまく継承できればコードを格段に削減することができる
継承
基本の機能をちゃんと理解する
まとめ
最初からスゴイことはできない
基本の積み重ねが応用になる
“その時”が来てからでは遅い 先行者はずっと先にいる
両方できるとカッコイイ(*́ ω` *)
次のステップのために
https://github.com/enja-oss/Sass
http://book.scss.jp/
http://prog4designer.github.io/
Thank you!
t32k@t32kkoji.ishimotoToday's latte, Sass. | Flickr by yukop
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/
Recommended