startup sass + compass [基本と活用]
DESCRIPTION
TRANSCRIPT
![Page 1: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/1.jpg)
大竹孔明
StartUp Sass+Compass
第1回 Creators Meetup :
~基本と活用~
Sunday, 24 February 13
![Page 2: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/2.jpg)
大竹 孔明 こうめコーディングを中心にWeb制作をしています
Twitter : @Bamboo_CFacebook : komei.otake
Sunday, 24 February 13
![Page 3: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/3.jpg)
ぴっちぴちの22歳です
Sunday, 24 February 13
![Page 4: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/4.jpg)
Arctedarcted.jp
Sunday, 24 February 13
![Page 5: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/5.jpg)
NameCard.jphttp://name-card.jp
擬人化CSSリファレンスサイトhttp://www.facebook.com/
gcss.reference
公開
製作中
Sunday, 24 February 13
![Page 6: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/6.jpg)
現在のキャラの半数が
Sunday, 24 February 13
![Page 7: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/7.jpg)
現在のキャラの半数が
未亡人
Sunday, 24 February 13
![Page 8: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/8.jpg)
Sunday, 24 February 13
![Page 9: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/9.jpg)
ぴっちぴちの22歳です
Sunday, 24 February 13
![Page 10: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/10.jpg)
ご期待ください!
Sunday, 24 February 13
![Page 11: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/11.jpg)
本日の内容
•基本の記述方法の復習•ファイルの管理と運用の注意点•Compassを使おう
Sunday, 24 February 13
![Page 12: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/12.jpg)
本日の内容
•基本の記述方法の復習•ファイルの管理と運用の注意点•Compassを使おう
Sunday, 24 February 13
![Page 13: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/13.jpg)
本日の内容
•基本の記述方法の復習•ファイルの管理と運用の注意点•Compassを使おう
Sunday, 24 February 13
![Page 14: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/14.jpg)
本日の内容
•基本の記述方法の復習•ファイルの管理と運用の注意点•Compassを使おう
Sunday, 24 February 13
![Page 15: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/15.jpg)
基本の記述方法の復習
Sunday, 24 February 13
![Page 16: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/16.jpg)
DEMO
ネスト
Sunday, 24 February 13
![Page 17: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/17.jpg)
.wrap { width: 80px; height: 80px;}.wrap .inner {border: 1px solid #ededed;
}
CSS
Sunday, 24 February 13
![Page 18: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/18.jpg)
.wrap { width: 80px; height: 80px; .inner { border: 1px solid #ededed; }}
SCSS
Sunday, 24 February 13
![Page 19: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/19.jpg)
.wrap { width: 80px; height: 80px; .inner { border: 1px solid #ededed; }}
SCSS
入れ子に出来る
Sunday, 24 February 13
![Page 20: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/20.jpg)
CSSSCSS
.wrap { width: 80px; height: 80px; .inner { border: 1px .. }}
.wrap { width: 80px; height: 80px;}.wrap .inner {border: 1px soli..
}
Sunday, 24 February 13
![Page 21: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/21.jpg)
DEMO
@media指定のネスト
Sunday, 24 February 13
![Page 22: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/22.jpg)
.wrap { width: 1000px;}
CSS
@media screen and (max-width:600px) { .wrap { width: 100%; }}
Sunday, 24 February 13
![Page 23: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/23.jpg)
.wrap { width: 1000px; @media screen and (max-width:600px) { width: 100%; }}
SCSS
Sunday, 24 February 13
![Page 24: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/24.jpg)
.wrap { width: 1000px; @media screen and (max-width:600px) { width: 100%; }}
SCSS入れ子に出来る
Sunday, 24 February 13
![Page 25: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/25.jpg)
CSSSCSS
.wrap { width: 1000px; @media screen a.. width: 100%; }}
.wrap { width: 1000px;}@media screen and.. .wrap { width: 100%; }}
Sunday, 24 February 13
![Page 26: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/26.jpg)
DEMO
親セレクタの参照
Sunday, 24 February 13
![Page 27: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/27.jpg)
a { display: block;}a:hover { background: #ededed;}
CSS
Sunday, 24 February 13
![Page 28: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/28.jpg)
a { display: block; &:hover { background: #ededed; }}
SCSS
Sunday, 24 February 13
![Page 29: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/29.jpg)
a { display: block; &:hover { background: #ededed; }}
SCSS入れ子に出来る
Sunday, 24 February 13
![Page 30: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/30.jpg)
CSSSCSS
a { display: block; &:hover { background: ... }}
a { display: block;}a:hover { background: # ...}
Sunday, 24 February 13
![Page 31: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/31.jpg)
DEMO
変数
Sunday, 24 February 13
![Page 32: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/32.jpg)
.wrap { background: #ededed;}.wrap a { color: green;}
CSS
Sunday, 24 February 13
![Page 33: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/33.jpg)
$mainColor: #ededed;$keyColor: green;
.wrap { background: $mainColor; a { $keyColor: green; } }
SCSS
Sunday, 24 February 13
![Page 34: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/34.jpg)
$mainColor: #ededed;$keyColor: green;
.wrap { background: $mainColor; a { color: $keyColor; } }
SCSS
定義した値を
Sunday, 24 February 13
![Page 35: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/35.jpg)
$mainColor: #ededed;$keyColor: green;
.wrap { background: $mainColor; a { color: $keyColor; } }
SCSS
指定できる
Sunday, 24 February 13
![Page 36: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/36.jpg)
CSSSCSS$mainColor: #ede..$keyColor: green;
.wrap { background: $.. a { $keyColor: g.. } }
.wrap { background: #..}.wrap a { color: green;}
Sunday, 24 February 13
![Page 37: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/37.jpg)
DEMO
演算
Sunday, 24 February 13
![Page 38: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/38.jpg)
.wrap { width: 80px; padding: 10px;}
CSS
Sunday, 24 February 13
![Page 39: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/39.jpg)
$widthType1: 100px;
.wrap { $paddingType1: 10px; width: $widthType1 - ( $paddingType1 * 2 ); padding: $paddingType1;}
SCSS
Sunday, 24 February 13
![Page 40: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/40.jpg)
$widthType1: 100px;
.wrap { $paddingType1: 10px; width: $widthType1 - ( $paddingType1 * 2 ); padding: $paddingType1;}
SCSSマイナス
乗算
Sunday, 24 February 13
![Page 41: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/41.jpg)
CSSSCSS$widthType1: 100..
.wrap { $paddingType1 .. width: $widthTy .. padding: $padd ..}
.wrap { width: 80px; padding: 10px;}
Sunday, 24 February 13
![Page 42: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/42.jpg)
DEMO
Mixin(ミックスイン)
Sunday, 24 February 13
![Page 43: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/43.jpg)
@mixin rounded-top { $side: top; $radius: 10px;
border-#{$side}-radius: $radius; -moz-border-radius-#{$side}: $radius; -webkit-border-#{$side}-radius: $radius;}
#navbar li { @include rounded-top;}
SCSS
Sunday, 24 February 13
![Page 44: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/44.jpg)
@mixin rounded-top { $side: top; $radius: 10px;
border-#{$side}-radius: $radius; -moz-border-radius-#{$side}: $radius; -webkit-border-#{$side}-radius: $radius;}
#navbar li { @include rounded-top;}
SCSS@mixinでブロックを括って
@includeで呼び出す!
Sunday, 24 February 13
![Page 45: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/45.jpg)
#navbar li { border-top-radius: 10px; -moz-border-radius-top: 10px; -webkit-border-top-radius: 10px;}
CSS
Sunday, 24 February 13
![Page 46: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/46.jpg)
CSSSCSS@mixin rounded-top { $side: top; $radius: 10px;
border-#{$side}-radius: .. -moz-border-radius-#{$ .. -webkit-border-#{$side} ..}
#navbar li { @include rounded-top ..}
#navbar li { border-top-ra .. -moz-border-r .. -webkit-border ..}
Sunday, 24 February 13
![Page 47: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/47.jpg)
DEMO
extend(エクステンド)
Sunday, 24 February 13
![Page 48: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/48.jpg)
.button-type1 { width: 100px; border: 1px solid #5f5f5f;}
.button-type2 { @extend .button-type1; border-color: #000;}
SCSS
Sunday, 24 February 13
![Page 49: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/49.jpg)
.button-type1 { width: 100px; border: 1px solid #5f5f5f;}
.button-type2 { @extend .button-type1; border-color: #000;}
SCSS
値の継承
Sunday, 24 February 13
![Page 50: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/50.jpg)
.button-type1 { width: 100px; border: 1px solid #5f5f5f;}
.button-type2 { width: 100px; border: 1px solid #5f5f5f; border-color: #000;}
CSS
Sunday, 24 February 13
![Page 51: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/51.jpg)
CSSSCSS.button-type1 { width: 100px; border: 1px soli ..}
.button-type2 { @extend .button .. border-color: #0 ..}
.button-type1 { width: 100px; border: 1px soli ..}
.button-type2 { width: 100px; border: 1px soli .. border-color: # ..}
Sunday, 24 February 13
![Page 52: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/52.jpg)
DEMO
ちょっとした注意点
Sunday, 24 February 13
![Page 53: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/53.jpg)
インポレーション
Sunday, 24 February 13
![Page 54: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/54.jpg)
変数はプロパティ名にも使えます
Sunday, 24 February 13
![Page 55: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/55.jpg)
border-#{$side}-radius: $radius;$side: top;
#{} で囲むのをわすれずに!
Sunday, 24 February 13
![Page 56: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/56.jpg)
16進数でカラーを指定
Sunday, 24 February 13
![Page 57: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/57.jpg)
$c1: #fff;
Compile
whiteSunday, 24 February 13
![Page 58: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/58.jpg)
!?
Sunday, 24 February 13
![Page 59: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/59.jpg)
Rubyファイルをごにょごにょすれば
いけるらしいです
www.xenophy.com/sass/4148
Sunday, 24 February 13
![Page 60: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/60.jpg)
#fffffeで逃げるという手m..
Sunday, 24 February 13
![Page 61: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/61.jpg)
ファイルの管理と
運用の注意点
Sunday, 24 February 13
![Page 62: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/62.jpg)
DEMO
ファイルの管理
Sunday, 24 February 13
![Page 63: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/63.jpg)
先頭にアンダースコア( _ )が付いているファイルはコンパイルしてもCSSに変換されない、インポート専用のファイルです。
Sunday, 24 February 13
![Page 64: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/64.jpg)
これを利用して、用途によって切り分けてみましょう。
Sunday, 24 February 13
![Page 65: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/65.jpg)
_mq_tb.scssstyle.scss
_mq_sp.scss
_module.scss
ファイル構成
Sunday, 24 February 13
![Page 66: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/66.jpg)
_mq_tb.scssstyle.scss
_mq_sp.scss
_module.scss
ファイル構成
コンパイルしてもCSSは書き出されない!
Sunday, 24 February 13
![Page 67: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/67.jpg)
読み込み方法
@import “mq_tb”;
Sunday, 24 February 13
![Page 68: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/68.jpg)
拡張子はいらないの?
Sunday, 24 February 13
![Page 69: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/69.jpg)
.scss .sass両方いけるように
拡張子は不要な設計となっているようです
Sunday, 24 February 13
![Page 70: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/70.jpg)
DEMO
Output Style
Sunday, 24 February 13
![Page 71: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/71.jpg)
Sunday, 24 February 13
![Page 72: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/72.jpg)
NESTED
Sunday, 24 February 13
![Page 73: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/73.jpg)
COMPACT
Sunday, 24 February 13
![Page 74: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/74.jpg)
EXPANDED いつもの!
Sunday, 24 February 13
![Page 75: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/75.jpg)
COMPRESSED 高圧縮!
Sunday, 24 February 13
![Page 76: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/76.jpg)
開発時 納品時
EXPANDED
EXPANDED
COMPRESSED
+
Sunday, 24 February 13
![Page 77: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/77.jpg)
DEMO
コメントでしっかり管理
Sunday, 24 February 13
![Page 78: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/78.jpg)
基本編でやったように、
Sassは今までのCSSと
少し書き方が違います
Sunday, 24 February 13
![Page 79: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/79.jpg)
Mixin
extend
ネスト親要素参照
変数演算
if文
関数
Sunday, 24 February 13
![Page 80: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/80.jpg)
無敵だ
Sunday, 24 February 13
![Page 81: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/81.jpg)
でもちょっと待って下さい
Sunday, 24 February 13
![Page 82: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/82.jpg)
オレオレCSSは考えもの
Sunday, 24 February 13
![Page 83: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/83.jpg)
他のスタッフはおろか
自分すら解読不可能に..
最悪の場合 ?
Sunday, 24 February 13
![Page 84: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/84.jpg)
コメント管理は必須!
Sunday, 24 February 13
![Page 85: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/85.jpg)
Compile
Sunday, 24 February 13
![Page 86: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/86.jpg)
// のコメントは
SCSSに関するコメント
/**/ のコメントは
CSSに関するコメント
Sunday, 24 February 13
![Page 87: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/87.jpg)
•Sassでの複数ファイルの管理は(_) partials(パーシャル)を使う
•適切なフォーマットでコンパイル•複雑過ぎる記述は避ける•コメントはしっかり残す
Sunday, 24 February 13
![Page 88: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/88.jpg)
Compassを使おう
Sunday, 24 February 13
![Page 89: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/89.jpg)
DEMO
Compassの初期設定
Sunday, 24 February 13
![Page 90: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/90.jpg)
ターミナルで下記のコマンドを入力
gem update --systemgem install compass
※環境によって sudo を頭につけて実行しないと出来ない場合もあります
Sunday, 24 February 13
![Page 91: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/91.jpg)
早速使ってみましょう!
Sunday, 24 February 13
![Page 92: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/92.jpg)
@importでCompassの機能を使う
@import "compass/css3/border-radius";
@import "compass/css3/";
@import "compass/utilities"
@import "compass"
@import "compass/reset/";
Sunday, 24 February 13
![Page 93: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/93.jpg)
@importでCompassの機能を使う
@import "compass/css3/border-radius";
@import "compass/css3/";
@import "compass/utilities"
@import "compass"
@import "compass/reset/";
border-radiusのみインポート
Sunday, 24 February 13
![Page 94: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/94.jpg)
@importでCompassの機能を使う
@import "compass/css3/border-radius";
@import "compass/css3/";
@import "compass/utilities"
@import "compass"
@import "compass/reset/";
CSS3に関するミックスインをすべてインポート
Sunday, 24 February 13
![Page 95: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/95.jpg)
@importでCompassの機能を使う
@import "compass/css3/border-radius";
@import "compass/css3/";
@import "compass/utilities"
@import "compass"
@import "compass/reset/";clearfixなどのユーティリティ系をインポート
Sunday, 24 February 13
![Page 96: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/96.jpg)
@importでCompassの機能を使う
@import "compass/css3/border-radius";
@import "compass/css3/";
@import "compass/utilities"
@import "compass"
@import "compass/reset/";
Compassのすべて機能を
インポート
Sunday, 24 February 13
![Page 97: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/97.jpg)
@importでCompassの機能を使う
@import "compass/css3/border-radius";
@import "compass/css3/";
@import "compass/utilities"
@import "compass"
@import "compass/reset/";
リセット用CSSをインポート
Sunday, 24 February 13
![Page 98: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/98.jpg)
@compassで全ての機能をインポートできますが、リセットのみは個別でやらないとインポートできないので注意!
Sunday, 24 February 13
![Page 99: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/99.jpg)
DEMO
Compass
CSS Sprite Tool
Sunday, 24 February 13
![Page 100: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/100.jpg)
っていう位にこの機能が便利
Sunday, 24 February 13
![Page 101: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/101.jpg)
spriteimg
イメージフォルダの直下に
sprite用のフォルダを作成
Sunday, 24 February 13
![Page 102: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/102.jpg)
spriteimg a.png
b.png
c.png
スプライトにしたい画像を放り込む!
Sunday, 24 February 13
![Page 103: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/103.jpg)
Compile
Sunday, 24 February 13
![Page 104: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/104.jpg)
spriteimg a.png
b.png
c.png
spritehogehoge.png
なんか出来てる!
Sunday, 24 February 13
![Page 105: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/105.jpg)
Sunday, 24 February 13
![Page 106: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/106.jpg)
早速使ってみよう!
Sunday, 24 February 13
![Page 107: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/107.jpg)
$sprite: sprite-map("hoge/*.png");
画像の結合
sprite画像を入れたフォルダ名
Sunday, 24 February 13
![Page 108: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/108.jpg)
background-image: $sprite;
background-position:
sprite-position($sprite, file-name);
画像の出力
先程作った変数の名前
Sunday, 24 February 13
![Page 109: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/109.jpg)
background-image: $sprite;
background-position:
sprite-position($sprite, file-name);
画像の出力
出力したい画像のファイル名
Sunday, 24 February 13
![Page 110: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/110.jpg)
width: image-width("hoge/file-name.png");
height: image-height("hoge/file-name.png");
横幅や縦のサイズを取得
画像のパス
Sunday, 24 February 13
![Page 111: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/111.jpg)
display: block;
background-repeat: no-repeat;
他にもいくつか指定を加える
Sunday, 24 February 13
![Page 112: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/112.jpg)
DEMO
Codekitでの利用
Sunday, 24 February 13
![Page 113: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/113.jpg)
CodeKit
Sunday, 24 February 13
![Page 114: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/114.jpg)
黒い画面、怖いですよね?
Sunday, 24 February 13
![Page 115: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/115.jpg)
CodeKitなら
Sunday, 24 February 13
![Page 116: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/116.jpg)
Sunday, 24 February 13
![Page 117: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/117.jpg)
CodeKit に D&D するだけドラッグアンドドロップ
Sunday, 24 February 13
![Page 118: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/118.jpg)
新規にCompassプロジェクトを作成する
Sunday, 24 February 13
![Page 119: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/119.jpg)
既存のプロジェクトでCompassを利用する
Sunday, 24 February 13
![Page 120: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/120.jpg)
Compass をインストールする
Sunday, 24 February 13
![Page 121: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/121.jpg)
Compassを設定する
相対パスにする
Sunday, 24 February 13
![Page 122: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/122.jpg)
Compassを設定する
相対パスにする
Sunday, 24 February 13
![Page 123: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/123.jpg)
CodeKitでできること
•Sassをはじめとする主要な CSS Preprocesserのコンパイル
•JSのファイルのミニファイ・統合•ブラウザのオートリロード•Compassなどの利用
Etc.
Sunday, 24 February 13
![Page 124: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/124.jpg)
DEMO
Bourbon
Sunday, 24 February 13
![Page 125: StartUp Sass + Compass [基本と活用]](https://reader033.vdocuments.site/reader033/viewer/2022051210/54b7827d4a7959166f8b45b7/html5/thumbnails/125.jpg)
ありがとうございました!
大竹孔明
Sunday, 24 February 13