0
Introduction to Sass/Compass for Web Designer
Webデザイナーのための
Sass/Compass 入門
Ameba Headquarters Game Division
Web Developer ...
@t32k
Web Designer
Design, HTML/CSS
Web Director
Direction, Google Analytics
Web Designer
Design, HTML/CSS
Web Developer
Development, HTML/CSS/JavaScript
Web Director
Direction, Google Analytics
Web Designer
Design, HTML/CSS
<- イマココ
2012/06 ~
Web Developer
Development, HTML/CSS/JavaScript
Web Director
Direction, Google Analytics
Web Designer
Des...
Agenda
なぜSassを使うのか?
開発環境の構築
Sass/Compassの機能
まとめ
質疑応答
なぜSassを使うのか?
Sass makes CSS fun again.
Sass is an extension of CSS3,
adding nested rules, variables, mixins,
selector inheritance, and ...
*.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 ...
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;
}
}
プロパティの
ネストも可...
.login-module {
padding: 10px;
}
.login-module .headline {
font-family: bold;
font-size: 18px;
}
.login-module .sentence {...
Nesting
モジュール単位でCSSを管理する
3階層以上ネストしてはいけない
ネスト
ミックスイン
Mixins
@mixin
@include
@mixin marumi($hankei) {
-moz-border-radius: $hankei;
-webkit-border-radius: $hankei;
border-radius: $hankei;
}
.box {
bor...
@mixin marumi($hankei) {
-moz-border-radius: $hankei;
-webkit-border-radius: $hankei;
border-radius: $hankei;
}
.box {
bor...
@mixin marumi($hankei) {
-moz-border-radius: $hankei;
-webkit-border-radius: $hankei;
border-radius: $hankei;
}
.box {
bor...
@mixin marumi($hankei) {
-moz-border-radius: $hankei;
-webkit-border-radius: $hankei;
border-radius: $hankei;
}
.box {
bor...
@mixin marumi($hankei) {
-moz-border-radius: $hankei;
-webkit-border-radius: $hankei;
border-radius: $hankei;
}
.box {
bor...
.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;
}
ミックスインが展開された部分
C...
.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-...
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 .mes...
.message-box {
padding: 5px 10px;
border: 1px black solid;
font-size: 14px;
font-weight: bold;
}
.alert-box {
@extend .mes...
.message-box, .alert-box {
padding: 5px 10px;
border: 1px black solid;
font-size: 14px;
font-weight: bold;
}
.alert-box {
...
.message-box, .alert-box {
padding: 5px 10px;
border: 1px black solid;
font-size: 14px;
font-weight: bold;
}
.alert-box {
...
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 Credit
http://www.flickr.com/photos/eneas/2522135992/
http://www.flickr.com/photos/morch/3427998257/
http://www.flickr....
WebデザイナーのためのSass/Compass入門
WebデザイナーのためのSass/Compass入門
WebデザイナーのためのSass/Compass入門
Upcoming SlideShare
Loading in...5
×

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

912

Published on

HTML/CSSコーディングを取り巻くWeb開発環境は日々進化しています。Sass/LESS/StylusなどのCSSプリプロセッサと呼ばれるCSSをより便利に速く記述できるフレームワークが登場し、Webデザイナーにもプログラミング的な知識を求められるようになってきました。

この授業ではその中でもSassとその拡張フレームワークであるCompassを取り上げて解説します。Sass/Compassを使えば、面倒な記述、タイピングを少なくすることができ、コーディング速度を高めることができます。また、急なデザイン仕様の変更にも変数や継承と言ったSassの機能を使えば柔軟に対応することができます。

ただSassを使用するにあたって、いわゆる『黒い画面』、ターミナルを使って通常のCSSにコンパイル(変換)する作業を伴ったり、変数、ミックスイン、継承といったプログラミング的な概念も必要になってきます。

なにごとも新しいものを取り入れることは苦労を伴いますが、私自身、転職を機にWebデザイナーからWebデベロッパーに職種が変わりました。その時に戸惑いながらも自分なりのペースでSass/Compassを導入していった経験をこの授業を通して共有できれば幸いです。

Published in: Design, Technology
0 Comments
12 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
912
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
7
Comments
0
Likes
12
Embeds 0
No embeds

No notes for slide

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

  1. 1. Introduction to Sass/Compass for Web Designer Webデザイナーのための Sass/Compass 入門 Ameba Headquarters Game Division Web Developer Koji Ishimoto 2013.09.27
  2. 2. @t32k
  3. 3. Web Designer Design, HTML/CSS
  4. 4. Web Director Direction, Google Analytics Web Designer Design, HTML/CSS
  5. 5. Web Developer Development, HTML/CSS/JavaScript Web Director Direction, Google Analytics Web Designer Design, HTML/CSS
  6. 6. <- イマココ 2012/06 ~ Web Developer Development, HTML/CSS/JavaScript Web Director Direction, Google Analytics Web Designer Design, HTML/CSS
  7. 7. Agenda なぜSassを使うのか? 開発環境の構築 Sass/Compassの機能 まとめ 質疑応答
  8. 8. なぜSassを使うのか?
  9. 9. Sass makes CSS fun again. Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more.
  10. 10. *.scss *.sass *.cssSass Compiler
  11. 11. *.scss *.sass *.cssSass Compiler 便利なSass
  12. 12. *.scss *.sass *.cssSass Compiler 便利なSass 普通のCSS
  13. 13. 無理して使う必要はない
  14. 14. 学習コストの増加
  15. 15. 学習コストの増加 開発環境の不一致
  16. 16. 学習コストの増加 開発環境の不一致 コードの肥大化
  17. 17. Sassをキッカケに エンジニア文化を知る
  18. 18. Front-end Engineer HTML JavaScript DesignerCSS
  19. 19. Front-end Engineer JavaScript DesignerCSS
  20. 20. Front-end Engineer JavaScript Designer
  21. 21. Front-end Engineer Designer
  22. 22. Terminal Command Prompt
  23. 23. 黒い画面を日常的に使っている人
  24. 24. Sass使いたいヽ(´ー`)ノ
  25. 25. Sass使いたいヽ(´ー`)ノ 黒い画面こわい(´Д⊂ヽ
  26. 26. Sass使いたいヽ(´ー`)ノ 黒い画面こわい(´Д⊂ヽ GUIアプリ使う(・∀・)
  27. 27. Sass使いたいヽ(´ー`)ノ 黒い画面こわい(´Д⊂ヽ GUIアプリ使う(・∀・) なんか違う、黒い画面使う(;´Д`)
  28. 28. Sass使いたいヽ(´ー`)ノ 黒い画面こわい(´Д⊂ヽ GUIアプリ使う(・∀・) なんか違う、黒い画面使う(;´Д`) ほかの場面でも使う(・`ω・´)
  29. 29. Sass使いたいヽ(´ー`)ノ 黒い画面こわい(´Д⊂ヽ GUIアプリ使う(・∀・) なんか違う、黒い画面使う(;´Д`) ほかの場面でも使う(・`ω・´) 黒い画面最高 \(^o^)/
  30. 30. https://github.com/t32k/maple
  31. 31. スプライト画像の生成 スタイルガイドの生成 Webフォントの生成 静的サーバー起動 ライブリロード 画像の最適化 CSSの縮小化 CSSのリント CSSプロパティのソート Sass/Compassのコンパイル プロジェクトのスキャフォー ルディング
  32. 32. Demo
  33. 33. エンジニアは怠け者
  34. 34. だが、それがいい!
  35. 35. 開発環境の構築
  36. 36. 必要なもの テキストエディタ Sassコンパイラ
  37. 37. 好きなエディタって何ですか?
  38. 38. http://www.sublimetext.com/
  39. 39. https://github.com/t32k/Sublime-Text-2-Icon/tree/moreskine
  40. 40. Terminal
  41. 41. Terminal
  42. 42. Prepros
  43. 43. http://alphapixels.com/prepros/
  44. 44. Demo
  45. 45. http://sassmeister.com/
  46. 46. 自分に合ったスタイルで 無理せず導入する
  47. 47. Sass/Compassの機能
  48. 48. 変数
  49. 49. 変数 ミックスイン
  50. 50. 変数 ネスト ミックスイン
  51. 51. 変数 継承ネスト ミックスイン
  52. 52. 変数 継承ネスト ミックスイン +
  53. 53. 拡張フレームワーク Compass
  54. 54. http://compass-style.org/
  55. 55. @import "compass"; Sass
  56. 56. @import "compass"; 読み込みます! Sass
  57. 57. 何のファイルを? @import "compass"; 読み込みます! Sass
  58. 58. Prepros
  59. 59. Prepros
  60. 60. 変数 Variables $
  61. 61. $hensu: #ffffff; Sass
  62. 62. $hensu: #ffffff; 変数の接頭辞 Sass
  63. 63. $hensu: #ffffff; 変数の接頭辞 変数名 Sass
  64. 64. $hensu: #ffffff; 変数の接頭辞 変数名 値 Sass
  65. 65. // Comment $main-color: #cc0000; $space: 10px; .global-header { background-color: $main-color; } .module { margin: $space * 2; padding: $space / 2; } Sass
  66. 66. CSS .global-header { background-color: #cc0000; } .module { margin: 20px; padding: 5px; }
  67. 67. Variables 変数を一元管理して使用すれば スタイルに一貫性があり修正に強いサイトができる 変数
  68. 68. ネスト Nesting { }
  69. 69. .oya { color: #000; .kodomo { color: #111; .mago { color: #222; } } } Sass
  70. 70. .oya { color: #000; .kodomo { color: #111; .mago { color: #222; } } } 入れ子 Sass
  71. 71. .oya { color: #000; .kodomo { color: #111; .mago { color: #222; } } } 入れ子 入れ子の入れ子 Sass
  72. 72. .oya { color: #000; .kodomo { color: #111; .mago { color: #222; } } } 入れ子 入れ子の入れ子 入れ子の入れ子の Sass
  73. 73. .oya { color: #000; } .oya .kodomo { color: #111; } .oya .kodomo .mago { color: #222; } CSS
  74. 74. .oya { color: #000; } .oya .kodomo { color: #111; } .oya .kodomo .mago { color: #222; } 親のセレクタも適用 CSS
  75. 75. .oya { color: #000; } .oya .kodomo { color: #111; } .oya .kodomo .mago { color: #222; } 親のセレクタも適用 親のセレクタも適用 CSS
  76. 76. .login-module { padding: 10px; .headline { font: { family: bold; size: 18px; } } .sentence { color: #666; } } Sass
  77. 77. .login-module { padding: 10px; .headline { font: { family: bold; size: 18px; } } .sentence { color: #666; } } プロパティの ネストも可能 Sass
  78. 78. .login-module { padding: 10px; } .login-module .headline { font-family: bold; font-size: 18px; } .login-module .sentence { color: #666; } CSS
  79. 79. Nesting モジュール単位でCSSを管理する 3階層以上ネストしてはいけない ネスト
  80. 80. ミックスイン Mixins @mixin @include
  81. 81. @mixin marumi($hankei) { -moz-border-radius: $hankei; -webkit-border-radius: $hankei; border-radius: $hankei; } .box { border: 1px #000 solid; @include marumi(4px); } Sass
  82. 82. @mixin marumi($hankei) { -moz-border-radius: $hankei; -webkit-border-radius: $hankei; border-radius: $hankei; } .box { border: 1px #000 solid; @include marumi(4px); } ミックスインの定義 Sass
  83. 83. @mixin marumi($hankei) { -moz-border-radius: $hankei; -webkit-border-radius: $hankei; border-radius: $hankei; } .box { border: 1px #000 solid; @include marumi(4px); } ミックスイン名ミックスインの定義 Sass
  84. 84. @mixin marumi($hankei) { -moz-border-radius: $hankei; -webkit-border-radius: $hankei; border-radius: $hankei; } .box { border: 1px #000 solid; @include marumi(4px); } ミックスイン名ミックスインの定義 引数 Sass
  85. 85. @mixin marumi($hankei) { -moz-border-radius: $hankei; -webkit-border-radius: $hankei; border-radius: $hankei; } .box { border: 1px #000 solid; @include marumi(4px); } ミックスイン名ミックスインの定義 引数 ミックスインの呼び出し Sass
  86. 86. .box { border: 1px #000 solid; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; } CSS
  87. 87. .box { border: 1px #000 solid; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; } ミックスインが展開された部分 CSS
  88. 88. .marui-marui { @include border-radius(4px); } Sass
  89. 89. .marui-marui { -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; } CSS
  90. 90. Mixins 最初からミックスインを作ろうとは思わない Compassのミックスインを研究してみる ミックスイン
  91. 91. 継承 Selector Inheritance @extend
  92. 92. @extend .keishooo; Sass
  93. 93. 継承します! @extend .keishooo; Sass
  94. 94. 何のセレクタを?継承します! @extend .keishooo; Sass
  95. 95. .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
  96. 96. .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 継承元を指定
  97. 97. .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
  98. 98. .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継承したセレクタ
  99. 99. Selector Inheritance モジュール単位でうまく継承できれば コードを格段に削減することができる 継承
  100. 100. 基本の機能を ちゃんと理解する
  101. 101. まとめ
  102. 102. 最初から スゴイことはできない
  103. 103. 基本の積み重ねが 応用になる
  104. 104. “その時”が来てからでは遅い 先行者はずっと先にいる
  105. 105. 両方できるとカッコイイ (*´ω`*)
  106. 106. 次のステップのために
  107. 107. https://github.com/enja-oss/Sass
  108. 108. http://book.scss.jp/
  109. 109. http://prog4designer.github.io/
  110. 110. Thank you! t32k@t32kkoji.ishimotoToday's latte, Sass. | Flickr by yukop
  111. 111. Photo Credit http://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/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×