StartUp Sass + Compass [基本と活用]

125
大竹孔明 StartUp Sass+Compass 第1回 Creators Meetup : ~基本と活用~ Sunday, 24 February 13

description

 

Transcript of StartUp Sass + Compass [基本と活用]

Page 1: StartUp Sass + Compass [基本と活用]

大竹孔明

StartUp Sass+Compass

第1回 Creators Meetup :

~基本と活用~

Sunday, 24 February 13

Page 2: StartUp Sass + Compass [基本と活用]

大竹 孔明 こうめコーディングを中心にWeb制作をしています

Twitter : @Bamboo_CFacebook : komei.otake

Sunday, 24 February 13

Page 3: StartUp Sass + Compass [基本と活用]

ぴっちぴちの22歳です

Sunday, 24 February 13

Page 4: StartUp Sass + Compass [基本と活用]

Arctedarcted.jp

Sunday, 24 February 13

Page 5: StartUp Sass + Compass [基本と活用]

NameCard.jphttp://name-card.jp

擬人化CSSリファレンスサイトhttp://www.facebook.com/

gcss.reference

公開

製作中

Sunday, 24 February 13

Page 6: StartUp Sass + Compass [基本と活用]

現在のキャラの半数が

Sunday, 24 February 13

Page 7: StartUp Sass + Compass [基本と活用]

現在のキャラの半数が

未亡人

Sunday, 24 February 13

Page 8: StartUp Sass + Compass [基本と活用]

Sunday, 24 February 13

Page 9: StartUp Sass + Compass [基本と活用]

ぴっちぴちの22歳です

Sunday, 24 February 13

Page 10: StartUp Sass + Compass [基本と活用]

ご期待ください!

Sunday, 24 February 13

Page 11: StartUp Sass + Compass [基本と活用]

本日の内容

•基本の記述方法の復習•ファイルの管理と運用の注意点•Compassを使おう

Sunday, 24 February 13

Page 12: StartUp Sass + Compass [基本と活用]

本日の内容

•基本の記述方法の復習•ファイルの管理と運用の注意点•Compassを使おう

Sunday, 24 February 13

Page 13: StartUp Sass + Compass [基本と活用]

本日の内容

•基本の記述方法の復習•ファイルの管理と運用の注意点•Compassを使おう

Sunday, 24 February 13

Page 14: StartUp Sass + Compass [基本と活用]

本日の内容

•基本の記述方法の復習•ファイルの管理と運用の注意点•Compassを使おう

Sunday, 24 February 13

Page 15: StartUp Sass + Compass [基本と活用]

基本の記述方法の復習

Sunday, 24 February 13

Page 16: StartUp Sass + Compass [基本と活用]

DEMO

ネスト

Sunday, 24 February 13

Page 17: StartUp Sass + Compass [基本と活用]

.wrap { width: 80px; height: 80px;}.wrap .inner {border: 1px solid #ededed;

}

CSS

Sunday, 24 February 13

Page 18: StartUp Sass + Compass [基本と活用]

