StartUp Sass + Compass [基本と活用]

第１回 Creators Meetup :

StartUp Sass+Compass
∼基本と活用∼

大竹孔明

Sunday, 24 February 13

大竹孔明こうめ
コーディングを中心に Twitter : @Bamboo_C
Web制作をしています Facebook : komei.otake


ぴっちぴちの22歳です


Arcted
arcted.jp


公開

NameCard.jp
http://name-card.jp

製作中

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


現在のキャラの半数が


現在のキャラの半数が

未亡人


ご期待ください！


本日の内容

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


基本の記述方法の復習


DEMO

ネスト


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


SCSS
.wrap {
width: 80px;
height: 80px;
.inner {
}
}


SCSS
.wrap {
width: 80px;
入れ子に出来る
height: 80px;
.inner {
}
}


SCSS CSS

.wrap { .wrap {
width: 80px; width: 80px;
height: 80px; height: 80px;
.inner { }
border: 1px .. .wrap .inner {
} border: 1px soli..
} }


DEMO

@media指定のネスト


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


SCSS

.wrap {
width: 1000px;
width: 100%;
}
}


SCSS
.wrap {
width: 1000px;
width: 100%;
}
}


SCSS CSS

.wrap { .wrap {
width: 1000px; width: 1000px;
@media screen a.. }
width: 100%; @media screen and..
} .wrap {
} width: 100%;
}
}

DEMO

親セレクタの参照


CSS

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


SCSS

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


SCSS
a{
display: block;
&:hover {
}
}


SCSS CSS

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


DEMO

変数


CSS

.wrap {
}
.wrap a {
color: green;
}


SCSS
$mainColor: #ededed;
$keyColor: green;

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

SCSS
$keyColor: green;

.wrap { 定義した値を
a{
color: $keyColor;
}
}

SCSS
$keyColor: green;

.wrap { 指定できる
a{
color: $keyColor;
}
}

SCSS CSS
$mainColor: #ede..
$keyColor: green; .wrap {
background: #..
.wrap { }
background: $.. .wrap a {
a{ color: green;
$keyColor: g.. }
}
}

DEMO

演算


CSS

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


SCSS
$widthType1: 100px;

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


SCSS
マイナス
$widthType1: 100px;
乗算
.wrap {
$paddingType1: 10px;
width: $widthType1 - ( $paddingType1 * 2 );
padding: $paddingType1;
}


SCSS CSS
$widthType1: 100..

.wrap {
.wrap {
width: 80px;
$paddingType1 ..
padding: 10px;
width: $widthTy ..
}
padding: $padd ..
}


DEMO

Mixin（ミックスイン）


@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;
}

$side: top; SCSS
$radius: 10px;
@mixinで
ブロックを括って
-moz-border-radius-#{$side}: $radius;
-webkit-border-#{$side}-radius: $radius;
}
@includeで
#navbar li { 呼び出す！
@include rounded-top;
}

CSS

#navbar li {
border-top-radius: 10px;
-moz-border-radius-top: 10px;
-webkit-border-top-radius: 10px;
}


SCSS CSS
$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 ..
}

DEMO

extend（エクステンド）


SCSS
.button-type1 {
width: 100px;
border: 1px solid #5f5f5f;
}

.button-type2 {
@extend .button-type1;
border-color: #000;
}


SCSS
.button-type1 {
width: 100px;
}

値の継承
.button-type2 {
@extend .button-type1;
border-color: #000;
}


.button-type1 { CSS
width: 100px;
}

.button-type2 {
width: 100px;
border-color: #000;
}


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: # ..
}
}

DEMO

ちょっとした注意点


インポレーション


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


#{} で囲むのを
わすれずに！
$side: top;


16進数でカラーを指定


$c1: #ﬀf;

Compile
white

！？


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

いけるらしいです

www.xenophy.com/sass/4148


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


ファイルの管理と

運用の注意点


DEMO

ファイルの管理


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


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


ファイル構成

style.scss _mq_tb.scss

_mq_sp.scss

_module.scss


ファイル構成

style.scss _mq_tb.scss

_mq_sp.scss

_module.scss

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

読み込み方法

@import “mq_tb”;


拡張子はいらないの？


.scss .sass
両方いけるように
拡張子は不要な設計となっているようです


DEMO

Output Style


NESTED


COMPACT


EXPANDED いつもの！


COMPRESSED 高圧縮！


開発時納品時

EXPANDED
EXPANDED +
COMPRESSED


DEMO

コメントでしっかり管理


基本編でやったように、
Sassは今までのCSSと
少し書き方が違います


演算 extend
変数
ネスト関数
Mixin
親要素参照
if文


無敵だ


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


オレオレCSSは考えもの


最悪の場合
他のスタッフはおろか
？
自分すら解読不可能に..


コメント管理は必須！


Compile


// のコメントは
SCSSに関するコメント

/**/ のコメントは
CSSに関するコメント


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

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

Compassを使おう


DEMO

Compassの初期設定


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

gem update --system
gem install compass

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


早速使ってみましょう！


@importでCompassの機能を使う

@import "compass/css3/border-radius";

@import "compass/css3/";

@import "compass/utilities"

@import "compass"

@import "compass/reset/";





border-radiusのみインポート
@import "compass"






CSS3に関するミックスインを
@import "compass"
すべてインポート






@import "compass"
clearﬁxなどのユーティリティ
系をインポート


Compassのすべて機能を

インポート

@import "compass"





リセット用CSSをインポート

@import "compass"



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


DEMO

Compass

CSS Sprite Tool


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


img sprite

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

sprite用のフォルダを作成


img sprite a.png

b.png

c.png

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


img sprite a.png

b.png

c.png

spritehogehoge.png

なんか出来てる！


早速使ってみよう！


画像の結合

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

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


画像の出力

background-image: $sprite;
background-position:
sprite-position($sprite, ﬁle-name);

先程作った変数の名前


画像の出力

background-image: $sprite;
background-position:
sprite-position($sprite, ﬁle-name);

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


横幅や縦のサイズを取得

width: image-width("hoge/ﬁle-name.png");
height: image-height("hoge/ﬁle-name.png");

画像のパス


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

display: block;
background-repeat: no-repeat;


DEMO

Codekitでの利用


CodeKit


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


CodeKitなら


ドラッグアンドドロップ

CodeKit に D&D するだけ


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


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


Compass をインストールする


Compassを設定する

相対パス
にする


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

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


DEMO

Bourbon


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

大竹孔明


StartUp Sass + Compass [基本と活用]

More Related Content

StartUp Sass + Compass [基本と活用]