StartUp Sass + Compass [基本と活用]
- 2. 大竹 孔明 こうめ
コーディングを中心に Twitter : @Bamboo_C
Web制作をしています Facebook : komei.otake
Sunday, 24 February 13
- 4. Arcted
arcted.jp
Sunday, 24 February 13
- 5. 公開
NameCard.jp
http://name-card.jp
製作中
擬人化CSS
リファレンスサイト
http://www.facebook.com/
gcss.reference
Sunday, 24 February 13
- 11. 本日の内容
• 基本の記述方法の復習
• ファイルの管理と運用の注意点
• Compassを使おう
Sunday, 24 February 13
- 12. 本日の内容
• 基本の記述方法の復習
• ファイルの管理と運用の注意点
• Compassを使おう
Sunday, 24 February 13
- 13. 本日の内容
• 基本の記述方法の復習
• ファイルの管理と運用の注意点
• Compassを使おう
Sunday, 24 February 13
- 14. 本日の内容
• 基本の記述方法の復習
• ファイルの管理と運用の注意点
• Compassを使おう
Sunday, 24 February 13
- 16. DEMO
ネスト
Sunday, 24 February 13
- 17. CSS
.wrap {
width: 80px;
height: 80px;
}
.wrap .inner {
border: 1px solid #ededed;
}
Sunday, 24 February 13
- 18. SCSS
.wrap {
width: 80px;
height: 80px;
.inner {
border: 1px solid #ededed;
}
}
Sunday, 24 February 13
- 19. SCSS
.wrap {
width: 80px;
入れ子に出来る
height: 80px;
.inner {
border: 1px solid #ededed;
}
}
Sunday, 24 February 13
- 20. SCSS CSS
.wrap { .wrap {
width: 80px; width: 80px;
height: 80px; height: 80px;
.inner { }
border: 1px .. .wrap .inner {
} border: 1px soli..
} }
Sunday, 24 February 13
- 21. DEMO
@media指定のネスト
Sunday, 24 February 13
- 22. CSS
.wrap {
width: 1000px;
}
@media screen and (max-width:600px) {
.wrap {
width: 100%;
}
}
Sunday, 24 February 13
- 23. SCSS
.wrap {
width: 1000px;
@media screen and (max-width:600px) {
width: 100%;
}
}
Sunday, 24 February 13
- 24. SCSS
入れ子に出来る
.wrap {
width: 1000px;
@media screen and (max-width:600px) {
width: 100%;
}
}
Sunday, 24 February 13
- 25. SCSS CSS
.wrap { .wrap {
width: 1000px; width: 1000px;
@media screen a.. }
width: 100%; @media screen and..
} .wrap {
} width: 100%;
}
}
Sunday, 24 February 13
- 26. DEMO
親セレクタの参照
Sunday, 24 February 13
- 27. CSS
a{
display: block;
}
a:hover {
background: #ededed;
}
Sunday, 24 February 13
- 28. SCSS
a{
display: block;
&:hover {
background: #ededed;
}
}
Sunday, 24 February 13
- 29. SCSS
入れ子に出来る
a{
display: block;
&:hover {
background: #ededed;
}
}
Sunday, 24 February 13
- 30. SCSS CSS
a{ a{
display: block; display: block;
&:hover { }
background: ... a:hover {
} background: # ...
} }
Sunday, 24 February 13
- 31. DEMO
変数
Sunday, 24 February 13
- 32. CSS
.wrap {
background: #ededed;
}
.wrap a {
color: green;
}
Sunday, 24 February 13
- 33. SCSS
$mainColor: #ededed;
$keyColor: green;
.wrap {
background: $mainColor;
a{
$keyColor: green;
}
}
Sunday, 24 February 13
- 34. SCSS
$mainColor: #ededed;
$keyColor: green;
.wrap { 定義した値を
background: $mainColor;
a{
color: $keyColor;
}
}
Sunday, 24 February 13
- 35. SCSS
$mainColor: #ededed;
$keyColor: green;
.wrap { 指定できる
background: $mainColor;
a{
color: $keyColor;
}
}
Sunday, 24 February 13
- 36. SCSS CSS
$mainColor: #ede..
$keyColor: green; .wrap {
background: #..
.wrap { }
background: $.. .wrap a {
a{ color: green;
$keyColor: g.. }
}
}
Sunday, 24 February 13
- 37. DEMO
演算
Sunday, 24 February 13
- 38. CSS
.wrap {
width: 80px;
padding: 10px;
}
Sunday, 24 February 13
- 39. SCSS
$widthType1: 100px;
.wrap {
$paddingType1: 10px;
width: $widthType1 - ( $paddingType1 * 2 );
padding: $paddingType1;
}
Sunday, 24 February 13
- 40. SCSS
マイナス
$widthType1: 100px;
乗算
.wrap {
$paddingType1: 10px;
width: $widthType1 - ( $paddingType1 * 2 );
padding: $paddingType1;
}
Sunday, 24 February 13
- 41. SCSS CSS
$widthType1: 100..
.wrap {
.wrap {
width: 80px;
$paddingType1 ..
padding: 10px;
width: $widthTy ..
}
padding: $padd ..
}
Sunday, 24 February 13
- 42. DEMO
Mixin(ミックスイン)
Sunday, 24 February 13
- 43. @mixin rounded-top {
$side: top; SCSS
$radius: 10px;
border-#{$side}-radius: $radius;
-moz-border-radius-#{$side}: $radius;
-webkit-border-#{$side}-radius: $radius;
}
#navbar li {
@include rounded-top;
}
Sunday, 24 February 13
- 44. @mixin rounded-top {
$side: top; SCSS
$radius: 10px;
@mixinで
ブロックを括って
border-#{$side}-radius: $radius;
-moz-border-radius-#{$side}: $radius;
-webkit-border-#{$side}-radius: $radius;
}
@includeで
#navbar li { 呼び出す!
@include rounded-top;
}
Sunday, 24 February 13
- 45. CSS
#navbar li {
border-top-radius: 10px;
-moz-border-radius-top: 10px;
-webkit-border-top-radius: 10px;
}
Sunday, 24 February 13
- 46. SCSS CSS
@mixin rounded-top {
$side: top;
$radius: 10px; #navbar li {
border-top-ra ..
border-#{$side}-radius: ..
-moz-border-r ..
-moz-border-radius-#{$ ..
-webkit-border-#{$side} .. -webkit-border ..
} }
#navbar li {
@include rounded-top ..
}
Sunday, 24 February 13
- 47. DEMO
extend(エクステンド)
Sunday, 24 February 13
- 48. SCSS
.button-type1 {
width: 100px;
border: 1px solid #5f5f5f;
}
.button-type2 {
@extend .button-type1;
border-color: #000;
}
Sunday, 24 February 13
- 49. SCSS
.button-type1 {
width: 100px;
border: 1px solid #5f5f5f;
}
値の継承
.button-type2 {
@extend .button-type1;
border-color: #000;
}
Sunday, 24 February 13
- 50. .button-type1 { CSS
width: 100px;
border: 1px solid #5f5f5f;
}
.button-type2 {
width: 100px;
border: 1px solid #5f5f5f;
border-color: #000;
}
Sunday, 24 February 13
- 51. SCSS CSS
.button-type1 {
.button-type1 {
width: 100px;
width: 100px;
border: 1px soli ..
border: 1px soli ..
}
}
.button-type2 {
.button-type2 {
width: 100px;
@extend .button ..
border: 1px soli ..
border-color: #0 ..
border-color: # ..
}
}
Sunday, 24 February 13
- 52. DEMO
ちょっとした注意点
Sunday, 24 February 13
- 55. #{} で囲むのを
わすれずに!
$side: top;
border-#{$side}-radius: $radius;
Sunday, 24 February 13
- 57. $c1: #fff;
Compile
white
Sunday, 24 February 13
- 61. ファイルの管理と
運用の注意点
Sunday, 24 February 13
- 62. DEMO
ファイルの管理
Sunday, 24 February 13
- 63. 先頭にアンダースコア( _ )が付い
ているファイルはコンパイルしても
CSSに変換されない、インポート専
用のファイルです。
Sunday, 24 February 13
- 65. ファイル構成
style.scss _mq_tb.scss
_mq_sp.scss
_module.scss
Sunday, 24 February 13
- 66. ファイル構成
style.scss _mq_tb.scss
_mq_sp.scss
_module.scss
コンパイルしても
CSSは書き出されない!
Sunday, 24 February 13
- 67. 読み込み方法
@import “mq_tb”;
Sunday, 24 February 13
- 69. .scss .sass
両方いけるように
拡張子は不要な設計となっているようです
Sunday, 24 February 13
- 70. DEMO
Output Style
Sunday, 24 February 13
- 74. EXPANDED いつもの!
Sunday, 24 February 13
- 76. 開発時 納品時
EXPANDED
EXPANDED +
COMPRESSED
Sunday, 24 February 13
- 77. DEMO
コメントでしっかり管理
Sunday, 24 February 13
- 78. 基本編でやったように、
Sassは今までのCSSと
少し書き方が違います
Sunday, 24 February 13
- 79. 演算 extend
変数
ネスト 関数
Mixin
親要素参照
if文
Sunday, 24 February 13
- 83. 最悪の場合
他のスタッフはおろか
?
自分すら解読不可能に..
Sunday, 24 February 13
- 86. // のコメントは
SCSSに関するコメント
/**/ のコメントは
CSSに関するコメント
Sunday, 24 February 13
- 87. • Sassでの複数ファイルの管理は(_)
partials(パーシャル)を使う
• 適切なフォーマットでコンパイル
• 複雑過ぎる記述は避ける
• コメントはしっかり残す
Sunday, 24 February 13
- 89. DEMO
Compassの初期設定
Sunday, 24 February 13
- 90. ターミナルで下記のコマンドを入力
gem update --system
gem install compass
※環境によって sudo を頭につけて実行しないと
出来ない場合もあります
Sunday, 24 February 13
- 92. @importでCompassの機能を使う
@import "compass/css3/border-radius";
@import "compass/css3/";
@import "compass/utilities"
@import "compass"
@import "compass/reset/";
Sunday, 24 February 13
- 93. @importでCompassの機能を使う
@import "compass/css3/border-radius";
@import "compass/css3/";
@import "compass/utilities"
border-radiusのみインポート
@import "compass"
@import "compass/reset/";
Sunday, 24 February 13
- 94. @importでCompassの機能を使う
@import "compass/css3/border-radius";
@import "compass/css3/";
@import "compass/utilities"
CSS3に関するミックスインを
@import "compass"
すべてインポート
@import "compass/reset/";
Sunday, 24 February 13
- 95. @importでCompassの機能を使う
@import "compass/css3/border-radius";
@import "compass/css3/";
@import "compass/utilities"
@import "compass"
clearfixなどのユーティリティ
@import "compass/reset/";
系をインポート
Sunday, 24 February 13
- 96. @importでCompassの機能を使う
Compassのすべて機能を
@import "compass/css3/border-radius";
@import "compass/css3/";
インポート
@import "compass/utilities"
@import "compass"
@import "compass/reset/";
Sunday, 24 February 13
- 97. @importでCompassの機能を使う
@import "compass/css3/border-radius";
@import "compass/css3/";
リセット用CSSをインポート
@import "compass/utilities"
@import "compass"
@import "compass/reset/";
Sunday, 24 February 13
- 98. @compassで全ての機能をイン
ポートできますが、リセットのみは
個別でやらないとインポートできな
いので注意!
Sunday, 24 February 13
- 99. DEMO
Compass
CSS Sprite Tool
Sunday, 24 February 13
- 101. img sprite
イメージフォルダの直下に
sprite用のフォルダを作成
Sunday, 24 February 13
- 102. img sprite a.png
b.png
c.png
スプライトにしたい画像を
放り込む!
Sunday, 24 February 13
- 104. img sprite a.png
b.png
c.png
spritehogehoge.png
なんか出来てる!
Sunday, 24 February 13
- 107. 画像の結合
$sprite: sprite-map("hoge/*.png");
sprite画像を入れたフォルダ名
Sunday, 24 February 13
- 108. 画像の出力
background-image: $sprite;
background-position:
sprite-position($sprite, file-name);
先程作った変数の名前
Sunday, 24 February 13
- 109. 画像の出力
background-image: $sprite;
background-position:
sprite-position($sprite, file-name);
出力したい画像のファイル名
Sunday, 24 February 13
- 110. 横幅や縦のサイズを取得
width: image-width("hoge/file-name.png");
height: image-height("hoge/file-name.png");
画像のパス
Sunday, 24 February 13
- 111. 他にもいくつか指定を加える
display: block;
background-repeat: no-repeat;
Sunday, 24 February 13
- 112. DEMO
Codekitでの利用
Sunday, 24 February 13
- 117. ドラッグアンドドロップ
CodeKit に D&D するだけ
Sunday, 24 February 13
- 123. CodeKitでできること
• Sassをはじめとする主要な
CSS Preprocesserのコンパイル
• JSのファイルのミニファイ・統合
• ブラウザのオートリロード
• Compassなどの利用
Etc.
Sunday, 24 February 13
- 124. DEMO
Bourbon
Sunday, 24 February 13