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.
今日から使える!
Sass/Compass ゆるめ勉強会
2013.11.17
自己紹介
‣

ノジマユウジ

‣

株式会社フォーエンキー
代表
絶賛
お仕事
募集中

●

●

●

●

●

●

Android/iOSアプリ
Webアプリ/WordPress
Winデスクトップアプリ
Web制作全般
グラフィッ...
自己紹介

@yuka2py

実体

良い子 ほぼ留守

書籍を執筆しました。
JavaScript についても基礎から
応用・発展まで詳しく書かれています。
良かったら書店で手に取ってください。

http://www.amazon.co....
最近のボク

Web/WordPress
Windows
Android/iOS
Design
Python

2013年10月31日
株式会社フォーエンキー調べ

Python
2%
Design
8% Web/WordPress
28%
A...
   最近のボク(ホント)

Web/WordPress
Windows
Android/iOS
Design
Python
お嫁

2013年10月31日
株式会社フォーエンキー調べ

愛

Web/WordPress
14%
Windows...
はじめに
本セッションでは、Sass/Compassの概要とツールとの関
連、またその基礎的な構文を紹介します。またデザイナー
の方でも実践しやすいように「Prepros」というGUIツー
ルの使用法も解説しています。
対象者
・まだ Sass...
ご注意
本セッションでは簡単の為に、Sass中の「Scss」記法を
「Sass」として取り扱い、またほとんどの箇所でその点に
ついて特には言及しません。
この資料だけ読まれる方へ
本資料はハンズオン前の解説のためのものですので、解説
資料として...
(*'-'*)
What’s Sass?
Sass is the most mature, stable, and powerful
professional grade CSS extension language in the world.

http:/...
most mature, stable,
and powerful
なるほど。もっとも成熟して、安定して、パワフルな…
professional grade
CSS extension language
in the world.
プロフェッショナル級の CSS 拡張言語!
(́・ω・`)ウー...
What’s Compass?
Compass is an open-source CSS Authoring Framework.

http://compass-style.org/
Open-source
CSS Authoring Framework.
なるほど。こちらはオーサリングの為のフレームワークね。
(́・ω・`)...
よくわかんない?
(́・ω・`)エッ...
よくわかんないの?
ウ.. (́・ω・`))́-ω-`)) ウン...
じゃあ、難しいことは
明日にしちゃおうか?
(・ω・)
(*^-^)うん!
「明日」って言葉が好き♪
という皆さんに、
本日はお集りいただいたハズです!

違ってたら申し訳なく思います。 (́・ω・`)(́-ω-`)) ペコリ
でももうどうあがいても本日の内容はこんな感じです。
でも、
朗報
今日、PCがあって実践できる方は、
たぶん Sass お持ち帰りできます。

出来なかったら、すまないと思いたいと思います。
(́・ω・`)(́-ω-`)) ペコリ
なぜなら、
Sassは、ワリと簡単だから!
僕の周りのデザイナーさんでは、やはり環境構築で躊躇される方が多い感じです。
また、高度なことをしようとすると、少しずつ難しくなります。でもとっかかりは
簡単です。そしてとっかかりだけでも、Sass は強力な武器に...
(*゚д゚*)
で、そもそもなんですが…
CSSってメンドクサイ
CSS
.post { ... }
.post header { ... }
.post header > h1 { ... }
.post header .post-meta { ... }
.post header .author-meta...
何回も同じの書かんとアカンし…

ヽ(,-`Д́-)メンドー
CSS

