黒い画面とCPPハンズオン ＋ HTML5KARUTA in 岡山 の、「CSS Preprocessor」編で使用したスライドです。

1. CSS Preprocessor
Hands-on
2012/10/19 @littlebusters

2. セッションのアウトライン
•
•
•
•
CSS Preprocessorとは
GUIビルドツール
Sass
ネスト・&・変数・@extend・
演算・コメント・@import
まとめ
•

3. CSS Preprocessor
とは

4. •
•
CSSの弱い部分を補うため、
CSSをベースに機能を拡張したもの
そのままでは使えないため、
コンパイル（変換）が必要

5. Sass
今日はこれ
LESS
Stylus

6. GUIビルドツール

7. Koala
Prepros
MIXTURE
CodeKit
LiveReload

8. Koala
Prepros
MIXTURE
CodeKit
LiveReload
$
$
$
$
$
m
w
m
w
m
w
m
w
m
w
α
α
α
α
α
※1
※2
αは変換以外の機能があるもの ※1 Pro版は有料 ※2 Windows版は今のところフリー

9. Koala
Prepros
MIXTURE
CodeKit
LiveReload
$
$
$
$
$
m
w
m
w
m
w
m
w
m
w
α
α
α
α
α
※1
※2
αは変換以外の機能があるもの ※1 Pro版は有料 ※2 Windows版は今のところフリー

10. •
•
•
•
•
複数のCSSプリプロセッサーに対応
ライブリロード
HTMLテンプレートエンジンに対応
ローカルサーバ
静的HTMLへのコンバート など
これだけ揃って、フリー!

11. 準備
Preprosのインストール
http://alphapixels.com/prepros/
Chrome拡張機能のインストール

12. プロジェクトのフォルダを Drag & Drop
Project Folder

14. ネスト

15. •
ルールセットの中にルールセットを
入れることができる。

16. ul {
list-style: none;
}
ul li {
margin: 5px 0;
}

17. ul {
list-style: none;
li {
margin: 5px 0;
}
}
ネストした部分

18. ul {
list-style: none;
li {
margin: 5px 0;
a {
color: #c00;
}
}
さらにネストもOK
}

19. }
ul {
list-style: none;
}
ul li {
margin: 5px 0;
}
ul li a {
color: #c00;
}

20. ul {
list-style: none;
li a {
color: #c00;
}
}
子孫セレクタで
ネストしてもOK

21. }
ul {
list-style: none;
}
ul li a {
color: #c00;
}

22. .item {
width: 320px;
@media screen and (min-wid..) {
width: 640px;
}
}
@mediaでもOK

23. }
.item {
width: 320px;
}
@media screen and (min-wid..) {
.item {
width: 640px;
}
}

24. .item {
margin: {
top: 1em;
bottom: 1em;
left: 0.5em;
}
}
ハイフン付きの
プロパティはネスト可能

25. }
.item {
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0.5em;
}

26. &

27. •
ネストしたルールセットでも、
• 子セレクタ（>）や隣接セレクタ
&で親セレクタを参照できる。
（+）・疑似要素／クラスなどの利用が
可能に。

28. a {
color: #c00;
}
a:hover {
color: #600;
}

29. a {
}
color: #c00;
&:hover {
color: #600;
}
親の a を参照

30. .header を参照
.header {
height: 90px;
& > h1 {
float: left;
& + p {
font-size: 62.5%;
}
}
.header > h1 を参照
}

31. }
.header {
height: 90px;
}
.header > h1 {
float: left;
}
.header > h1 + p {
font-size: 62.5%;
}

32. .header {
height: 60px;
.toppage & {
height: 90px;
}
}
途中に入ってもOK

33. }
.header {
height: 60px;
}
.toppage .header {
height: 90px;
}

34. 変数

35. •
同じ値を変数にして使い回せる

36. .contents {
background-color: #f2f2f2;
}
.item {
background-color: #f2f2f2;
}
.item-footer {
background-color: #f2f2f2;
}

37. $mainBG: #f2f2f2; 変数の定義
.contents {
background-color: $mainBG;
}
.item {
background-color: $mainBG;
}
.item-footer {
background-color: $mainBG;
}

38. $margin: 1em 0 1em 0.5em;
$baseWidth: 320px;
.header {
width: $baseWidth;
margin: $margin;
}
色や数値・ショートハンドの値など、
割となんでも変数にできる

39. }
.header {
width: 320px;
margin: 1em 0 1em 0.5em;
}

40. .header {
$baseWidth: 320px; 変数定義
width: $baseWidth;
}
.footer {
width: $baseWidth;
ここでエラー
}
ルールセット内で定義した変数は、
その中のみで利用可能

41. $baseWidth: 640px;
.header {
$baseWidth: 320px; 同じ変数名
width: $baseWidth;
}
.footer {
width: $baseWidth;
}
…640px？320px？

42. }
.header {
width: 320px;
}
.footer {
width: 320px;
}
最後に入れた値が有効

