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/