.wrap { width: 80px; height: 80px; .inner { border: 1px solid #ededed; }}

SCSS

Sunday, 24 February 13

Page 19: StartUp Sass + Compass [基本と活用]

.wrap { width: 80px; height: 80px; .inner { border: 1px solid #ededed; }}

SCSS

入れ子に出来る

Sunday, 24 February 13

Page 20: StartUp Sass + Compass [基本と活用]

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 [基本と活用]

DEMO

@media指定のネスト

Sunday, 24 February 13

Page 22: StartUp Sass + Compass [基本と活用]

.wrap { width: 1000px;}

CSS

@media screen and (max-width:600px) { .wrap { width: 100%; }}

Sunday, 24 February 13

Page 23: StartUp Sass + Compass [基本と活用]

.wrap { width: 1000px; @media screen and (max-width:600px) { width: 100%; }}

SCSS

Sunday, 24 February 13

Page 24: StartUp Sass + Compass [基本と活用]

.wrap { width: 1000px; @media screen and (max-width:600px) { width: 100%; }}

SCSS入れ子に出来る

Sunday, 24 February 13

Page 25: StartUp Sass + Compass [基本と活用]

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 [基本と活用]

DEMO

親セレクタの参照

Sunday, 24 February 13

Page 27: StartUp Sass + Compass [基本と活用]

a { display: block;}a:hover { background: #ededed;}

CSS

Sunday, 24 February 13

Page 28: StartUp Sass + Compass [基本と活用]

a { display: block; &:hover { background: #ededed; }}

SCSS

Sunday, 24 February 13

Page 29: StartUp Sass + Compass [基本と活用]

a { display: block; &:hover { background: #ededed; }}

SCSS入れ子に出来る

Sunday, 24 February 13

Page 30: StartUp Sass + Compass [基本と活用]

CSSSCSS

a { display: block; &:hover { background: ... }}

a { display: block;}a:hover { background: # ...}

Sunday, 24 February 13

Page 31: StartUp Sass + Compass [基本と活用]

DEMO

変数

Sunday, 24 February 13

Page 32: StartUp Sass + Compass [基本と活用]

.wrap { background: #ededed;}.wrap a { color: green;}

CSS

Sunday, 24 February 13

Page 33: StartUp Sass + Compass [基本と活用]

$mainColor: #ededed;$keyColor: green;

.wrap { background: $mainColor; a { $keyColor: green; } }

SCSS

Sunday, 24 February 13

Page 34: StartUp Sass + Compass [基本と活用]

$mainColor: #ededed;$keyColor: green;

.wrap { background: $mainColor; a { color: $keyColor; } }

SCSS

定義した値を

Sunday, 24 February 13

Page 35: StartUp Sass + Compass [基本と活用]

$mainColor: #ededed;$keyColor: green;

.wrap { background: $mainColor; a { color: $keyColor; } }

SCSS

指定できる

Sunday, 24 February 13

Page 36: StartUp Sass + Compass [基本と活用]

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 [基本と活用]

DEMO

演算

Sunday, 24 February 13

Page 38: StartUp Sass + Compass [基本と活用]

.wrap { width: 80px; padding: 10px;}

CSS

Sunday, 24 February 13

Page 39: StartUp Sass + Compass [基本と活用]

$widthType1: 100px;

.wrap { $paddingType1: 10px; width: $widthType1 - ( $paddingType1 * 2 ); padding: $paddingType1;}

SCSS

Sunday, 24 February 13

Page 40: StartUp Sass + Compass [基本と活用]

$widthType1: 100px;

.wrap { $paddingType1: 10px; width: $widthType1 - ( $paddingType1 * 2 ); padding: $paddingType1;}

SCSSマイナス

乗算

Sunday, 24 February 13

Page 41: StartUp Sass + Compass [基本と活用]

CSSSCSS$widthType1: 100..

.wrap { $paddingType1 .. width: $widthTy .. padding: $padd ..}

.wrap { width: 80px; padding: 10px;}

Sunday, 24 February 13

Page 42: StartUp Sass + Compass [基本と活用]

DEMO

Mixin(ミックスイン)

Sunday, 24 February 13

Page 43: StartUp Sass + Compass [基本と活用]

@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 [基本と活用]

@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 [基本と活用]

#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 [基本と活用]

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 [基本と活用]

DEMO

extend(エクステンド)

Sunday, 24 February 13

Page 48: StartUp Sass + Compass [基本と活用]

.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 [基本と活用]

.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 [基本と活用]

.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 [基本と活用]

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 [基本と活用]

DEMO

ちょっとした注意点

Sunday, 24 February 13

Page 53: StartUp Sass + Compass [基本と活用]

インポレーション

Sunday, 24 February 13

Page 54: StartUp Sass + Compass [基本と活用]

変数はプロパティ名にも使えます

Sunday, 24 February 13

Page 55: StartUp Sass + Compass [基本と活用]

border-#{$side}-radius: $radius;$side: top;

#{} で囲むのをわすれずに!

Sunday, 24 February 13

Page 56: StartUp Sass + Compass [基本と活用]

16進数でカラーを指定

Sunday, 24 February 13

Page 57: StartUp Sass + Compass [基本と活用]

$c1: #fff;

Compile

whiteSunday, 24 February 13

Page 58: StartUp Sass + Compass [基本と活用]

!?

Sunday, 24 February 13

Page 59: StartUp Sass + Compass [基本と活用]

Rubyファイルをごにょごにょすれば

いけるらしいです

www.xenophy.com/sass/4148

Sunday, 24 February 13

Page 60: StartUp Sass + Compass [基本と活用]

#fffffeで逃げるという手m..

Sunday, 24 February 13

Page 61: StartUp Sass + Compass [基本と活用]

ファイルの管理と

運用の注意点

Sunday, 24 February 13

Page 62: StartUp Sass + Compass [基本と活用]

DEMO

ファイルの管理

Sunday, 24 February 13

Page 63: StartUp Sass + Compass [基本と活用]

先頭にアンダースコア( _ )が付いているファイルはコンパイルしてもCSSに変換されない、インポート専用のファイルです。

Sunday, 24 February 13

Page 64: StartUp Sass + Compass [基本と活用]

これを利用して、用途によって切り分けてみましょう。

Sunday, 24 February 13

Page 65: StartUp Sass + Compass [基本と活用]

_mq_tb.scssstyle.scss

_mq_sp.scss

_module.scss

ファイル構成

Sunday, 24 February 13

Page 66: StartUp Sass + Compass [基本と活用]

_mq_tb.scssstyle.scss

_mq_sp.scss

_module.scss

ファイル構成

コンパイルしてもCSSは書き出されない!

Sunday, 24 February 13

Page 67: StartUp Sass + Compass [基本と活用]

読み込み方法

@import “mq_tb”;

Sunday, 24 February 13

Page 68: StartUp Sass + Compass [基本と活用]

拡張子はいらないの?

Sunday, 24 February 13

Page 69: StartUp Sass + Compass [基本と活用]

.scss  .sass両方いけるように

拡張子は不要な設計となっているようです

Sunday, 24 February 13

Page 70: StartUp Sass + Compass [基本と活用]

DEMO

Output Style

Sunday, 24 February 13

Page 71: StartUp Sass + Compass [基本と活用]

Sunday, 24 February 13

Page 72: StartUp Sass + Compass [基本と活用]

NESTED

Sunday, 24 February 13

Page 73: StartUp Sass + Compass [基本と活用]

COMPACT

Sunday, 24 February 13

Page 74: StartUp Sass + Compass [基本と活用]

EXPANDED いつもの!

Sunday, 24 February 13

Page 75: StartUp Sass + Compass [基本と活用]

COMPRESSED 高圧縮!

Sunday, 24 February 13

Page 76: StartUp Sass + Compass [基本と活用]

開発時 納品時

EXPANDED

EXPANDED

COMPRESSED

+

Sunday, 24 February 13

Page 77: StartUp Sass + Compass [基本と活用]

DEMO

コメントでしっかり管理

Sunday, 24 February 13

Page 78: StartUp Sass + Compass [基本と活用]

基本編でやったように、

Sassは今までのCSSと

少し書き方が違います

Sunday, 24 February 13

Page 79: StartUp Sass + Compass [基本と活用]

Mixin

extend

ネスト親要素参照

変数演算

if文

関数

Sunday, 24 February 13

Page 80: StartUp Sass + Compass [基本と活用]

無敵だ

Sunday, 24 February 13

Page 81: StartUp Sass + Compass [基本と活用]

でもちょっと待って下さい

Sunday, 24 February 13

Page 82: StartUp Sass + Compass [基本と活用]

オレオレCSSは考えもの

Sunday, 24 February 13

Page 83: StartUp Sass + Compass [基本と活用]

他のスタッフはおろか

自分すら解読不可能に..

最悪の場合 ?

Sunday, 24 February 13

Page 84: StartUp Sass + Compass [基本と活用]

コメント管理は必須!

Sunday, 24 February 13

Page 85: StartUp Sass + Compass [基本と活用]

Compile

Sunday, 24 February 13

Page 86: StartUp Sass + Compass [基本と活用]

// のコメントは

SCSSに関するコメント

/**/ のコメントは

CSSに関するコメント

Sunday, 24 February 13

Page 87: StartUp Sass + Compass [基本と活用]

•Sassでの複数ファイルの管理は(_) partials(パーシャル)を使う

•適切なフォーマットでコンパイル•複雑過ぎる記述は避ける•コメントはしっかり残す

Sunday, 24 February 13

Page 88: StartUp Sass + Compass [基本と活用]

Compassを使おう

Sunday, 24 February 13

Page 89: StartUp Sass + Compass [基本と活用]

DEMO

Compassの初期設定

Sunday, 24 February 13

Page 90: StartUp Sass + Compass [基本と活用]

ターミナルで下記のコマンドを入力

gem update --systemgem install compass

※環境によって sudo を頭につけて実行しないと出来ない場合もあります

Sunday, 24 February 13

Page 91: StartUp Sass + Compass [基本と活用]

早速使ってみましょう!

Sunday, 24 February 13

Page 92: StartUp Sass + Compass [基本と活用]

@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 [基本と活用]

@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 [基本と活用]

@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 [基本と活用]

@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 [基本と活用]

@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 [基本と活用]

@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 [基本と活用]

@compassで全ての機能をインポートできますが、リセットのみは個別でやらないとインポートできないので注意!

Sunday, 24 February 13

Page 99: StartUp Sass + Compass [基本と活用]

DEMO

Compass

CSS Sprite Tool

Sunday, 24 February 13

Page 100: StartUp Sass + Compass [基本と活用]

っていう位にこの機能が便利

Sunday, 24 February 13

Page 101: StartUp Sass + Compass [基本と活用]

spriteimg

イメージフォルダの直下に

sprite用のフォルダを作成

Sunday, 24 February 13

Page 102: StartUp Sass + Compass [基本と活用]

spriteimg a.png

b.png

c.png

スプライトにしたい画像を放り込む!

Sunday, 24 February 13

Page 103: StartUp Sass + Compass [基本と活用]

Compile

Sunday, 24 February 13

Page 104: StartUp Sass + Compass [基本と活用]

spriteimg a.png

b.png

c.png

spritehogehoge.png

なんか出来てる!

Sunday, 24 February 13

Page 105: StartUp Sass + Compass [基本と活用]

Sunday, 24 February 13

Page 106: StartUp Sass + Compass [基本と活用]

早速使ってみよう!

Sunday, 24 February 13

Page 107: StartUp Sass + Compass [基本と活用]

$sprite: sprite-map("hoge/*.png");

画像の結合

sprite画像を入れたフォルダ名

Sunday, 24 February 13

Page 108: StartUp Sass + Compass [基本と活用]

background-image: $sprite;

background-position:

sprite-position($sprite, file-name);

画像の出力

先程作った変数の名前

Sunday, 24 February 13

Page 109: StartUp Sass + Compass [基本と活用]

background-image: $sprite;

background-position:

sprite-position($sprite, file-name);

画像の出力

出力したい画像のファイル名

Sunday, 24 February 13

Page 110: StartUp Sass + Compass [基本と活用]

width: image-width("hoge/file-name.png");

height: image-height("hoge/file-name.png");

横幅や縦のサイズを取得

画像のパス

Sunday, 24 February 13

Page 111: StartUp Sass + Compass [基本と活用]

display: block;

background-repeat: no-repeat;

他にもいくつか指定を加える

Sunday, 24 February 13

Page 112: StartUp Sass + Compass [基本と活用]

DEMO

Codekitでの利用

Sunday, 24 February 13

Page 113: StartUp Sass + Compass [基本と活用]

CodeKit

Sunday, 24 February 13

Page 114: StartUp Sass + Compass [基本と活用]

黒い画面、怖いですよね?

Sunday, 24 February 13

Page 115: StartUp Sass + Compass [基本と活用]

CodeKitなら

Sunday, 24 February 13

Page 116: StartUp Sass + Compass [基本と活用]

Sunday, 24 February 13

Page 117: StartUp Sass + Compass [基本と活用]

CodeKit に D&D するだけドラッグアンドドロップ

Sunday, 24 February 13

Page 118: StartUp Sass + Compass [基本と活用]

新規にCompassプロジェクトを作成する

Sunday, 24 February 13

Page 119: StartUp Sass + Compass [基本と活用]

既存のプロジェクトでCompassを利用する

Sunday, 24 February 13

Page 120: StartUp Sass + Compass [基本と活用]

Compass をインストールする

Sunday, 24 February 13

Page 121: StartUp Sass + Compass [基本と活用]

Compassを設定する

相対パスにする

Sunday, 24 February 13

Page 122: StartUp Sass + Compass [基本と活用]

Compassを設定する

相対パスにする

Sunday, 24 February 13

Page 123: StartUp Sass + Compass [基本と活用]

CodeKitでできること

•Sassをはじめとする主要な    CSS Preprocesserのコンパイル

•JSのファイルのミニファイ・統合•ブラウザのオートリロード•Compassなどの利用

Etc.

Sunday, 24 February 13

Page 124: StartUp Sass + Compass [基本と活用]

DEMO

Bourbon

Sunday, 24 February 13

Page 125: StartUp Sass + Compass [基本と活用]

ありがとうございました!

大竹孔明

Sunday, 24 February 13