Post on 15-Jan-2015
description
大竹孔明
StartUp Sass+Compass
第1回 Creators Meetup :
~基本と活用~
Sunday, 24 February 13
大竹 孔明 こうめコーディングを中心にWeb制作をしています
Twitter : @Bamboo_CFacebook : komei.otake
Sunday, 24 February 13
ぴっちぴちの22歳です
Sunday, 24 February 13
Arctedarcted.jp
Sunday, 24 February 13
NameCard.jphttp://name-card.jp
擬人化CSSリファレンスサイトhttp://www.facebook.com/
gcss.reference
公開
製作中
Sunday, 24 February 13
現在のキャラの半数が
Sunday, 24 February 13
現在のキャラの半数が
未亡人
Sunday, 24 February 13
Sunday, 24 February 13
ぴっちぴちの22歳です
Sunday, 24 February 13
ご期待ください!
Sunday, 24 February 13
本日の内容
•基本の記述方法の復習•ファイルの管理と運用の注意点•Compassを使おう
Sunday, 24 February 13
本日の内容
•基本の記述方法の復習•ファイルの管理と運用の注意点•Compassを使おう
Sunday, 24 February 13
本日の内容
•基本の記述方法の復習•ファイルの管理と運用の注意点•Compassを使おう
Sunday, 24 February 13
本日の内容
•基本の記述方法の復習•ファイルの管理と運用の注意点•Compassを使おう
Sunday, 24 February 13
基本の記述方法の復習
Sunday, 24 February 13
DEMO
ネスト
Sunday, 24 February 13
.wrap { width: 80px; height: 80px;}.wrap .inner {border: 1px solid #ededed;
}
CSS
Sunday, 24 February 13
.wrap { width: 80px; height: 80px; .inner { border: 1px solid #ededed; }}
SCSS
Sunday, 24 February 13
.wrap { width: 80px; height: 80px; .inner { border: 1px solid #ededed; }}
SCSS
入れ子に出来る
Sunday, 24 February 13
CSSSCSS
.wrap { width: 80px; height: 80px; .inner { border: 1px .. }}
.wrap { width: 80px; height: 80px;}.wrap .inner {border: 1px soli..
}
Sunday, 24 February 13
DEMO
@media指定のネスト
Sunday, 24 February 13
.wrap { width: 1000px;}
CSS
@media screen and (max-width:600px) { .wrap { width: 100%; }}
Sunday, 24 February 13
.wrap { width: 1000px; @media screen and (max-width:600px) { width: 100%; }}
SCSS
Sunday, 24 February 13
.wrap { width: 1000px; @media screen and (max-width:600px) { width: 100%; }}
SCSS入れ子に出来る
Sunday, 24 February 13
CSSSCSS
.wrap { width: 1000px; @media screen a.. width: 100%; }}
.wrap { width: 1000px;}@media screen and.. .wrap { width: 100%; }}
Sunday, 24 February 13
DEMO
親セレクタの参照
Sunday, 24 February 13
a { display: block;}a:hover { background: #ededed;}
CSS
Sunday, 24 February 13
a { display: block; &:hover { background: #ededed; }}
SCSS
Sunday, 24 February 13
a { display: block; &:hover { background: #ededed; }}
SCSS入れ子に出来る
Sunday, 24 February 13
CSSSCSS
a { display: block; &:hover { background: ... }}
a { display: block;}a:hover { background: # ...}
Sunday, 24 February 13
DEMO
変数
Sunday, 24 February 13
.wrap { background: #ededed;}.wrap a { color: green;}
CSS
Sunday, 24 February 13
$mainColor: #ededed;$keyColor: green;
.wrap { background: $mainColor; a { $keyColor: green; } }
SCSS
Sunday, 24 February 13
$mainColor: #ededed;$keyColor: green;
.wrap { background: $mainColor; a { color: $keyColor; } }
SCSS
定義した値を
Sunday, 24 February 13
$mainColor: #ededed;$keyColor: green;
.wrap { background: $mainColor; a { color: $keyColor; } }
SCSS
指定できる
Sunday, 24 February 13
CSSSCSS$mainColor: #ede..$keyColor: green;
.wrap { background: $.. a { $keyColor: g.. } }
.wrap { background: #..}.wrap a { color: green;}
Sunday, 24 February 13
DEMO
演算
Sunday, 24 February 13
.wrap { width: 80px; padding: 10px;}
CSS
Sunday, 24 February 13
$widthType1: 100px;
.wrap { $paddingType1: 10px; width: $widthType1 - ( $paddingType1 * 2 ); padding: $paddingType1;}
SCSS
Sunday, 24 February 13
$widthType1: 100px;
.wrap { $paddingType1: 10px; width: $widthType1 - ( $paddingType1 * 2 ); padding: $paddingType1;}
SCSSマイナス
乗算
Sunday, 24 February 13
CSSSCSS$widthType1: 100..
.wrap { $paddingType1 .. width: $widthTy .. padding: $padd ..}
.wrap { width: 80px; padding: 10px;}
Sunday, 24 February 13
DEMO
Mixin(ミックスイン)
Sunday, 24 February 13
@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
@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
#navbar li { border-top-radius: 10px; -moz-border-radius-top: 10px; -webkit-border-top-radius: 10px;}
CSS
Sunday, 24 February 13
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
DEMO
extend(エクステンド)
Sunday, 24 February 13
.button-type1 { width: 100px; border: 1px solid #5f5f5f;}
.button-type2 { @extend .button-type1; border-color: #000;}
SCSS
Sunday, 24 February 13
.button-type1 { width: 100px; border: 1px solid #5f5f5f;}
.button-type2 { @extend .button-type1; border-color: #000;}
SCSS
値の継承
Sunday, 24 February 13
.button-type1 { width: 100px; border: 1px solid #5f5f5f;}
.button-type2 { width: 100px; border: 1px solid #5f5f5f; border-color: #000;}
CSS
Sunday, 24 February 13
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
DEMO
ちょっとした注意点
Sunday, 24 February 13
インポレーション
Sunday, 24 February 13
変数はプロパティ名にも使えます
Sunday, 24 February 13
border-#{$side}-radius: $radius;$side: top;
#{} で囲むのをわすれずに!
Sunday, 24 February 13
16進数でカラーを指定
Sunday, 24 February 13
$c1: #fff;
Compile
whiteSunday, 24 February 13
!?
Sunday, 24 February 13
Rubyファイルをごにょごにょすれば
いけるらしいです
www.xenophy.com/sass/4148
Sunday, 24 February 13
#fffffeで逃げるという手m..
Sunday, 24 February 13
ファイルの管理と
運用の注意点
Sunday, 24 February 13
DEMO
ファイルの管理
Sunday, 24 February 13
先頭にアンダースコア( _ )が付いているファイルはコンパイルしてもCSSに変換されない、インポート専用のファイルです。
Sunday, 24 February 13
これを利用して、用途によって切り分けてみましょう。
Sunday, 24 February 13
_mq_tb.scssstyle.scss
_mq_sp.scss
_module.scss
ファイル構成
Sunday, 24 February 13
_mq_tb.scssstyle.scss
_mq_sp.scss
_module.scss
ファイル構成
コンパイルしてもCSSは書き出されない!
Sunday, 24 February 13
読み込み方法
@import “mq_tb”;
Sunday, 24 February 13
拡張子はいらないの?
Sunday, 24 February 13
.scss .sass両方いけるように
拡張子は不要な設計となっているようです
Sunday, 24 February 13
DEMO
Output Style
Sunday, 24 February 13
Sunday, 24 February 13
NESTED
Sunday, 24 February 13
COMPACT
Sunday, 24 February 13
EXPANDED いつもの!
Sunday, 24 February 13
COMPRESSED 高圧縮!
Sunday, 24 February 13
開発時 納品時
EXPANDED
EXPANDED
COMPRESSED
+
Sunday, 24 February 13
DEMO
コメントでしっかり管理
Sunday, 24 February 13
基本編でやったように、
Sassは今までのCSSと
少し書き方が違います
Sunday, 24 February 13
Mixin
extend
ネスト親要素参照
変数演算
if文
関数
Sunday, 24 February 13
無敵だ
Sunday, 24 February 13
でもちょっと待って下さい
Sunday, 24 February 13
オレオレCSSは考えもの
Sunday, 24 February 13
他のスタッフはおろか
自分すら解読不可能に..
最悪の場合 ?
Sunday, 24 February 13
コメント管理は必須!
Sunday, 24 February 13
Compile
Sunday, 24 February 13
// のコメントは
SCSSに関するコメント
/**/ のコメントは
CSSに関するコメント
Sunday, 24 February 13
•Sassでの複数ファイルの管理は(_) partials(パーシャル)を使う
•適切なフォーマットでコンパイル•複雑過ぎる記述は避ける•コメントはしっかり残す
Sunday, 24 February 13
Compassを使おう
Sunday, 24 February 13
DEMO
Compassの初期設定
Sunday, 24 February 13
ターミナルで下記のコマンドを入力
gem update --systemgem install compass
※環境によって sudo を頭につけて実行しないと出来ない場合もあります
Sunday, 24 February 13
早速使ってみましょう!
Sunday, 24 February 13
@importでCompassの機能を使う
@import "compass/css3/border-radius";
@import "compass/css3/";
@import "compass/utilities"
@import "compass"
@import "compass/reset/";
Sunday, 24 February 13
@importでCompassの機能を使う
@import "compass/css3/border-radius";
@import "compass/css3/";
@import "compass/utilities"
@import "compass"
@import "compass/reset/";
border-radiusのみインポート
Sunday, 24 February 13
@importでCompassの機能を使う
@import "compass/css3/border-radius";
@import "compass/css3/";
@import "compass/utilities"
@import "compass"
@import "compass/reset/";
CSS3に関するミックスインをすべてインポート
Sunday, 24 February 13
@importでCompassの機能を使う
@import "compass/css3/border-radius";
@import "compass/css3/";
@import "compass/utilities"
@import "compass"
@import "compass/reset/";clearfixなどのユーティリティ系をインポート
Sunday, 24 February 13
@importでCompassの機能を使う
@import "compass/css3/border-radius";
@import "compass/css3/";
@import "compass/utilities"
@import "compass"
@import "compass/reset/";
Compassのすべて機能を
インポート
Sunday, 24 February 13
@importでCompassの機能を使う
@import "compass/css3/border-radius";
@import "compass/css3/";
@import "compass/utilities"
@import "compass"
@import "compass/reset/";
リセット用CSSをインポート
Sunday, 24 February 13
@compassで全ての機能をインポートできますが、リセットのみは個別でやらないとインポートできないので注意!
Sunday, 24 February 13
DEMO
Compass
CSS Sprite Tool
Sunday, 24 February 13
っていう位にこの機能が便利
Sunday, 24 February 13
spriteimg
イメージフォルダの直下に
sprite用のフォルダを作成
Sunday, 24 February 13
spriteimg a.png
b.png
c.png
スプライトにしたい画像を放り込む!
Sunday, 24 February 13
Compile
Sunday, 24 February 13
spriteimg a.png
b.png
c.png
spritehogehoge.png
なんか出来てる!
Sunday, 24 February 13
Sunday, 24 February 13
早速使ってみよう!
Sunday, 24 February 13
$sprite: sprite-map("hoge/*.png");
画像の結合
sprite画像を入れたフォルダ名
Sunday, 24 February 13
background-image: $sprite;
background-position:
sprite-position($sprite, file-name);
画像の出力
先程作った変数の名前
Sunday, 24 February 13
background-image: $sprite;
background-position:
sprite-position($sprite, file-name);
画像の出力
出力したい画像のファイル名
Sunday, 24 February 13
width: image-width("hoge/file-name.png");
height: image-height("hoge/file-name.png");
横幅や縦のサイズを取得
画像のパス
Sunday, 24 February 13
display: block;
background-repeat: no-repeat;
他にもいくつか指定を加える
Sunday, 24 February 13
DEMO
Codekitでの利用
Sunday, 24 February 13
CodeKit
Sunday, 24 February 13
黒い画面、怖いですよね?
Sunday, 24 February 13
CodeKitなら
Sunday, 24 February 13
Sunday, 24 February 13
CodeKit に D&D するだけドラッグアンドドロップ
Sunday, 24 February 13
新規にCompassプロジェクトを作成する
Sunday, 24 February 13
既存のプロジェクトでCompassを利用する
Sunday, 24 February 13
Compass をインストールする
Sunday, 24 February 13
Compassを設定する
相対パスにする
Sunday, 24 February 13
Compassを設定する
相対パスにする
Sunday, 24 February 13
CodeKitでできること
•Sassをはじめとする主要な CSS Preprocesserのコンパイル
•JSのファイルのミニファイ・統合•ブラウザのオートリロード•Compassなどの利用
Etc.
Sunday, 24 February 13
DEMO
Bourbon
Sunday, 24 February 13
ありがとうございました!
大竹孔明
Sunday, 24 February 13