43. 演算

44. •
数値の四則演算や、文字列の合体など
ができる。

45. .contents {
width: 640px;
margin-right: 160px;
margin-left: 160px;
}
widthの1/4

46. .contents {
$baseWidth: 640px;
width: $baseWidth;
margin-right: $baseWidth / 4;
margin-left: $baseWidth / 4;
}
変数を併用すると、サイズに変更が
あっても変数を変えるだけでOK

47. •
／（除算）は、以下のいずれかの条件を
• 満たす必要がある
-（減算）の後は半角スペースが必要
マイナス値と区別するため
属性値に / を使うものがあるため
•
•
•
変数が含まれている
()で括られている
他の演算子と一緒に使っている

48. content: ‘plus’ + mark;
width: 300px + 20;
height: 340px - 20;
margin-top: 0.25em * 2;
$mr: 1em;
margin-right: $mr / 4;
margin-bottom: (1em / 4);
margin-left: 2em - 1em / 4;

49. }
content: “plusmark”;
width: 320px;
height: 320px;
margin-top: 0.5em;
margin-right: 0.25em;
margin-bottom: 0.25em;
margin-left: 1.75em;

50. 以下は演算できない
height: 340px -20; スペースがないのでNG
margin-right: 1em / 4; 数値のみでNG

51. 色も演算可能
a:hover {
color: (#c00 / 2);
background-color: #222 + 10;
}

52. }
a:hover {
color: #660000;
background-color: #2c2c2c;
}

53. @extend

54. •
ルールセット内に、
他のルールセットを読み込める。

55. .link {
margin-top: 1em;
color: #009;
}
.link-outside {
margin-top: 1em;
color: #009;
background-color: #f2f2f2;
}

56. .link {
margin-top: 1em;
color: #009;
}
.link-outside {
@extend .link;
background-color: #f2f2f2;
}

57. .defaultWhiteSpace {
margin: 1em 0.5em;
padding: 1.5em 1em;
}
.item {
@extend .defaultWhiteSpace;
background-color: #f2f2f2;
}
.block {
@extend .defaultWhiteSpace;
background-color: #333;
}

58. }
.whiteSpace, .item, .block {
margin: 1em 0.5em;
padding: 1.5em 1em;
}
.item {
background-color: #f2f2f2;
}
.block {
background-color: #333;
}

59. }
不要なセレクタも変換される
.whiteSpace, .item, .block {
margin: 1em 0.5em;
padding: 1.5em 1em;
}
.item {
background-color: #f2f2f2;
}
.block {
background-color: #333;
}

60. %defaultWhiteSpace {
margin: 1em 0.5em;
padding: 1.5em 1em;
}
.item {
@extend %defaultWhiteSpace;
background-color: #f2f2f2;
}
.block {
@extend %defaultWhiteSpace;
background-color: #333;
}
セレクタの先頭を % にする
（プレースホルダーセレクタ）

61. }
.item, .block {
margin: 1em 0.5em;
padding: 1.5em 1em;
}
.item {
background-color: #f2f2f2;
}
.block {
background-color: #333;
}

62. •
@media内で、@extendしたい場合は、
ルールセットを@media内で書くこと

63. %link {
margin-top: 1em;
color: #009;
}
@media screen and (min-wid..) {
.link-item {
@extend: %link;
}
}
アカン パターン

64. @media screen and (min-wid..) {
%link {
margin-top: 1em;
color: #009;
}
.link-item {
@extend: %link;
}
}

65. コメント

66. 通常のコメント（変換されても基本的に残る）
/* comment */
1行コメント（変換時に削除される）
// comment
必ず残るコメント
/*! comment */

67. @import

68. •
•
•
リンクになるのではなく、変換時に
読み込んだファイルを1つにまとめる。
CSSと違い、ファイルのどの位置に
書いてもOK（ルールセット内でもOK）
Sassファイルを読み込んだ場合、
そのファイルの変数の利用や
@extendでルールセットを呼び出せる

69. @import ‘oldstyle.css’;
:
:
@import ‘config.scss’;
:
:
@import ‘base’;
Sassファイルなら
拡張子を省略できる

70. I
style.scss
I I I
config.scss
base.scss
layout.scss
一つのファイルにまとめる

71. I
style.scss
I I I
config.scss
base.scss
layout.scss
CSSファイルが生成されてしまう？

72. •
•
変換する必要のないファイルは、
パーシャルファイルにする。
ファイル名の先頭に _（アンダーバー）を
付けるとパーシャルファイルに。

73. パーシャルファイルのファイル名
_base.scss
@importでは、＿の省略可能
@import ‘base’;

74. まとめ

75. 今日覚えて帰る
ネスト
&
@extend
コメント
親セレクタの参照
$
変数
+-*/
演算
@import

76. もっと機能があります
@mixin @if @for
@while @each
@function

77. もっと勉強したい！
Web制作者のための
Sassの教科書
2,940円
ステマじゃないよ

78. お疲れさまでした
！