.positive-button { background: #2451F9; }
 ...
.post header h1 { color: #2451F9; }
 ...
a.refer { content:” ”; color:...
色とかフォントサイズとか、
あちこちに散らばって管理めんどー

o(>_<o)(o>_<)o
CSS
.clearfix { *zoom:1; }
.clearfix:after {
    content: "0020";
    display: block;
    height: 0;
    clear: both;
    ...
どれだけアチコチに
書かなアカンねん!

(óω`o)
.box-A {
	 -webkit-border-radius: 2px;
	 -moz-border-radius: 2px;
	 -ms-border-radius: 2px;
	 -o-border-radius: 2px;
	 bor...
な、なんなんね?! これは…。

(・ ・¦¦¦)
もう…

(*>_<)
めんどくちゃい! (*>_<)
と、結構多くのズボラ屋さん Web 屋さんが思ってました。
( _ )
( _ )

そこで、とある偉い人は考えました。
…なんとかズルはできんのか?
( _ )

よっしゃ、つくったる。
(・ ・)

Sass 作ったった!
…こうしてSassが生まれましたハズ。
ほぼ 100% ホントのハズ。
では…
Sass とか Compass って何?
Q

Sassってなんすか?

(?_?)
A

CSSメタ言語っす。
Σ(・ω・*) エッ...
ごめんごめん
A

CSSを
ワリと楽に書けるヤツっす。
Q

じゃぁ、Compassってなんすか?

(?_?)
A

Sassを楽に書けるヤツっす。
Σ(・ω・*) エッ...カブセタ?
いや。今度はマジです。
Sassでラクチンできます。
それでもまだ「メンドクサイ」という人が居たので、また別の偉い人が、
もっとズルしようと作ったのが…

Sass
Sassでラクチンできます。
それでもまだ「メンドクサイ」という人が居たので、また別の偉い人が、
もっとズルしようと作ったのが「Compass」です。

Compass
Sass
Compass でもっとラクチン。
Compass は、Sass をもっと便利にする別のツールです。
ツールだけでなく、Sass の機能をフル活用したお便利グッズも含まれるため、
フレームワークと言われています。

Sass と Compass...
Q

Sass は CSS ですか?

(?_?)
A

違います。
だから、Sass のファイルは、
ブラウザに直接は読み込めません。

Compass
Sass

CSS
Q

じゃどうやって、
Webで使うんですか??

(?_?)
A

CSSに変換します。
Compass

変換
Sass

CSS

(コンパイル)

Sass ファイルから、Sass のツールで変換して、CSS ファイルを作ります。
また、この変換のことを「コンパイル」と言います。
Q

いちいち変換とか面倒っす!
(コンパイル)

(・∀・)
A

そんなに面倒でもないっすー。
コンパイル(変換)は、
勝手にやってくれます。
だれもそんなメンドクサイことはやりたくない。
Q

だれが?
A

Sassさんとか、Compassさんとか、
Preprosさんとかが…。
ン? (・ω・*) タクサン イルノ?
Sass を CSS に
コンパイル(変換)できる方は沢山います。
Sassにも変換ツールは付属していますし、Compassからも変換できますが、
どちらもターミナル(黒い画面)との対決が必要です。でも、黒い画面を使わない別の
ツールも幾つか出...
その中で今日は、
Prepros というツールを使います。
Prepros でもっと簡単に。
Prepros は、Sass ファイルを変換して CSS ファイルを生成する GUI ツールです。
Macintosh/Windows の両方の環境で使えて、無料バージョンでも十分に高機能です。
PRO 版は少...
でも今日はSass

Preprosは、
Sass以外にも色々変換できる。
Sassの他にもCSSを生成する別のメタ言語があります。また、HTMLを生成するメタ
言語や、JavaScriptを拡張した言語など、高度化するWeb制作を効率化するた...
整理すると…
‣

Sassとは?
●

●

‣

‣

CSSを楽に書ける、
CSSに似た別の言語

Sass か Compass かは、
あまり気にしないでOK
●

SassからCSSへの変換ツールを
含む(黒画面)

●

Compa...
うん。コンパイルが必要なのは分かった…。
(変換)
Q

じゃ、Sass って実際どんなの?

(*’-’*)
A

CSS+アルファな感じっす。

(注)Sass/Scssの話がありますが、ここでは単純の為に割愛して
Scss構文=Sassで話をします。Sass/Scssの違いが分かってて、
「乱暴ちゃう?」って思う人は、このセッションは卒業です!
(́ε`;)ウーン…
とりあえず、見た方が早い。
CSS
こんな CSS を、Sass で書くと…
.post { ... }
.post header { ... }
.post header > h1 { color:#ABCDEF; }
.post header .post-meta {...
Sass
こうなるぜっ! ヒャッハー!
.post { ... }
.post header { ... }
.post header > h1 { color:#ABCDEF; }
.post header .post-meta { ... ...
Σ(・ω・*) エッ...
Σ(・ω・*) 同ジヤン...
せや! 同じやで!
でも、それが素晴らしい。
Sass
CSS

Sass の構文は、
CSS に新しい構文を追加したもの。
※ほんとはScssファイルの事ですが、ここでは割愛します。 (* - *)

つまり、全ての CSS ファイルは Sass ファイルとして妥当なので、Sass のコ...
Sass
CSS

つまり CSS は、
そのままでも Sass と言えます。

でも、Sass は CSS ではありませんのよ!
Sass の記法を使ったファイルはあくまでも Sassなので、
コンパイルして、普通の CSS に変換する必要が...
なにが嬉しいの?
Sass のたくさんの機能を
一度に覚えるのは大変だけど…
大事
CSS もそのまま Sass になるので、
覚えたトコだけ使って書くことが出来る。
覚えたてのほんのちょっとのSass構文からだけでも、Sassを使う事ができます。
Sass
ちょっとだけ Sass!
.post { ... }
.post header { @extend .clearfix; }
.post header > h1 { color:#ABCDEF; }
.post header .pos...
Sass
ちょっとだけ Sass!

ココ
だけ!

あとは普通の
CSSでも大丈夫!

.post { ... }
.post header { @extend .clearfix; }
.post header > h1 { color:#...
色々覚えなくても始めれる。
少しずつ、
覚えたコトから、
試せる、使える。
この始めやすさが
Sassの素晴らしいところだと思います。
だから

|ω・`*)

もし
|д´;) ハッ…

|)彡 サッ
(‘ヮ^*)ノ゙フリフリ.:゚+

この後の話で「難しいな」と思うところが
出てきたら、「また今度ね♪」と
優しく手を振ってあげてください。
でも、それでも大丈夫です。
一度に覚えようとすると、難しく感じることになりますが、安心してください。
...
Sass を使ってみる
Sassの便利な機能たち
入れ子

継承

 

Sass

変数

計算

ミックスイン

インポート

い、色々あるやないかい… ( -`д-)
大事
順番に見ていきますが、
全部覚えなくても大丈夫だということを
忘れないでくださいね!
level 1
   入れ子
(いや、でもこれは覚えよう)

(゚ー゚)
CSS
この CSS ですが…
.post { background: #fff; }
.post header { background: #eee; }
.post header h1 { color: #663; }
.post head...
Sass
Sass ではこう書けます。
.post {
	 background: #fff;
	 header {
	 	 background: #eee;
	 	 h1 { color: #663; }
	 	 .post-meta { ...
Sass
Sass ではこう書けます。
.post {
	 background: #fff;

プロパティは
いつも通りに

 

	 header {
	 	 background: #eee;
	 	 h1 { color: #663; ...
Sass
Sass ではこう書けます。
.post {
	 background: #fff;

階層は入れ子に
	 header {
	 	 background: #eee;
	 	 h1 { color: #663; }
	 	 .pos...
Sass
Sass ではこう書けます。
.post {
	 background: #fff;
	 header {

入れ子の入れ子も
大丈夫♪

	 	 background: #eee;
	 	 h1 { color: #663; }
	...
Sass
Sass ではこう書ける。 解決
.post {

同じセレクタを書くのは1度だけ。

	 background: #fff;

クラス名を変えた時に、あちこち変更することが減り、
かなタイポで小一時間無駄にする事も減りそうです。

...
CSS
では、こんなセレクタは?
.post { ... }
.post header { ... }
.post header > h1 { ... }
.post header a { ... }
.post header a:hover ...
Sass
とりあえず、これでOK!
.post { ..
	 header { ...
	 	 a { ... }
	 	 a:hover { ... }
	 }
	 header > h1 { ... }
}
.post.promotion ...
Sass
とりあえず、これでOK!…だけど…
.post { ...
	 header { ...
	 	 a { ... }
	 	 a:hover { ... }
	 }
	 header > h1 { ... }
}
.post.prom...
Sass
この方が Sass らしい。
.post { ...
	 header { ...
	 	 > h1 { ... }
	 	 a { ...
	 	 	 &:hover { ... }
	 	 }
	 }
	 &.promotion ...
Sass
この方が Sass らしい。
.post { ...
	 header { ...
	 	 > h1 { ... }
	 	 a { ...
	 	 	 &:hover { ... }
	 	 }
	 }
	 &.promotion ...
Sass
この方が Sass らしい。
.post { ...
	 header { ...
	 	 > h1 { ... }
	 	 a { ...

& を使って
親セレクタを指定

	 	 	 &:hover { ... }
	 	 }
...
Sass
この方が Sass らしい。
.post { ...
	 header { ...
	 	 > h1 { ... }
	 	 a { ...

& を使って
親セレクタを指定

	 	 	 &:hover { ... }
	 	 }
...
「&」の展開について補足。
Sass

a { ...
	 &:hover { ... }
}

「&」が親セレクタになるからと言って…。

CSS

CSS

a { ... }

a { ... }

a a:hover { ... }

...
CSS
メディアクエリは?

悩み

.post .post-meta {

メディアクエリは定義が分散しがち。

	 float: right;

メディアクエリはルートに書かないと行けないため、ど
うしてもプロパティ定義が分散します。

	...
Sass
近くに書ける!

解決

.post .post-meta {

入れ子の中にそのまま書ける。

	 float: right;

そのため記述がとても簡単に!
とっても気軽にメディアセレクタが使えます!
これは感動もんです!

	 ...
level 1
  インポート

(゚ー゚)
悩み

CSSファイルが長くなり過ぎた…。
複数ファイルに分けたら読込も複数に…。
CSS の @import も遅いし…。
Sass
@import でファイル結合!

解決

@import "_reset";

複数ファイルを、1つのファイルに!

@import "_options";

Sassファイルで左のように書くと、指定したファイル
を全て結合したCS...
level 2
  ミックスイン

*゚д゚*)┣¨キ
似たスタイルの指定に
悩んだことありませんか?
似てるけども、ちょっとずつ違う。同じ見た目にしたいけれど、DOMのコンテキスト
が異なるなど、異なる要素への類似スタイルの指定に悩んだことがあると思います。
CSS
例えば、同じスタイルがアチコチに分散…。
.post .post-meta {
	 font-size:.8em;
	 color: #999999;

同じスタイルの指定があちらこちらに…。
悩み 変更が入った時には、覚えている箇所や...
Sass
Sassなら、1カ所で定義して、読み込める。
@mixin weak-text {
	 font-size:.8em;
	 color: #999999;
}
.post .post-meta {
	 @include weak-te...
CSS
そうすると、CSSではこうなる♪
.post .post-meta {
	 font-size:.8em;
	 color: #999999;
	 ... 他の定義 ...
}

mixinで定義した
内容がコピーされる
内容が挿入され...
level 3
  継承

*゚д゚*)┣¨キ
CSS
今度は、同じセレクタがアチコチに分散…。
.bg-light,
.post .header,
.post .footer,

スタイルが同じになるセレクタを列挙し
悩み てスタイル定義することも多いと思いま
すが、そうすると同じセレクタ...
Sass
Sassなら、定義済みのクラスを継承できる。
.bg-light {

❶ クラスを定義

	 background-position: left top;

(普通のクラス)

	 background-repeat: no-rep...
CSS
そうすると、CSSではこうなる♪
.bg-light, .post .header, .post .footer,
.archive .header, .page-footer, .list-box .header {
	

backg...
ミックスインと継承の違い。
ミックスイン

継承

Sass

Sass

@mixin cute { ...定義... }

.cute { ...定義... }

.akb48 { ...

.akb48 { ...

	

	

@inc...
level 3
  変数

(;゚∀゚)
Sass
変数とは?

値を変数に入れる

$baseFontSize: 14px;

変数

値

(変数の頭には「$」マークを付ける)

POINT

変数には好きな名前が付けられる。
CSS
色んな色が出てきます。管理が…
.post header > h1 { color:#ABCDEF; }
.post header a { color:#ABCDEF; }
.post header a:hover { color:#7...
Sass
変数で名前を付けて管理。
$cTheme: #ABCDEF;
$cThemeDeep: #789ABC;

色に名前を付けて管理する。
変数で色を入れて管理できます。
変数には好きな名前を付けれるので、名前でそれぞれの
色の意味や用途...
CSS
フォントのサイズも色々あるのですよ。
body { font-size: 14px; }
p.lead { font-size: 18px; }
p.weak { font-size: 10px; }
p.footnone { font...
Sass
変数で管理できる。
$fsBase: 14px;

フォントサイズも名前を付けて管理。

$fsEmphasis: 18px;

フォントサイズも色と同様に変数を使って管理できま
す。こちらも、値に名前を付けることで、それぞれのフ
ォ...
POINT

変数を使って値に名前を付けることで、
利用する箇所でその意味が分かりやすくなる。
変数に限らず、ミックスインもスタイルのセットに名前を付けて管理できるので、同じ
ように機能します。名前を付ける=値に意味を付与する。Sassを使うと...
level 3
  計算

(;゚∀゚)
Sass
「+」「­」「 」「 」 始めました。
color: #666666 + #333333;	
// #999999
color: #666666 - #222;	 	 // #444444
color: #666666 * 2;	 	...
Sass
「+」「­」「 」「 」 始めました。
font-size: 14px + 2;	 	 // 16px
font-size: 1em + 4;	 	 // 5em
	
font-size: 2em * 3;	 	 // 6em
	
f...
Sass
色んな場所で計算できます。
$cTheme: #ABCDEF;
$cThemeDeep: #789ABC;
$cTheme: #ABCDEF;
$cThemeDeep: #ABCDEF - #333333; // #789ABC
上の...
Sass
変数と値、変数と変数を計算する。
$cTheme: #ABCDEF;
$cThemeDeep: #ABCDEF - #333333;
$cTheme: #ABCDEF;
$cThemeDeep: $cTheme - #333333; ...
なにが嬉しいのか?
例えば…
Sass
応用:ルールに沿った色を適用する。
$cPositive: #0000CC;
$cNegative: #EEEEEE;
$cEffect: 0.8;

これはロールオーバー時に、
一律80%の薄い色を適用する例です。
$cPositi...
POINT

値の素性を表現することで、
設計意図が後になっても分かる。
例えば、元の色が #0000CC で、ロールオーバー時には 20% 暗い色を付けたい時に、電卓で計算すると
#0000A3 となり、これを CSS に指定していました。し...
level 4
  ミックスイン
(レベルアップして再登場)

(?ω?)
ミックスインは変数と組み合わせて
より高度な使い方ができます。
Sass
これは、ミックスインの簡単な例。
@mixin basebox {
	 margin:1em auto;
	 border:2px solid;
	 padding:5px 1em;
	 border-radius: 4px;
}
....
Sass
似た定義を2回行っている。
@mixin basebox {
	 margin:1em auto;
	 border:2px solid;
	 padding:5px 1em;
	 border-radius: 4px;
}
.box...
Sass
発展:ミックスインで変数を使う。
@mixin basebox($borderColor) {
	 margin:1em auto;
	 border:2px solid $borderColor;
	 padding:5px 1em...
Sass
たくさんの値も渡せます。
@mixin box-shadow($sx, $sy, $boke, $color) {
	 -webkit-box-shadow: $sx $sy $boke $color;
	 -moz-box-shad...
Sass
デフォルト値も指定できます。
@mixin basebox($borderColor:#CCC) { デフォルト値
	 margin:1em auto;
こうしておくと、
	 border:2px solid $borderColor...
他にもあるよ! Sass の機能
‣

コメント
●

CSSに出力される(Output Style = compressed 以外)

●

/*! ... */

CSSに出力される(必ず。コピーライト等の記入に!)

●

‣

/* ....
いろいろ便利な
Sass の機能を見てきました。
これらを駆使すると、
同じようなスタイル表現を簡潔に書けたり、
ぱっと見てスタイルの意味が分かるような
スタイルの定義をすることが出来ます。
では Compass では
どんなことが出来るのでしょうか?
Compass を使ってみる
Compass は Sass を
もっと便利にするものでした。

Compass
Sass
例えば、Compassには、Web制作で
よく使いそうな道具が用意されています。

Compass
Sass
例えば…
Sass
さっきのミックスインですが…
@mixin box-shadow($sx, $sy, $boke, $color) {
	 -webkit-box-shadow: $sx $sy $boke $color;
	 -moz-box-sh...
実は Compass に有る。
Sass
Compass の box-shadow ミックスイン。
@import "compass";
.box-normal{
	 @include single-box-shadow;
} 
.box-promotion {
	 @inc...
Sass
Compass の box-shadow ミックスイン。
@import "compass";
.box-normal{
	 @include single-box-shadow;
} 

Compassの定義
を読み込む

 

....
Sass
Compass の box-shadow ミックスイン。
@import "compass";
.box-normal{
	 @include single-box-shadow;
} 

後は使うだけ
そして、使う

.box-pr...
CSS
.box-normal {
  -webkit-box-shadow: 0px 0px 5px #333333;
  -moz-box-shadow: 0px 0px 5px #333333;
  box-shadow: 0px 0px...
Compass には、
こんな便利なミックスインがいっぱい!
幾つかご紹介します。
但し!
今日はこれらの書式は覚えようとしないでください!
今日は気になった mixin の名前をメモしておくぐらいで、
実際に必要になった時に、リファレンスを開くようにしてください。 (* - *)
Sass

@import "compass/reset";
http://compass-style.org/reference/compass/reset/

html, body, div, span, applet, object, i...
Sass

.selector {
@include pie-clearfix;
}
http://compass-style.org/reference/compass/utilities/general/clearfix/

いわゆるClear...
Sass

.selector {
@include min-width(40px);
@include min-height(80px);
}
http://compass-style.org/reference/compass/utilit...
Sass

.selector {
@include inline-block;
}
http://compass-style.org/reference/compass/css3/inline_block/

@include inline-...
Sass

.selector {
@include opacity(0.5);
}
http://compass-style.org/reference/compass/css3/opacity/

@include inline-block...
Sass
.selector {
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-ms-border-radius: 6px;
-o-border-radius: 6px;
borde...
Sass

.selector {
@include ellipsis;
}
http://compass-style.org/reference/compass/typography/text/ellipsis/

.selector {
w...
Sass

.selector {
.selector {
@include single-text-shadow(
text-shadow: 1px 1px 0
rgba(blue, 0.2), 1px, 1px , 0); rgba(0, ...
Sass

.selector {
@include text-shadow(
rgba(blue, 0.2) 1px 1px 0,
rgba(red, 0.6) 1px 1px 0);
}
http://compass-style.org/r...
Sass

a{
text-decoration: none;
color: #333333;
a{
}
a:hover {
@include hover-link;
text-decoration: underline;
}
@include...
Transi
tion

mns
Colu

Tables

この他にも便利なものがいっぱい。
どれを使うかはアナタ次第♪
決してあおる意味ではなくて「使いたいところだけ使う」。これが大事。

Help
e

rs

Sprites
必要になった時に、リファレンスを見る。
http://compass-style.org/reference/compass/
英語だけど、リファンレンスだし、問題ないっすよ!
ところで、ブラウザのサポートは?
IEのどのバージョンから考慮されてる? moz や webkit のベンダープリフィックスは?
IE6+、-webkit、-moz、-ms、-o を
デフォルトでサポート。
サポート範囲は設定変数を定義して変更できます。
http://compass-style.org/reference/compass/support/

※2013 ...
ブラウザサポート設定の初期値
変数名
$legacy-support-for-ie

デフォルト値
TRUE

$legacy-support-for-ie6

$legacy-support-for-ie

$legacy-support-f...
(*'-'*)
というわけで…
Sass と Compass の
概要を一通り見たので、
今から Sass を書いてみよう!
とにかくやってみるのが一番です!
僕の説明だけでは聞くだけでは難しいと思ったことも、
やってみると簡単なことが多いですよー!
その前に、Sass から CSS への
変換ツールの使い方の説明をしまーす。
Prepros の使い方
プロジェクトの追加
プロジェクトの追加
プロジェクトの追加

プロジェクトの
フォルダを選ぶ
ファイルの一覧

プロジェクトが
追加された

Preprosが
処理できるファイルが
自動で一覧表示
SassとCSSのファイル

上がscssファイル

下が変換後の
CSSファイル
クリックして変換後のCSSファイルの保存先を変えること
ができます。
ファイルの変換設定

ファイルを選択すると
変換設定が出てくる
自動コンパイル

scssが更新されたら
自動でコンパイル
都度コンパイルボタンを押さなくてOK
ファイルと行番号の表示

CSSファイルに
Sassファイルと行番号を
表示
SassとCSSの対応が分かるので、
CSSのデバッグに活用できます。
ただ、たぶん自分で作成したSassの場合、ブラウザのデベロッパー
ツールでCSSの適用状況を確...
Compassを使う

Compassを使う

Compassを使いたい時は必ずON。
だからほぼ常にON。
Compassの高度な機能を使う

Compassの
高度な機能を使う
但し、ONにするには、config.rb が必要!
config.rbは、Compassの設定ファイルです。Preprosでプロジェクト
を管理しているだけなら、config.r...
出力形式を指定する

←圧縮モード
←セレクタとプロパティを1行既述
←Sass上の入れ子を擬似的に再現
←典型的なCSSの書き方
プロジェクトツールバー

プロジェクト
ツールバー
プロジェクトツールバー

画像最適化
設定

削除
サーバー起動

FTP

リロード

※FTP機能は Prepros の PRO 版のみ。
プロジェクトツールバー

クリックしたら
WEBサーバーが起動

簡単にCSSやHTMLを確認できる!
自動リロードでCSS調整も便利!  
プロジェクトの設定

ブラウザ自動リロード
ブラウザの自動リロードのON/OFFを設定できます。
プロジェクトの設定

CSSの出力先フォルダ

CSSファイルのデフォルトの出力先を指定します。
Sassにエラーがある時

エラーがあれば出てくるので
クリックで詳細表示
Sassにエラーがある時

ファイル、行番号、エラーの
内容などが表示される
では、やってみましょうー!
実践中...
実際の利用と運用など
(若干妄想含み)
最後に、実際の利用や運用時に考えることな
ど、個人的な経験からまとめてみました。
Sass のメリット
‣

CSSの管理がシンプルに
●

●

‣

変数やミックスインで値やスタイル
に名前を付け、意味合いで管理

●

再利用しやすい
●

大きなプロジェクトほどに力を発揮

統一しやすい
●

‣

変数や計算の機能...
Sass 導入の課題
‣

導入には関係者との調整が必要
●

●

●

●

●

●

お客様/制作チームの両方に
そもそもSass知らない人もい
る

●

コンパイルできる環境ばかり
でもない
チームメンバーが使っていな
い時、使って...
課題はあるけれど、
Sass を実際に使ってみると、
アナタはもう離れられないかも?
個人的には、普通のCSS書いたりすると「チッ、Sassじゃない…めんどくちゃい」とか思っ
たり、手が震えて書けないこともあったりして、なるべく採用できたらと思...
では、Sassを採用するにあたって
どんなことを考えたか…
Sass導入の検討
‣

チーム内に未経験メンバーが居る
●

よほどでなければ乗り越えたい。
●

‣

もし、Sassを使ったことが無い人
がいても、使ってもらう良い機会
になる

お客様と
●

そもそもお客様先でCSSをメン
テナンスさ...
制作のポイント
‣

CSSの設計はちゃんと考える
●

●

●

当然だけど、ちゃんとしたCSS の
設計がこれまでどおり必要なことは
変わらない
Sass を使うと、力技をスマートに
表現できる部分は増えるが、使い過
ぎると CSS を肥...
制作のポイント
‣

Sass 慣れしていないお客様/
メンバーがいる時は?

‣

過ぎない(とても大事)

●

●

同じツールを使う(サポート
しやすい)
ディレクトリ構成を簡単にす
る(Preprosなどでも簡単に
セットアップできる...
受け取り側の対応
(運用側の皆さんへのアドバイスです)

‣

技術的な不安は感じなくてOK
●

●

知らないMixinも修正するのは難
しくはない
使われているMixinの細かな仕様
は特に気にしないでOK
●

●

●

●

Com...
受け取り側の対応
‣

Prepros でメンテナンスす
る場合
●

●

●

config.rb が同梱されている
か確認する
有れば、config.rb があるフ
ォルダをルートにして
Prepros にプロジェクト登
録
無ければ、次のデ...
(*'-'*)
…ということで、
Sass/Compass について見て来ました。
今日から使える? (*'-'*)
…ような気分になってくれてたら嬉しいんですが∼。
もしやっぱり難しそうだって思った人がいたら、
入れ子と変数だけでも良いので、とりあえず Sass を書いてみてほしいっす。
いちおう、僕にとって Sass は、
既に無くてはならないツールになっています。
CSSの面倒な部分が楽になったり。
重複を減らし、
値やスタイルに名前を付けることで
保守性を向上させたり。
HTML 側もよりスマートに書けたり。

ここら辺は OOCSS などとのパラダイムと合わせて考えたいですが。
いろいろと便利なんですが、
結局 Sass というツールは、
CSS の弱点を補って、
制作・保守効率を高め、
より早く、よりシンプルな思考で、
CSS を記述できる便利なヤツに過ぎません。
だから、CSS の本質的な設計自体は、
これまでどおりしっかりと考えたいと
思います。
ただ…
CSSの記述性の問題で悩むことが減って、
スタイル定義の本質以外の部分に割く時間を
減らすことが出来るでしょう。
そして、ズルして浮いた時間は、
ホントにやるべきタスクのために。
これが Sass を導入して得られる
一番素敵なコトかも知れません♪
(*'-'*)
ご清聴、ありがとうございました!
この文書は クリエイティブ・コモンズ 表示 - 継承 2.1 日本 ライセンスの下に提供されています。
Upcoming SlideShare
Loading in …5
×

今日から使える! Sass/compass ゆるめ勉強会

39,993 views

Published on

Sass/Compass ってよく聞くけど、なんか難しそう…って思っている主にデザイナー/HTMLコーダーさん向けの勉強会で利用したスライドです。勉強会にはハンズオンが組み込まれていたので、この資料には中途半端な部分がありますがご容赦ください。 (*'-'*)
内容的には、基礎的な事柄を、活用のための考え方を添えて解説しています。何かの参考になれば幸いです。

Published in: Technology

今日から使える! Sass/compass ゆるめ勉強会

  1. 1. 今日から使える! Sass/Compass ゆるめ勉強会 2013.11.17
  2. 2. 自己紹介 ‣ ノジマユウジ ‣ 株式会社フォーエンキー 代表 絶賛 お仕事 募集中 ● ● ● ● ● ● Android/iOSアプリ Webアプリ/WordPress Winデスクトップアプリ Web制作全般 グラフィックデザイン 印刷 ‣ PythonとJavaScriptが大好 き。Javaも好き、C#も面白 い。要するに言語好き ‣ おしゃれも大好き☆ リボンやお花が好き☆ ‣ 参加コミュニティ ● ● ● 日本Androidの会 神戸支部 HTML5-WEST.jp WordBench 神戸
  3. 3. 自己紹介 @yuka2py 実体 良い子 ほぼ留守 書籍を執筆しました。 JavaScript についても基礎から 応用・発展まで詳しく書かれています。 良かったら書店で手に取ってください。 http://www.amazon.co.jp/dp/4798129682
  4. 4. 最近のボク Web/WordPress Windows Android/iOS Design Python 2013年10月31日 株式会社フォーエンキー調べ Python 2% Design 8% Web/WordPress 28% Android/iOS 42% Windows 20%
  5. 5.    最近のボク(ホント) Web/WordPress Windows Android/iOS Design Python お嫁 2013年10月31日 株式会社フォーエンキー調べ 愛 Web/WordPress 14% Windows 10% お嫁 50% 恐 Python Android/iOS 1% 21% Design 4%
  6. 6. はじめに 本セッションでは、Sass/Compassの概要とツールとの関 連、またその基礎的な構文を紹介します。またデザイナー の方でも実践しやすいように「Prepros」というGUIツー ルの使用法も解説しています。 対象者 ・まだ Sass/Compass に触れたことの無い方で、 ・でもきっと良いものだろうと夢と希望を抱いている方 ・ターミナル/コンソールなど CUI が苦手な方 ・CSSの設計や構造化の手法に悩んでいる方
  7. 7. ご注意 本セッションでは簡単の為に、Sass中の「Scss」記法を 「Sass」として取り扱い、またほとんどの箇所でその点に ついて特には言及しません。 この資料だけ読まれる方へ 本資料はハンズオン前の解説のためのものですので、解説 資料としては不足がありますが、ご容赦ください。
  8. 8. (*'-'*)
  9. 9. What’s Sass? Sass is the most mature, stable, and powerful professional grade CSS extension language in the world. http://sass-lang.com/
  10. 10. most mature, stable, and powerful なるほど。もっとも成熟して、安定して、パワフルな…
  11. 11. professional grade CSS extension language in the world. プロフェッショナル級の CSS 拡張言語!
  12. 12. (́・ω・`)ウー...
  13. 13. What’s Compass? Compass is an open-source CSS Authoring Framework. http://compass-style.org/
  14. 14. Open-source CSS Authoring Framework. なるほど。こちらはオーサリングの為のフレームワークね。
  15. 15. (́・ω・`)...
  16. 16. よくわかんない?
  17. 17. (́・ω・`)エッ...
  18. 18. よくわかんないの?
  19. 19. ウ.. (́・ω・`))́-ω-`)) ウン...
  20. 20. じゃあ、難しいことは 明日にしちゃおうか?
  21. 21. (・ω・)
  22. 22. (*^-^)うん! 「明日」って言葉が好き♪
  23. 23. という皆さんに、 本日はお集りいただいたハズです! 違ってたら申し訳なく思います。 (́・ω・`)(́-ω-`)) ペコリ でももうどうあがいても本日の内容はこんな感じです。
  24. 24. でも、
  25. 25. 朗報 今日、PCがあって実践できる方は、 たぶん Sass お持ち帰りできます。 出来なかったら、すまないと思いたいと思います。 (́・ω・`)(́-ω-`)) ペコリ
  26. 26. なぜなら、
  27. 27. Sassは、ワリと簡単だから! 僕の周りのデザイナーさんでは、やはり環境構築で躊躇される方が多い感じです。 また、高度なことをしようとすると、少しずつ難しくなります。でもとっかかりは 簡単です。そしてとっかかりだけでも、Sass は強力な武器になります。
  28. 28. (*゚д゚*)
  29. 29. で、そもそもなんですが…
  30. 30. CSSってメンドクサイ
  31. 31. CSS .post { ... } .post header { ... } .post header > h1 { ... } .post header .post-meta { ... } .post header .author-meta { ... } .post header .tags { ... } .post header .categories { ... } .post header a { ... } .post header a:hover { ... } .post.promotion { ... }
  32. 32. 何回も同じの書かんとアカンし… ヽ(,-`Д́-)メンドー
  33. 33. CSS .positive-button { background: #2451F9; }  ... .post header h1 { color: #2451F9; }  ... a.refer { content:” ”; color: #2451F9; }
  34. 34. 色とかフォントサイズとか、 あちこちに散らばって管理めんどー o(>_<o)(o>_<)o
  35. 35. CSS .clearfix { *zoom:1; } .clearfix:after {     content: "0020";     display: block;     height: 0;     clear: both;     overflow: hidden;     visibility: hidden; } <aside class=”promotion-box clearfix”>...</aside> <article class=”post clearfix”>...</article> <div class=”widget clearfix”>...</div>
  36. 36. どれだけアチコチに 書かなアカンねん! (óω`o)
  37. 37. .box-A { -webkit-border-radius: 2px; -moz-border-radius: 2px; -ms-border-radius: 2px; -o-border-radius: 2px; border-radius: 2px; }
  38. 38. な、なんなんね?! これは…。 (・ ・¦¦¦)
  39. 39. もう… (*>_<)
  40. 40. めんどくちゃい! (*>_<) と、結構多くのズボラ屋さん Web 屋さんが思ってました。
  41. 41. ( _ )
  42. 42. ( _ ) そこで、とある偉い人は考えました。
  43. 43. …なんとかズルはできんのか?
  44. 44. ( _ ) よっしゃ、つくったる。
  45. 45. (・ ・) Sass 作ったった!
  46. 46. …こうしてSassが生まれましたハズ。 ほぼ 100% ホントのハズ。
  47. 47. では…
  48. 48. Sass とか Compass って何?
  49. 49. Q Sassってなんすか? (?_?)
  50. 50. A CSSメタ言語っす。
  51. 51. Σ(・ω・*) エッ...
  52. 52. ごめんごめん
  53. 53. A CSSを ワリと楽に書けるヤツっす。
  54. 54. Q じゃぁ、Compassってなんすか? (?_?)
  55. 55. A Sassを楽に書けるヤツっす。
  56. 56. Σ(・ω・*) エッ...カブセタ?
  57. 57. いや。今度はマジです。
  58. 58. Sassでラクチンできます。 それでもまだ「メンドクサイ」という人が居たので、また別の偉い人が、 もっとズルしようと作ったのが… Sass
  59. 59. Sassでラクチンできます。 それでもまだ「メンドクサイ」という人が居たので、また別の偉い人が、 もっとズルしようと作ったのが「Compass」です。 Compass Sass
  60. 60. Compass でもっとラクチン。 Compass は、Sass をもっと便利にする別のツールです。 ツールだけでなく、Sass の機能をフル活用したお便利グッズも含まれるため、 フレームワークと言われています。 Sass と Compass の関係は? SassとCompassは、JavaScriptとjQueryみたいな関 係だと思ってください。jQueryを使って書いたプログ ラムは、あくまでもJavaScriptですよね。jQueryは JavaScriptの機能を使って、JavaScriptをより便利に します。Compassも同様に、Sassの機能を活用し て、Sassをもっと便利にするツールです。 なので、Compassを使って書かれたファイルもSass ファイルです。 Compass Sass
  61. 61. Q Sass は CSS ですか? (?_?)
  62. 62. A 違います。
  63. 63. だから、Sass のファイルは、 ブラウザに直接は読み込めません。 Compass Sass CSS
  64. 64. Q じゃどうやって、 Webで使うんですか?? (?_?)
  65. 65. A CSSに変換します。
  66. 66. Compass 変換 Sass CSS (コンパイル) Sass ファイルから、Sass のツールで変換して、CSS ファイルを作ります。 また、この変換のことを「コンパイル」と言います。
  67. 67. Q いちいち変換とか面倒っす! (コンパイル) (・∀・)
  68. 68. A そんなに面倒でもないっすー。
  69. 69. コンパイル(変換)は、 勝手にやってくれます。 だれもそんなメンドクサイことはやりたくない。
  70. 70. Q だれが?
  71. 71. A Sassさんとか、Compassさんとか、 Preprosさんとかが…。
  72. 72. ン? (・ω・*) タクサン イルノ?
  73. 73. Sass を CSS に コンパイル(変換)できる方は沢山います。 Sassにも変換ツールは付属していますし、Compassからも変換できますが、 どちらもターミナル(黒い画面)との対決が必要です。でも、黒い画面を使わない別の ツールも幾つか出てきて、最近では制作者がコンパイル環境を選べるようになりました。 選べ る Compass 変換ツール Sass CSS
  74. 74. その中で今日は、 Prepros というツールを使います。
  75. 75. Prepros でもっと簡単に。 Prepros は、Sass ファイルを変換して CSS ファイルを生成する GUI ツールです。 Macintosh/Windows の両方の環境で使えて、無料バージョンでも十分に高機能です。 PRO 版は少しお金が要りますが、さらに便利な機能が使えるようになります。 Compass GUI Prepros Sass CSS
  76. 76. でも今日はSass Preprosは、 Sass以外にも色々変換できる。 Sassの他にもCSSを生成する別のメタ言語があります。また、HTMLを生成するメタ 言語や、JavaScriptを拡張した言語など、高度化するWeb制作を効率化するために、 多くの言語やツールが開発されていて、Preprosはこれらの処理にも対応しています。 Sass Less Stylus Coffee LiveScript Jade Slim Haml Markdown Prepros CSS HTML JavaScript 特に、フロントエンドエンジニアの皆さんには、JadeやSlim といった、HTML系のメタ言語は、一度使うと確実にハマると 思います。Sass同様に保守性能が上がるといったこと以上 に、制作時のミスの軽減や高速化が実現できます。極端です が、個人的にはEmmet要らん!って思ったほどです。
  77. 77. 整理すると… ‣ Sassとは? ● ● ‣ ‣ CSSを楽に書ける、 CSSに似た別の言語 Sass か Compass かは、 あまり気にしないでOK ● SassからCSSへの変換ツールを 含む(黒画面) ● Compassとは? ● ● ● Sass をもっと便利にする為に 開発されたフレームワーク Sass の仕組みを活用した便利な アイテムがたくさん ‣ 昨今は Compass を一緒に利用する ケースが殆どだと思います。 ということで基本 Sass & Compass! Prepros ● ● Sass の変換をより便利する為の コマンドが付属(黒画面) ● Sass/Compass をCSSに変換でき るツール Sass/Compass に限らず、モダンな Web制作で使われるツールがセット になっている GUIアプリケーションなので、 黒画面苦手な人もOK
  78. 78. うん。コンパイルが必要なのは分かった…。 (変換)
  79. 79. Q じゃ、Sass って実際どんなの? (*’-’*)
  80. 80. A CSS+アルファな感じっす。 (注)Sass/Scssの話がありますが、ここでは単純の為に割愛して Scss構文=Sassで話をします。Sass/Scssの違いが分かってて、 「乱暴ちゃう?」って思う人は、このセッションは卒業です!
  81. 81. (́ε`;)ウーン…
  82. 82. とりあえず、見た方が早い。
  83. 83. CSS こんな CSS を、Sass で書くと… .post { ... } .post header { ... } .post header > h1 { color:#ABCDEF; } .post header .post-meta { ... } .post header .tags { ... } .post header a { color:#ABCDEF; } .post header a:hover { color:#89ABCD; } .post.promotion { ... }
  84. 84. Sass こうなるぜっ! ヒャッハー! .post { ... } .post header { ... } .post header > h1 { color:#ABCDEF; } .post header .post-meta { ... } .post header .tags { ... } .post header a { color:#ABCDEF; } .post header a:hover { color:#89ABCD; } .post.promotion { ... }
  85. 85. Σ(・ω・*) エッ...
  86. 86. Σ(・ω・*) 同ジヤン...
  87. 87. せや! 同じやで!
  88. 88. でも、それが素晴らしい。
  89. 89. Sass CSS Sass の構文は、 CSS に新しい構文を追加したもの。 ※ほんとはScssファイルの事ですが、ここでは割愛します。 (* - *) つまり、全ての CSS ファイルは Sass ファイルとして妥当なので、Sass のコンパ イラでそのままコンパイルすることが出来ます。先の例で、Sass と CSS の内容 が全く同じだったのは、そのためです。
  90. 90. Sass CSS つまり CSS は、 そのままでも Sass と言えます。 でも、Sass は CSS ではありませんのよ! Sass の記法を使ったファイルはあくまでも Sassなので、 コンパイルして、普通の CSS に変換する必要があります。
  91. 91. なにが嬉しいの?
  92. 92. Sass のたくさんの機能を 一度に覚えるのは大変だけど…
  93. 93. 大事 CSS もそのまま Sass になるので、 覚えたトコだけ使って書くことが出来る。 覚えたてのほんのちょっとのSass構文からだけでも、Sassを使う事ができます。
  94. 94. Sass ちょっとだけ Sass! .post { ... } .post header { @extend .clearfix; } .post header > h1 { color:#ABCDEF; } .post header .post-meta { ... } .post header .tags { ... } .post header a { .... } .post header a:hover { color:#89ABCD; } .post.promotion { ... }
  95. 95. Sass ちょっとだけ Sass! ココ だけ! あとは普通の CSSでも大丈夫! .post { ... } .post header { @extend .clearfix; } .post header > h1 { color:#ABCDEF; } .post header .post-meta { ... } .post header .tags { ... } .post header a { .... } .post header a:hover { color:#89ABCD; } .post.promotion { ... }
  96. 96. 色々覚えなくても始めれる。
  97. 97. 少しずつ、 覚えたコトから、 試せる、使える。
  98. 98. この始めやすさが Sassの素晴らしいところだと思います。
  99. 99. だから |ω・`*) もし |д´;) ハッ… |)彡 サッ
  100. 100. (‘ヮ^*)ノ゙フリフリ.:゚+ この後の話で「難しいな」と思うところが 出てきたら、「また今度ね♪」と 優しく手を振ってあげてください。 でも、それでも大丈夫です。 一度に覚えようとすると、難しく感じることになりますが、安心してください。 まずは覚えたところから使って行くだけでも、Sassはとても便利で頼もしいツールとして、あなたの業務の効率を 上げてくれるはずです!
  101. 101. Sass を使ってみる
  102. 102. Sassの便利な機能たち 入れ子 継承   Sass 変数 計算 ミックスイン インポート い、色々あるやないかい… ( -`д-)
  103. 103. 大事 順番に見ていきますが、 全部覚えなくても大丈夫だということを 忘れないでくださいね!
  104. 104. level 1    入れ子 (いや、でもこれは覚えよう) (゚ー゚)
  105. 105. CSS この CSS ですが… .post { background: #fff; } .post header { background: #eee; } .post header h1 { color: #663; } .post header .post-meta { color: #999; } 悩み 同じセレクタを何度も書いています。 クラス名を変更時に面倒だったりしますね。 こうやって並んでればまだマシに見えますが、CSSプロ パティが増えるとすぐに分かり難くなります。
  106. 106. Sass Sass ではこう書けます。 .post { background: #fff; header { background: #eee; h1 { color: #663; } .post-meta { color: #999; } } }
  107. 107. Sass Sass ではこう書けます。 .post { background: #fff; プロパティは いつも通りに   header { background: #eee; h1 { color: #663; } .post-meta { color: #999; } } }
  108. 108. Sass Sass ではこう書けます。 .post { background: #fff; 階層は入れ子に header { background: #eee; h1 { color: #663; } .post-meta { color: #999; } } }
  109. 109. Sass Sass ではこう書けます。 .post { background: #fff; header { 入れ子の入れ子も 大丈夫♪ background: #eee; h1 { color: #663; } .post-meta { color: #999; } } }
  110. 110. Sass Sass ではこう書ける。 解決 .post { 同じセレクタを書くのは1度だけ。 background: #fff; クラス名を変えた時に、あちこち変更することが減り、 かなタイポで小一時間無駄にする事も減りそうです。 header { この例では、一見、行数が増えて見難くなったように感 じるかも知れませんが、実際にたくさんのプロパティを 書いて行くと、この入れ子の記法のメリットが心にしっ くり染み渡ります。 background: #eee; h1 { color: #663; } .post-meta { color: #999; } } }
  111. 111. CSS では、こんなセレクタは? .post { ... } .post header { ... } .post header > h1 { ... } .post header a { ... } .post header a:hover { ... } .post.promotion { ... }
  112. 112. Sass とりあえず、これでOK! .post { .. header { ... a { ... } a:hover { ... } } header > h1 { ... } } .post.promotion { ... } 普通の CSS 記法で書いてみました。 Sassの中に普通の CSS は問題ないので、 これも全然 OK です(ここ大事)!
  113. 113. Sass とりあえず、これでOK!…だけど… .post { ... header { ... a { ... } a:hover { ... } } header > h1 { ... } } .post.promotion { ... } 問題 同じセレクタが2つずつ登場…。 繰り返し書かなくても良いSassのメリットが、少し減 ってしまってます。ちょっぴり残念。 でも、Sass はこの問題も解消できます。
  114. 114. Sass この方が Sass らしい。 .post { ... header { ... > h1 { ... } a { ... &:hover { ... } } } &.promotion { ... } } 複数書いていたセレクタが無くなってい ることに注目してください。
  115. 115. Sass この方が Sass らしい。 .post { ... header { ... > h1 { ... } a { ... &:hover { ... } } } &.promotion { ... } } 子セレクタは 入れ子に足せばOK
  116. 116. Sass この方が Sass らしい。 .post { ... header { ... > h1 { ... } a { ... & を使って 親セレクタを指定 &:hover { ... } } } &.promotion { ... } } 「&」記号は親セレクタを指します。 ここでは「a」ですね。つまり、 &:hover は、a:hover を意味します。 階層がひとつ上がるイメージになる ことにだけ注意!
  117. 117. Sass この方が Sass らしい。 .post { ... header { ... > h1 { ... } a { ... & を使って 親セレクタを指定 &:hover { ... } } } &.promotion { ... } } こちらも同様に「&」記号は親セレク タである「.post」を表し、 &:promotion は .post.promotion に なります。
  118. 118. 「&」の展開について補足。 Sass a { ... &:hover { ... } } 「&」が親セレクタになるからと言って…。 CSS CSS a { ... } a { ... } a a:hover { ... } a:hover { ... } こうじゃない… こっちが正解。階層が1つ上がる感じ。
  119. 119. CSS メディアクエリは? 悩み .post .post-meta { メディアクエリは定義が分散しがち。 float: right; メディアクエリはルートに書かないと行けないため、ど うしてもプロパティ定義が分散します。 width: 140px; また、こういったメディアクエリをどこか1カ所にまと めて書くか、あるいは必要な場所毎に分散させて書くの か、保守性の観点で悩むことはありませんか? } @media (max-width: 420px) { .post .post-meta { float: none; width: auto; } }
  120. 120. Sass 近くに書ける! 解決 .post .post-meta { 入れ子の中にそのまま書ける。 float: right; そのため記述がとても簡単に! とっても気軽にメディアセレクタが使えます! これは感動もんです! width: 140px; @media(max-width:420px) { float: none; width: auto; } }
  121. 121. level 1   インポート (゚ー゚)
  122. 122. 悩み CSSファイルが長くなり過ぎた…。 複数ファイルに分けたら読込も複数に…。 CSS の @import も遅いし…。
  123. 123. Sass @import でファイル結合! 解決 @import "_reset"; 複数ファイルを、1つのファイルに! @import "_options"; Sassファイルで左のように書くと、指定したファイル を全て結合したCSSファイルが出力されます。 @import "_layout"; これで、用途毎にSassファイルを分けつつ、HTMLか ら読み込むCSSファイルは1つにすることが出来ます。 @import "_generic"; @import "_boxes"; @import "_listview"; 拡張子なしの ファイル名で指定 @import "_ad"; @import "_misc"; @import "typography"; ファイル名の最初のアンダーバー Sassでは、ファイル名が最初のファイルは、読み込ま れることを前提としたファイルという位置づけとなり、 それらのファイルはCSSファイルに変換されません。
  124. 124. level 2   ミックスイン *゚д゚*)┣¨キ
  125. 125. 似たスタイルの指定に 悩んだことありませんか? 似てるけども、ちょっとずつ違う。同じ見た目にしたいけれど、DOMのコンテキスト が異なるなど、異なる要素への類似スタイルの指定に悩んだことがあると思います。
  126. 126. CSS 例えば、同じスタイルがアチコチに分散…。 .post .post-meta { font-size:.8em; color: #999999; 同じスタイルの指定があちらこちらに…。 悩み 変更が入った時には、覚えている箇所や 該当箇所を検索して変更するなど、管理 が面倒で、かつ間違いの元になります。 ... 他の定義 ... } #site-copyright { font-size:.8em; color: #999999; ... 他の定義 ... } スタイルが分散… 定義が分散…
  127. 127. Sass Sassなら、1カ所で定義して、読み込める。 @mixin weak-text { font-size:.8em; color: #999999; } .post .post-meta { @include weak-text; ... 他の定義 ... } #site-copyright { @include weak-text; ... 他の定義 ... } ❶ @mixinで定義 ❷ @includeで読込む @includeで読込む
  128. 128. CSS そうすると、CSSではこうなる♪ .post .post-meta { font-size:.8em; color: #999999; ... 他の定義 ... } mixinで定義した 内容がコピーされる 内容が挿入される #site-copyright { font-size:.8em; color: #999999; ... 他の定義 ... } 1カ所で定義した内容を、mixinの名前で 参照してこのように取り込めるので、と ても簡単に、かつ分かりやすく、同じス タイル指定をアチコチに適用することが 出来ますね!
  129. 129. level 3   継承 *゚д゚*)┣¨キ
  130. 130. CSS 今度は、同じセレクタがアチコチに分散…。 .bg-light, .post .header, .post .footer, スタイルが同じになるセレクタを列挙し 悩み てスタイル定義することも多いと思いま すが、そうすると同じセレクタがアチラチ に分散してCSSの見通しが悪くなります。 .archive .header, .page-footer, .list-box .header { セレクタが分散… 定義が分散… background-position: left top; background-repeat: no-repeat; background-image: url(img/bg-light.png); } .post .header { ...他の定義... }
  131. 131. Sass Sassなら、定義済みのクラスを継承できる。 .bg-light { ❶ クラスを定義 background-position: left top; (普通のクラス) background-repeat: no-repeat; background-image: url(img/bg-light.png); ❷ @extendで継承 } .post .header { @extend .bg-light; ...他の定義... } .post .footer { @extend .bg-light; ... } .archive .header { @extend .bg-light; ... } .page-footer { @extend .bg-light; ... } .list-box .header { @extend .bg-light; ... }
  132. 132. CSS そうすると、CSSではこうなる♪ .bg-light, .post .header, .post .footer, .archive .header, .page-footer, .list-box .header { background-position: left top; background-repeat: no-repeat; background-image: url(img/bg-light.png); } .post .header { ...他の定義... } .post .footer { ... } .archive .header { ... } .page-footer { ... } .list-box .header { ... } 継承した方のセ レクタが継承元の定義に コピーされる 書き方はミックスインの @include と似ていますが、CSSで再現するア プローチは異なっていますね!
  133. 133. ミックスインと継承の違い。 ミックスイン 継承 Sass Sass @mixin cute { ...定義... } .cute { ...定義... } .akb48 { ... .akb48 { ... @include cute; } 定義がコピー CSS } セレクタがコピー CSS .akb48 { .cute, .akb48 { ...ミックスインの定義... } @extend .cute; @mixin の定義が @include した場所にコピー される ... } @extend 側のセ レクタが継承元のセレクタに コピーされる
  134. 134. level 3   変数 (;゚∀゚)
  135. 135. Sass 変数とは? 値を変数に入れる $baseFontSize: 14px; 変数 値 (変数の頭には「$」マークを付ける) POINT 変数には好きな名前が付けられる。
  136. 136. CSS 色んな色が出てきます。管理が… .post header > h1 { color:#ABCDEF; } .post header a { color:#ABCDEF; } .post header a:hover { color:#789ABC; } 悩み C S S 内 で 同 じ 色 が 分 散 して 管 理 が 難 し い。また、#ABCDEF だけみても、それ が「何の為の色」なのか、分からない。
  137. 137. Sass 変数で名前を付けて管理。 $cTheme: #ABCDEF; $cThemeDeep: #789ABC; 色に名前を付けて管理する。 変数で色を入れて管理できます。 変数には好きな名前を付けれるので、名前でそれぞれの 色の意味や用途を表現できるようになります。 .post header { h1 { color: $cTheme; } a { color: $cTheme; ひと目で、 サイトのテーマカラーだ と分かる! &:hover { color:$cThemeDeep; } } }
  138. 138. CSS フォントのサイズも色々あるのですよ。 body { font-size: 14px; } p.lead { font-size: 18px; } p.weak { font-size: 10px; } p.footnone { font-size: 10px; } h1 { font-size: 24px; } 悩み またrootからem単位で相対指定もできますが、親要素 のフォントサイズを考慮する必要があるなど、絶対値指 定をしたい時には扱いにくい面があります。remもまだ 一部使えないケースもあります。 フォントサイズも同様。あちこちに同じ意 味のフォントサイズ指定が分散。また、指 定した箇所ではその意味が分かりづらい。
  139. 139. Sass 変数で管理できる。 $fsBase: 14px; フォントサイズも名前を付けて管理。 $fsEmphasis: 18px; フォントサイズも色と同様に変数を使って管理できま す。こちらも、値に名前を付けることで、それぞれのフ ォントサイズの指定がどんな意味合いで付けられたもの なのか簡単に分かるように書けます。 $fsWeak: 10px; $fsTitle: 24px; body { font-size: $fsBase; } どんなルールに基づ いてサイズ指定されている のかすぐ分かる! p.lead { font-size: $fsEmphasis; } p.weak { font-size: $fsWeak; } p.footnone { font-size: $fsWeak; } h1 { font-size: $fsTitle; }
  140. 140. POINT 変数を使って値に名前を付けることで、 利用する箇所でその意味が分かりやすくなる。 変数に限らず、ミックスインもスタイルのセットに名前を付けて管理できるので、同じ ように機能します。名前を付ける=値に意味を付与する。Sassを使うと、それぞれの値 の指定箇所でその値の意味が分かるように表現でき、保守性が大幅に向上します。
  141. 141. level 3   計算 (;゚∀゚)
  142. 142. Sass 「+」「­」「 」「 」 始めました。 color: #666666 + #333333; // #999999 color: #666666 - #222; // #444444 color: #666666 * 2; // #CCCCCC color: #666666 / 3; // #222222 見たまんまです! 難しく考えないでください! そのまんま! 見たまんまです! (* - *)
  143. 143. Sass 「+」「­」「 」「 」 始めました。 font-size: 14px + 2; // 16px font-size: 1em + 4; // 5em font-size: 2em * 3; // 6em font-size: (18px / 2); // 9px font-size: 2em + 2px // ERROR フォントサイズの計算もできます。 注意点として、単位が異なるとエラーになります。また、割り算の計 算は括弧を付けなければダメない場合があります。 フォントの計算に限らず、コンパイルされたCSS上で計算式がそのま ま表示されたら、とりあえず括弧でくくってみましょう。
  144. 144. Sass 色んな場所で計算できます。 $cTheme: #ABCDEF; $cThemeDeep: #789ABC; $cTheme: #ABCDEF; $cThemeDeep: #ABCDEF - #333333; // #789ABC 上の例では、#789ABCは#ABCDEFから #333333 だけ小さな数なので、上のように書き直すことがで きます。
  145. 145. Sass 変数と値、変数と変数を計算する。 $cTheme: #ABCDEF; $cThemeDeep: #ABCDEF - #333333; $cTheme: #ABCDEF; $cThemeDeep: $cTheme - #333333; // #789ABC 変数と値を組み合わせて計算できます。 結果はもちろん同じです。 また、変数同士の計算もできます。 そして、この仕組みを使うと、例えば…
  146. 146. なにが嬉しいのか? 例えば…
  147. 147. Sass 応用:ルールに沿った色を適用する。 $cPositive: #0000CC; $cNegative: #EEEEEE; $cEffect: 0.8; これはロールオーバー時に、 一律80%の薄い色を適用する例です。 $cPositive、$cNegativeは、それぞれポジティブ/ネガ ティブボタンの基本色。0.8を乗じることで一定のルール に沿った色指定を実現しています。 .button { &.positive { color: $cPositive; &:hover { color: $cPositive * $cEffect; } /* #0000A3 */ } &.negative { color: $cNegative; } } &:hover { color: $cNegative * $cEffect; } /* #BEBEBE */
  148. 148. POINT 値の素性を表現することで、 設計意図が後になっても分かる。 例えば、元の色が #0000CC で、ロールオーバー時には 20% 暗い色を付けたい時に、電卓で計算すると #0000A3 となり、これを CSS に指定していました。しかしこの #0000A3 という値を、後で見た時 に、それが #0000CC から 20 % 暗い色だと直感的に分かるかというと、コメントでも残していないと 分からないと思います。 しかしこれを、#0000CC * 0.8 と表現できれば、その色が「#0000CC の 20 % 暗い色」とすぐ分かり ます。このように、スタイルの設計意図を Sass ファイルにはそのまま残しておくことが出来るため、保 守のフェーズでも当初の設計意図を活かした変更を行うことができるようになります。
  149. 149. level 4   ミックスイン (レベルアップして再登場) (?ω?)
  150. 150. ミックスインは変数と組み合わせて より高度な使い方ができます。
  151. 151. Sass これは、ミックスインの簡単な例。 @mixin basebox { margin:1em auto; border:2px solid; padding:5px 1em; border-radius: 4px; } .box { @include basebox; border-color:#CCC; } .promotion-box { @include basebox; border-color:#990; background: #FF9; } 「basebox」をミックスインしています。 .box、.promotion-boxそれぞれの @include の箇所に、baseboxの定義が 追加されます。でも…
  152. 152. Sass 似た定義を2回行っている。 @mixin basebox { margin:1em auto; border:2px solid; padding:5px 1em; border-radius: 4px; } .box { @include basebox; border-color:#CCC; } .promotion-box { @include basebox; border-color:#990; background: #FF9; } よく見ると border-color の定義は2回 行われています。 別にこれでも構いません! でも、Sassではもうひと工夫できます。
  153. 153. Sass 発展:ミックスインで変数を使う。 @mixin basebox($borderColor) { margin:1em auto; border:2px solid $borderColor; padding:5px 1em; border-radius: 4px; } .box { @include basebox(#CCC); } このように変数を使い、@includeする .promotion-box { 時に一部の値を指定できます。 @include basebox(#990); background:#FF9; }
  154. 154. Sass たくさんの値も渡せます。 @mixin box-shadow($sx, $sy, $boke, $color) { -webkit-box-shadow: $sx $sy $boke $color; -moz-box-shadow: $sx $sy $boke $color; -ms-box-shadow: $sx $sy $boke $color; -o-box-shadow: $sx $sy $boke $color; } .box { @include box-shadow(1px, 1px, 2px, #ABCDEF); }
  155. 155. Sass デフォルト値も指定できます。 @mixin basebox($borderColor:#CCC) { デフォルト値 margin:1em auto; こうしておくと、 border:2px solid $borderColor; @includeの時に値を padding:5px 1em; 指定したらその値に border-radius: 4px; なり、指定しなかっ } た時には、デフォル .box { ト値が適用されます。 @include basebox; // #cccが使われる } .promotion-box { @include basebox(#990); // #990が使われる } background:#FF9;
  156. 156. 他にもあるよ! Sass の機能 ‣ コメント ● CSSに出力される(Output Style = compressed 以外) ● /*! ... */ CSSに出力される(必ず。コピーライト等の記入に!) ● ‣ /* ... */ // ... CSSには出力されない 条件分岐 ● ‣ @if { ... } @else if { ... } @else { ... } ループ ● ● @each $name in hoge, hage, mage { ... } ● ‣ @for $var from 1 to 3 { ... } @while $i < 10 { ... } 関数(…もう省略!) http://sass-lang.com/documentation/file.SASS_REFERENCE.html
  157. 157. いろいろ便利な Sass の機能を見てきました。
  158. 158. これらを駆使すると、 同じようなスタイル表現を簡潔に書けたり、 ぱっと見てスタイルの意味が分かるような スタイルの定義をすることが出来ます。
  159. 159. では Compass では どんなことが出来るのでしょうか?
  160. 160. Compass を使ってみる
  161. 161. Compass は Sass を もっと便利にするものでした。 Compass Sass
  162. 162. 例えば、Compassには、Web制作で よく使いそうな道具が用意されています。 Compass Sass
  163. 163. 例えば…
  164. 164. Sass さっきのミックスインですが… @mixin box-shadow($sx, $sy, $boke, $color) { -webkit-box-shadow: $sx $sy $boke $color; -moz-box-shadow: $sx $sy $boke $color; -ms-box-shadow: $sx $sy $boke $color; -o-box-shadow: $sx $sy $boke $color; } .box { @include box-shadow(1px, 1px, 2px, #ABCDEF); }
  165. 165. 実は Compass に有る。
  166. 166. Sass Compass の box-shadow ミックスイン。 @import "compass"; .box-normal{ @include single-box-shadow; }  .box-promotion { @include box-shadow(red 2px 2px 10px); } .box-note { @include box-shadow( rgba(blue, 0.4) 0 0 25px, rgba(green, 0.2) 0 0 3px 1px inset); }
  167. 167. Sass Compass の box-shadow ミックスイン。 @import "compass"; .box-normal{ @include single-box-shadow; }  Compassの定義 を読み込む   .box-promotion { @include box-shadow(red 2px 2px 10px); } .box-note { @include box-shadow( rgba(blue, 0.4) 0 0 25px, rgba(green, 0.2) 0 0 3px 1px inset); } Compassの機能を使う ために、@importで compass の定義ファイ ルを読み込みます。
  168. 168. Sass Compass の box-shadow ミックスイン。 @import "compass"; .box-normal{ @include single-box-shadow; }  後は使うだけ そして、使う .box-promotion { @include box-shadow(red 2px 2px 10px); } .box-note { @include box-shadow( rgba(blue, 0.4) 0 0 25px, rgba(green, 0.2) 0 0 3px 1px inset); }
  169. 169. CSS .box-normal {   -webkit-box-shadow: 0px 0px 5px #333333;   -moz-box-shadow: 0px 0px 5px #333333;   box-shadow: 0px 0px 5px #333333; } Compassのmixinを読み 込んだだけで、ベンダープ リフィックスも考慮した CSSが適用されます! .box-promotion {   -webkit-box-shadow: red 2px 2px 10px;   -moz-box-shadow: red 2px 2px 10px;   box-shadow: red 2px 2px 10px; }   .box-note {   -webkit-box-shadow: rgba(0, 0, 255, 0.4) 0 0 25px, rgba(0, 128, 0, 0.2) 0 0 3px 1px inset;   -moz-box-shadow: rgba(0, 0, 255, 0.4) 0 0 25px, rgba(0, 128, 0, 0.2) 0 0 3px 1px inset;   box-shadow: rgba(0, 0, 255, 0.4) 0 0 25px, rgba(0, 128, 0, 0.2) 0 0 3px 1px inset; }
  170. 170. Compass には、 こんな便利なミックスインがいっぱい! 幾つかご紹介します。
  171. 171. 但し! 今日はこれらの書式は覚えようとしないでください! 今日は気になった mixin の名前をメモしておくぐらいで、 実際に必要になった時に、リファレンスを開くようにしてください。 (* - *)
  172. 172. Sass @import "compass/reset"; http://compass-style.org/reference/compass/reset/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline; } html { line-height: 1; } CompassのリセットCSSを読み込みます。 Compassの他に、Blueprint のリセットCSSもあります。 独自のリセットCSSがもしあれば、それをあらかじめ 別ファイルにしておいて @import しても良いです。 ちなみに僕は最近はあまりこだわらずに、だいたいいつも最新の HTML5Boilerplate を利用しています。 ol, ul { list-style: none; } table { border-collapse: collapse; border-spacing: 0; } caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; } q, blockquote { quotes: none; } q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none; } a img { border: none; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary { display: block; }
  173. 173. Sass .selector { @include pie-clearfix; } http://compass-style.org/reference/compass/utilities/general/clearfix/ いわゆるClearfixです。他に「clearfix」もありますが、 現時点でより一般的なのは「pie-clearfix」だと思います。 div { *zoom: 1; } div:after { content: ""; display: table; clear: both; }
  174. 174. Sass .selector { @include min-width(40px); @include min-height(80px); } http://compass-style.org/reference/compass/utilities/general/min/ いわずもがなです。 (* - *) .selector { min-width: 40px; width: auto !important; width: 40px; min-height: 80px; height: auto !important; height: 80px; }
  175. 175. Sass .selector { @include inline-block; } http://compass-style.org/reference/compass/css3/inline_block/ @include inline-block($alignment) を指定できます。 デフォルトの $alignment は middle です。 .selector { display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; zoom: 1; *display: inline; }
  176. 176. Sass .selector { @include opacity(0.5); } http://compass-style.org/reference/compass/css3/opacity/ @include inline-block($alignment) を指定できます。 デフォルトの $alignment は middle です。 .selector { filter: progid:DXImageTransform. Microsoft.Alpha(Opacity= 50); opacity: 0.5; }
  177. 177. Sass .selector { -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; } .selector { @include border-radius(6px); } .selector2 { .selector2 { -webkit-border-radius: 6px 12px @include border-radius(6px, 12px); -moz-border-radius: 6px / 12px; border-radius: 6px / 12px; } } http://compass-style.org/reference/compass/css3/border_radius/
  178. 178. Sass .selector { @include ellipsis; } http://compass-style.org/reference/compass/typography/text/ellipsis/ .selector { white-space: nowrap; overflow: hidden; -ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; text-overflow: ellipsis; }
  179. 179. Sass .selector { .selector { @include single-text-shadow( text-shadow: 1px 1px 0 rgba(blue, 0.2), 1px, 1px , 0); rgba(0, 0, 255, 0.2); } } http://compass-style.org/reference/compass/css3/text-shadow/ 1つの要素に1つだけ text-shadow を適用する。
  180. 180. Sass .selector { @include text-shadow( rgba(blue, 0.2) 1px 1px 0, rgba(red, 0.6) 1px 1px 0); } http://compass-style.org/reference/compass/css3/text-shadow/ 1つの要素に複数の text-shadow を適用する。 .selector { text-shadow: rgba(0, 0, 255, 0.2) 1px 1px 0, rgba(255, 0, 0, 0.6) 1px 1px 0; }
  181. 181. Sass a{ text-decoration: none; color: #333333; a{ } a:hover { @include hover-link; text-decoration: underline; } @include link-colors(#333, a:visited { color: #666666; #999, #000, #666, #777); } a:focus { } color: #777777; http://compass-style.org/reference/compass/typography/links/hover_link/ http://compass-style.org/reference/compass/typography/links/link_colors/ } a:hover { color: #999999; リンクスタイルを設定できます。 } link-colors では、$normal、$hover、$active、$visited、 a:active { $focus の順に色を指定できます。 color: black; }
  182. 182. Transi tion mns Colu Tables この他にも便利なものがいっぱい。 どれを使うかはアナタ次第♪ 決してあおる意味ではなくて「使いたいところだけ使う」。これが大事。 Help e rs Sprites
  183. 183. 必要になった時に、リファレンスを見る。 http://compass-style.org/reference/compass/ 英語だけど、リファンレンスだし、問題ないっすよ!
  184. 184. ところで、ブラウザのサポートは? IEのどのバージョンから考慮されてる? moz や webkit のベンダープリフィックスは?
  185. 185. IE6+、-webkit、-moz、-ms、-o を デフォルトでサポート。 サポート範囲は設定変数を定義して変更できます。 http://compass-style.org/reference/compass/support/ ※2013 年 11 月 7 日 現在
  186. 186. ブラウザサポート設定の初期値 変数名 $legacy-support-for-ie デフォルト値 TRUE $legacy-support-for-ie6 $legacy-support-for-ie $legacy-support-for-ie7 $legacy-support-for-ie $legacy-support-for-ie8 $legacy-support-for-ie $experimental-support-for-mozilla TRUE $experimental-support-for-webkit TRUE $support-for-original-webkit-gradients TRUE $experimental-support-for-opera TRUE $experimental-support-for-microsoft TRUE $experimental-support-for-khtml FALSE $experimental-support-for-svg FALSE $legacy-support-for-mozilla TRUE 上記の変数を Sass ファイル内に定義して、デフォルト値を変更できます。
  187. 187. (*'-'*)
  188. 188. というわけで…
  189. 189. Sass と Compass の 概要を一通り見たので、
  190. 190. 今から Sass を書いてみよう! とにかくやってみるのが一番です! 僕の説明だけでは聞くだけでは難しいと思ったことも、 やってみると簡単なことが多いですよー!
  191. 191. その前に、Sass から CSS への 変換ツールの使い方の説明をしまーす。
  192. 192. Prepros の使い方
  193. 193. プロジェクトの追加 プロジェクトの追加
  194. 194. プロジェクトの追加 プロジェクトの フォルダを選ぶ
  195. 195. ファイルの一覧 プロジェクトが 追加された Preprosが 処理できるファイルが 自動で一覧表示
  196. 196. SassとCSSのファイル 上がscssファイル 下が変換後の CSSファイル クリックして変換後のCSSファイルの保存先を変えること ができます。
  197. 197. ファイルの変換設定 ファイルを選択すると 変換設定が出てくる
  198. 198. 自動コンパイル scssが更新されたら 自動でコンパイル 都度コンパイルボタンを押さなくてOK
  199. 199. ファイルと行番号の表示 CSSファイルに Sassファイルと行番号を 表示 SassとCSSの対応が分かるので、 CSSのデバッグに活用できます。 ただ、たぶん自分で作成したSassの場合、ブラウザのデベロッパー ツールでCSSの適用状況を確認したら、それがSassファイルのどこ かはだいたい分かりますので、これは無くてもデバッグ特に支障は 感じないと思います。外部からのファイルで構造が分かっていない 時には便利かも知れません。
  200. 200. Compassを使う Compassを使う Compassを使いたい時は必ずON。 だからほぼ常にON。
  201. 201. Compassの高度な機能を使う Compassの 高度な機能を使う 但し、ONにするには、config.rb が必要! config.rbは、Compassの設定ファイルです。Preprosでプロジェクト を管理しているだけなら、config.rb は不要ですが、Compassのより高 度な機能は使えません。外部から受け取ったSassリソースを編集する場 合には、おそらくconfig.rbが同梱されていると思うので、ある場合はこ のチェックを付与してください(プロジェクトのルートにconfig.rbが配 置されるように、Preprosのプロジェクトを追加してください)。
  202. 202. 出力形式を指定する ←圧縮モード ←セレクタとプロパティを1行既述 ←Sass上の入れ子を擬似的に再現 ←典型的なCSSの書き方
  203. 203. プロジェクトツールバー プロジェクト ツールバー
  204. 204. プロジェクトツールバー 画像最適化 設定 削除 サーバー起動 FTP リロード ※FTP機能は Prepros の PRO 版のみ。
  205. 205. プロジェクトツールバー クリックしたら WEBサーバーが起動 簡単にCSSやHTMLを確認できる! 自動リロードでCSS調整も便利!  
  206. 206. プロジェクトの設定 ブラウザ自動リロード ブラウザの自動リロードのON/OFFを設定できます。
  207. 207. プロジェクトの設定 CSSの出力先フォルダ CSSファイルのデフォルトの出力先を指定します。
  208. 208. Sassにエラーがある時 エラーがあれば出てくるので クリックで詳細表示
  209. 209. Sassにエラーがある時 ファイル、行番号、エラーの 内容などが表示される
  210. 210. では、やってみましょうー!
  211. 211. 実践中...
  212. 212. 実際の利用と運用など (若干妄想含み)
  213. 213. 最後に、実際の利用や運用時に考えることな ど、個人的な経験からまとめてみました。
  214. 214. Sass のメリット ‣ CSSの管理がシンプルに ● ● ‣ 変数やミックスインで値やスタイル に名前を付け、意味合いで管理 ● 再利用しやすい ● 大きなプロジェクトほどに力を発揮 統一しやすい ● ‣ 変数や計算の機能で、色やフォント サイズ、レイアウトマージン等の統 一が容易になる チームで作業する時も、Sassの定義 という形で、レギュレーションを共 有できる(変数名から意図を み取 る) ‣ インポートミックスイン機能を利用 することで、汎用的なスタイル(リ セットCSS)やスタイルを、再利用 しやすい単位で管理できる 設計方針が変わる(大事) ● ● ● 変数、継承、ミックスインを使い、 意味合いを優先したCSSを書く事が できるようになる DOMコンテキストで変化するCSSの 既述性も向上する 結果、CSSの保守性とHTML上の既 述との兼ね合いでの悩みが激減する
  215. 215. Sass 導入の課題 ‣ 導入には関係者との調整が必要 ● ● ● ● ● ● お客様/制作チームの両方に そもそもSass知らない人もい る ● コンパイルできる環境ばかり でもない チームメンバーが使っていな い時、使ってもらえるか? お客様がメンテナンスする場 合、お客様で対応できるか? ‣ 使ってもらえるにしてもどこ まで?(高度な機能も使え る?) LessやStylusといった、他の CSSメタ言語派の人もいたり します(特に問題なさそうだけれど) CSSが大きくなる傾向が… ● コンパイル後のCSSが大きく なりやすい ● 対策の一つとして、ネストを浅 くするように設計するなど
  216. 216. 課題はあるけれど、 Sass を実際に使ってみると、 アナタはもう離れられないかも? 個人的には、普通のCSS書いたりすると「チッ、Sassじゃない…めんどくちゃい」とか思っ たり、手が震えて書けないこともあったりして、なるべく採用できたらと思っています。
  217. 217. では、Sassを採用するにあたって どんなことを考えたか…
  218. 218. Sass導入の検討 ‣ チーム内に未経験メンバーが居る ● よほどでなければ乗り越えたい。 ● ‣ もし、Sassを使ったことが無い人 がいても、使ってもらう良い機会 になる お客様と ● そもそもお客様先でCSSをメン テナンスされるのか? ● ● ● メンテしないならSassの採用を報 告する程度でも良いと思う CSSをメンテされるなら、Sass を使って頂けるかを確認。 ● 使ってもらえるなら、第三者がメ ンテナンスすることをより考慮し た作りを心がける(普段から出来 てれば良いが、より考える) CSSをメンテするが、Sassを使 っていな頂けない時は ● ● Sassの導入を諦めるか… 【対策】お客様先で自由に改変で きる空のCSSファイルを作成し て、HTMLからLink。Sass由来の CSSをオーバーライドしてもらう 感じで(弊害も多いと思うが…)
  219. 219. 制作のポイント ‣ CSSの設計はちゃんと考える ● ● ● 当然だけど、ちゃんとしたCSS の 設計がこれまでどおり必要なことは 変わらない Sass を使うと、力技をスマートに 表現できる部分は増えるが、使い過 ぎると CSS を肥大化させるなどの 弊害もあるので注意 HTML のマークアップと CSS の保 守性を考えて利用していく ● OOCSSなどの考え方も活用していく ‣ サイトの規則を明確に ● ● ● ● 変数、Mixin、ファイル構成などで、サ イトの基本的な決まりごとを表現す る 名前は、意味が分かり、かつ使い方 も想像できるように あちこちのファイルを見ないでも、 サイトの規則が分かるように 例えば、「_config.scss」といった ファイルを作り、サイトの基本規則 となる変数やMixinを集約する(1 カ所にある方が分かりやすいハズ)
  220. 220. 制作のポイント ‣ Sass 慣れしていないお客様/ メンバーがいる時は? ‣ 過ぎない(とても大事) ● ● 同じツールを使う(サポート しやすい) ディレクトリ構成を簡単にす る(Preprosなどでも簡単に セットアップできるように) 高度な機能の利用は控える? 変数を作り過ぎない ● mixinを作り過ぎない ● ● ● ファイルを分け過ぎない ● 工夫し過ぎない ● カッコつけ過ぎない ● 必要なものを必要に応じて追 加する ● 便利そうだからと作ったもの は、あらかた忘れて使わない
  221. 221. 受け取り側の対応 (運用側の皆さんへのアドバイスです) ‣ 技術的な不安は感じなくてOK ● ● 知らないMixinも修正するのは難 しくはない 使われているMixinの細かな仕様 は特に気にしないでOK ● ● ● ● Compassならドキュメントある カスタムMixinなら定義があるの で見たらOK 追加や修正で分からない時は、 Sassの中に普通にCSS書ける 但し、CSSを書き換えるのはNG ‣ 受け取ったら Sass の大まかな 構成(設計)を理解しておく ● 納品ファイルの大まかな構成、 各ファイルの意味合いなどを確 認する ● 詳細より外観 ● 分からない部分は確認 ● もし構成が分かりにくいと思った ら、制作者に趣旨を確認する(要 は、分からない人が見る事に配慮 されているか? 問題があると思っ たら、分かりやすくまとめてもら うようにお願いしてみる)
  222. 222. 受け取り側の対応 ‣ Prepros でメンテナンスす る場合 ● ● ● config.rb が同梱されている か確認する 有れば、config.rb があるフ ォルダをルートにして Prepros にプロジェクト登 録 無ければ、次のディレクトリ を指定してPrepros にプロ ジェクト登録 ● ● webroot に Sass フォルダが 含まれていたらwebroot をプ ロジェクト登録 あるいは、webroot と sass フォルダの両方を含むフォル ダをプロジェクト登録 ● ● ここがややこしくなるので、制 作側はディレクトリ構成を単純 にしてあると良いハズ
  223. 223. (*'-'*)
  224. 224. …ということで、
  225. 225. Sass/Compass について見て来ました。
  226. 226. 今日から使える? (*'-'*) …ような気分になってくれてたら嬉しいんですが∼。 もしやっぱり難しそうだって思った人がいたら、 入れ子と変数だけでも良いので、とりあえず Sass を書いてみてほしいっす。
  227. 227. いちおう、僕にとって Sass は、 既に無くてはならないツールになっています。
  228. 228. CSSの面倒な部分が楽になったり。
  229. 229. 重複を減らし、 値やスタイルに名前を付けることで 保守性を向上させたり。
  230. 230. HTML 側もよりスマートに書けたり。 ここら辺は OOCSS などとのパラダイムと合わせて考えたいですが。
  231. 231. いろいろと便利なんですが、
  232. 232. 結局 Sass というツールは、
  233. 233. CSS の弱点を補って、 制作・保守効率を高め、
  234. 234. より早く、よりシンプルな思考で、 CSS を記述できる便利なヤツに過ぎません。
  235. 235. だから、CSS の本質的な設計自体は、 これまでどおりしっかりと考えたいと 思います。
  236. 236. ただ…
  237. 237. CSSの記述性の問題で悩むことが減って、 スタイル定義の本質以外の部分に割く時間を 減らすことが出来るでしょう。
  238. 238. そして、ズルして浮いた時間は、 ホントにやるべきタスクのために。
  239. 239. これが Sass を導入して得られる 一番素敵なコトかも知れません♪
  240. 240. (*'-'*)
  241. 241. ご清聴、ありがとうございました!
  242. 242. この文書は クリエイティブ・コモンズ 表示 - 継承 2.1 日本 ライセンスの下に提供されています。

×